Vue 3中deep属性的深度解析：ref与reactive的不同表现

在Vue 3中，deep属性在watch函数中的作用是控制是否深度监听一个对象或数组的内部变化。不过，对于reactive创建的响应式对象，deep的行为有些特别，因为reactive默认就是深度响应的。下面是对deep属性在Vue 3中针对ref和reactive的详细分析：

监听`ref`

当监听一个通过ref创建的响应式引用时，deep参数的行为如下：

deep: false（默认值）：监听器只会在.value属性的整个值被替换时触发。
deep: true：如果.value是一个对象或数组，监听器会在这个对象或数组的内部属性或元素发生变化时触发。

javascript 复制代码

import { ref, watch } from 'vue';

const count = ref(0);

// deep: false 时，监听器不会触发，因为count.value没有被整个替换
watch(count, (newValue, oldValue) => {
  console.log(`Count changed from ${oldValue} to ${newValue}`);
}, { deep: false });

count.value++; // 监听器不触发

// 如果count.value是一个对象，deep: true 将监听这个对象的内部变化
const obj = ref({ a: 1 });
watch(obj, (newValue, oldValue) => {
  console.log('Object changed');
}, { deep: true });

obj.value.a = 2; // 监听器触发

监听`reactive`

当监听一个通过reactive创建的响应式对象时，deep参数的行为如下：

deep: false（默认值）：尽管reactive创建的对象是深度响应的，但在这个上下文中，deep: false意味着监听器不会触发于对象内部属性的变化（这实际上是个误解，因为reactive总是深度监听，但在这里我们解释deep选项的意图）。实际上，无论deep的值如何，reactive对象的内部属性变化都会触发监听器。！！！只监听对象的第一层属性，再深的属性不监听
deep: true：同样，由于reactive总是深度响应的，这个选项在这里没有额外的效果。监听器会在对象的任何内部属性或嵌套的对象/数组的属性发生变化时触发。

javascript 复制代码

import { reactive, watch } from 'vue';

const state = reactive({ count: 0 });

// 对于reactive对象，deep选项实际上没有区别，因为reactive总是深度响应的
watch(state, (newValue, oldValue) => {
  console.log('State changed');
}, { deep: false });

state.count++; // 监听器触发，因为state是reactive创建的，总是深度响应

// deep: true 时，行为相同
watch(state, (newValue, oldValue) => {
  console.log('State also changed');
}, { deep: true });

state.count++; // 监听器同样触发

总结：在Vue 3中，deep选项对于ref创建的响应式引用是有意义的，它控制是否监听.value属性（如果它是一个对象或数组）的内部变化。然而，对于reactive创建的响应式对象，deep选项实际上没有区别，因为reactive总是深度响应的。无论deep的值如何，reactive对象的内部属性变化都会触发监听器。

Vue 3中deep属性的深度解析：ref与reactive的不同表现

监听ref

监听reactive

监听`ref`

监听`reactive`