响应式数据

选项式API:

在选项式API中,使用data来声明组件的响应式状态,定义响应式数据。
data为一个返回对象的函数，在vue创建新组件实例（即方法和生命周期的this）时被调用，并将函数返回的对象用响应式系统进行包裹（此对象的所有顶层属性都会被代理到组件实例上）

响应式代理 VS 原始值
在 Vue 3 中，数据是基于 JavaScript Proxy（代理） 实现响应式的

export default {
  data() {
    return {
      message: ""
    };
  },
  mounted() {
    const newObj = {};
    this.message = newObj;
    console.log(this.message, newObj); //message为newObj的一个响应式代理,而newObj不会变为响应式
    console.log(newObj === this.message); //false
  }
  }

DOM更新时机

当更改响应式状态后，DOM的更新不是同步的，DOM会在数据更新至下个状态后，才更新至当前状态。若想要使DOM更新同步，可以使用nextTick（）API，或者使用$refs方法访问当前子组件/标签。

export default {
  data() {
    return {
      count: 2,
    };
  },
  methods: {
    increment() {
      this.count++;
      nextTick(() => {
        console.log("nextTick内部打印p标签", this.$refs.p);
        console.log("nextTick内部打印p标签中内容",document.getElementById("incre").innerHTML);
      });
      console.log("nextTick外部打印p标签", this.$refs.p);
      console.log("nextTick外部打印p标签中内容",document.getElementById("incre").innerHTML);
    },
  },
};
<template>
  <div>
    <p id="incre" ref="p">{{ count }}</p>
    <button @click="increment" id="incre">点击自增</button>
  </div>
</template>

组合式API

ref

ref()接收一个js基本数据类型的参数,为数据添加响应式状态。
在vue中使用ref的值，不用通过.value获取;在js中使用ref的值，必须通过.value获取

<script setup>
import { ref} from "vue";
//使用ref定义数据
const count = ref(0);
console.log("count", count);

const obj1 = ref({
  name: "佩奇",
  age: 18,
});
console.log("obj1", obj1);
</script>

reactive

reactive接收一个js对象作为参数,为对象添加响应式状态

• 参数只能为对象(json或arr),基本类型（数字、字符串、布尔值）在 reactive 中无法被创建成 proxy 对象，也就无法实现监听，无法实现响应式
• 本质:就是将传入的数据包装成一个Proxy对象
• 获取值时直接获取,不需要加.value

let ff = reactive("12334");
console.log("ff", ff);

<script setup>
import { reactive } from "vue";
//使用reactive定义数据
const obj2 = reactive({
  name: "佩奇",
  age: 18,
});
console.log("obj2", obj2);

const obj3 = reactive(["玫瑰", "桑葚", "菊花"]);
console.log("obj3", obj3);
</script>

ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, ref定义的数据访问的时候要多一个.value

vue 3.0 setup里定义数据时推荐优先使用ref，方便逻辑拆分和业务解耦。

toRef

• toRef 用于为源响应式对象上的属性新建一个ref，从而保持对其源对象属性的响应式连接。
• 接收两个参数：源响应式对象和属性名，返回一个ref数据。
• 获取数据值的时候需要加.value
• toRef后的ref数据如果是复杂类型数据时，不是原始数据的拷贝，而是引用，改变结果数据的值也会同时改变原始数据

const obj = reactive({ a: 1, b: 2, c: 3 });
const count = toRef(obj, "a");
console.log(count.value);
console.log(count);

toRefs

• toRefs 用于将响应式对象转换为结果对象，其中结果对象的每个属性都是指向原始对象相应属性的ref。
• 常用于es6的解构赋值操作，因为在对一个响应式对象直接解构时解构后的数据将不再有响应式，而使用toRefs可以方便解决这一问题。
• 获取数据值的时候需要加.value
• toRefs后的ref数据如果是复杂类型数据时，不是原始数据的拷贝，而是引用，改变结果数据的值也会同时改变原始数据
  作用其实和 toRef 类似，只不过 toRef 是对一个个属性手动赋值，而 toRefs 是自动解构赋值。

const obj = reactive({ a: 1, b: 2, c: 3 });
const { a, b, c } = toRefs(obj);
console.log(a, b, c);

ref和reactive都属于递归监听，也就是数据的每一层都是响应式的，如果数据量比较大，非常消耗性能，非递归监听只会监听数据的第一层,包括shallowRef和shallowReactive。

shallowRef

shallowRef定义的数据，只有第一层是响应式的，即只有在更改.value的时候才能实现响应式(ref定义的数据每一层都是响应式数据)

使用ref定义数据

let age = ref({
  a: "1",
  f: {
    b: "2",
    s: {
      c: "3",
    },
  },
});
//打印各层数据
console.log(age);
console.log(age.value);
console.log(age.value.f);
console.log(age.value.f.s);

使用shallowRef定义数据

let age = shallowRef({
  a: "1",
  f: {
    b: "2",
    s: {
      c: "3",
    },
  },
});
//打印各层数据
console.log(age);
console.log(age.value);
console.log(age.value.f);
console.log(age.value.f.s);

shallowReactive

使用reactive定义数据

let age = reactive({
  a: "1",
  f: {
    b: "2",
    s: {
      c: "3",
    },
  },
});
//打印各层数据
console.log(age);
console.log(age.f);
console.log(age.f.b);

使用shallowReactive定义数据

let age = shallowReactive({
  a: "1",
  f: {
    b: "2",
    s: {
      c: "3",
    },
  },
});
//打印各层数据
console.log(age);
console.log(age.f);
console.log(age.f.b);