Vue 3响应式系统全解析：深入ref、reactive、computed、watch及watchEffect

一、ref与breactive

宏观角度看：

• 1.ref 用来定义:基本类型数据、对象类型数据；
• 2.reactive 用来定义:对象类型数据。

区别：

• 【ref 】创建的变量必须使用.value 。
• 【reactive】 重新分配一个新对象，会失去响应式(可以使用0biect.assign 去整体替换)。

使用原则:

• 1.若需要一个基本类型的响应式数据，必须使用ref。
• 2.若需要一个响应式对象，层级不深，ref、reactive 都可以。
• 3.若需要一个响应式对象，且层级较深，推荐使用reactive 。

二、toRefs与toRef

1.toRef

• 作用：从 reactive 对象中提取单个属性，创建一个 ref。
• 使用场景：当你需要对 reactive 对象的某个具体属性进行单独的响应式处理时。

基本用法

import {
    reactive, toRef } from 'vue';
const person = reactive({
    name: 'John Doe' });
const nameRef = toRef(person, 'name');
console.log(nameRef.value); // John Doe

2.toRefs

• 作用：将 reactive 对象转换为多个 ref 对象的集合。
• 使用场景：适用于需要将整个 reactive 对象的多个属性分别作为 ref 处理的情况。

基本用法

import {
    reactive, toRefs } from 'vue';

const person = reactive({
    name: 'John Doe', age: 30 });
const {
    name, age } = toRefs(person);
console.log(name.value); // John Doe
console.log(age.value);  // 30

结论

• toRef 创建单个 ref，用于单个属性的响应式绑定。
• toRefs 创建多个 ref，用于将整个对象的属性分别响应式绑定。
• 选择使用 toRef 或 toRefs 取决于你需要对 reactive 对象执行的响应式操作的复杂性。

三、computed计算属性

计算属性是 Vue 3 中一种特殊的响应式变量，它根据其他响应式数据自动计算值。

基本用法

import {
    computed, ref } from 'vue';
const count = ref(0);
const doubledCount = computed(() => count.value * 2);

特点

• 自动更新：当依赖的数据变化时，计算属性会自动重新计算。
• 惰性计算：只有当依赖项变化时，计算逻辑才会执行。
• 结果缓存：多次访问计算属性会得到相同的结果，而不会重复计算。
<