Vue3基础(二)___reactive

在Vue3中创建响应数据有两种方式一种是ref，另一种就是reactive

reactive

首先在该组件引入

import {
    ref, reactive } from "vue";

<template>
  <div>
    <p>姓名：{
   {
   obj.name}}</p>
    <p>年龄：{
   {
   obj.age}}</p>
    <p v-for="(item,index) in obj.habby" :key="index">爱好{
   {
   index+1}}:{
   {
   item}}</p>
  </div>
</template>

<script>
import {
    reactive } from "vue";
export default {
   
  name: "App",
  setup() {
   
    let obj = reactive({
   
      name: "zjq",
      age: 18,
      habby: ["跳舞", "唱歌", "游泳"]
    });

    return {
   obj}
  }
};
</script>

使用reactive创建的数据，也是需要return 出去，才能在视图层使用。
改变年龄：

<template>
  <div>
    <p>姓名：{
   {
   obj.name}}</p>
    <p>年龄：{
   {
   obj.age}}</p>   <button @click="ageFun">年龄加一</button>
    <p v-for="(item,index) in obj.habby" :key="index">爱好{
   {
   index+1}}:{
   {
   item}}</p>
  </div>
</template>

<script>
import {
    reactive } from "vue";
export default {
   
  name: "App",
  setup() {
   
    let obj = reactive({
   
      name: "zjq",
      age: 18,
      habby: ["跳舞", "唱歌", "游泳"]
    });
  function ageFun() {
   
    obj.age++
  }
    return {
   obj,ageFun}
  }
};
</script>

改变年龄成功，和ref相比较的话，我们这里少了一层value，
ref和reactive两个，ref的底层是reactive可以理解为
ref(0)==>>reactive({value:0})

  setup() {
   
    let num = ref(0)
    let num2 = reactive({
   value:0})
    console.log(num.value ===num2.value) //true
  }

在页面上使用的时候会判断该响应数据是否为ref创建的数据，是的话自动.value取数据；
判断依据为

__v_isRef 等于true说明是ref创建的响应变量。

代码整理：

<template>
  <div>
    <p>姓名：{
   {
   obj.name}}</p>
    <p>年龄：{
   {
   obj.age}}</p>
    <button @click="ageFun">年龄加一</button>
    <p v-for="(item,index) in obj.habby" :key="index">爱好{
   {
   index+1}}:{
   {
   item}}</p>
  </div>
</template>

<script>
import {
    ref, reactive } from "vue";
export default {
   
  name: "App",
  setup() {
   
    let num = ref(0);
    let num2 = reactive({
   value:0});
    console.log(num.value == num2.value);
    let {
    obj, ageFun } = reactiveF();
    return {
    obj, ageFun };
  }
};
function reactiveF() {
   
  let obj = reactive({
   
    name: "zjq",
    age: 18,
    habby: ["跳舞", "唱歌", "游泳"]
  });
  function ageFun() {
   
    obj.age++;
  }
  return {
    obj, ageFun };
}
</script>