深度监听 ref 和 reactive 的区别详解

---

以下从响应式原理、监听方式和实际表现三个维度，分析二者的核心区别：
一、ref 的深度监听（示例代码）

1. <template>
2.     <div class="person">
3.         <p>嵌套值：{{ refObj.nested.value }}</p>
4.         <button @click="refObj.nested.value = '新的值'">修改值</button>
5.     </div>
7. </template>
9. <script lang="ts" setup>
10. import { ref, watch } from 'vue';
11. const refObj = ref({
12.     nested: {
13.         value: "初始值"
14.     }
15. });
16. watch(refObj, (newVal) => {
17.     console.log("ref 嵌套变化:", newVal.nested.value);
18. }, { deep: true }); // 必须显式设置 deep: true
20. watch(refObj.value, (newVal) => {
21.     console.log("ref 嵌套变化:", newVal.nested.value);
22. }); // 若改为监听refObj.value（即 reactive 对象），则无需 deep
24. </script>

复制代码

关键点：

1. ref 的存储方式：

ref 会将对象包裹在 .value 属性中，底层主动用 reactive 转换嵌套对象。（即 refObj.value 是 reactive 代理对象）
2. 监听 ref 的特性

• 直接监听 refObj（而非 .value）时，必要显式设置 deep: true 才气捕获嵌套属性变化。若不设置 deep，仅当整个 .value 被替换时才会触发监听。
  
• 等价替换方案
  若改为监听 refObj.value（即 reactive 对象），则无需 deep：
  

二、reactive 的深度监听（示例代码）

1. const reactiveObj = reactive({
2.         nested: {
3.                 value: "初始值"
4.         }
5. });
7. watch(() => reactiveObj, (newVal) => {
8.     console.log("reactive 嵌套变化:", newVal.nested.value);
9. }, { deep: true }); // deep:true 在此处是冗余的

复制代码

关键点：

1. reactive 的深度响应性

reactive 创建的代理对象默认支持深层级响应，修改任意嵌套属性都会触发更新。
2. 监听 reactive 的特性

• 直接监听 reactiveObj 时，无需 deep 即可主动深度监听。
  示例代码中的 () => reactiveObj 是冗余写法，直接转达 reactiveObj 即可：
  

1. watch(reactiveObj, (newVal) => {
2.     console.log("reactiveObj 嵌套变化:", newVal.nested.value);
3. }); // 直接监听 reactiveObj 时，无需 deep 即可自动深度监听

复制代码

• 若监听一个返回 reactive 对象的函数（如 () => reactiveObj），需开启深度监听：{deep:true}。
  

1. watch(()=>reactiveObj, (newVal) => {
2.     console.log("reactiveObj 嵌套变化:", newVal.nested.value);
3. },{deep:true}); // 监听一个返回reactive对象的函数,deep:true 开启深度监听

复制代码

• 若监听 reactiveObj.nested.value 时，需利用函数式写法()=>reactiveObj.nested.value，无需开启深度监听。
  

1. watch(()=>reactiveObj.nested.value,(newVal,oldVal)=>{
2.     console.log("reactiveObj 嵌套变化:", newVal,oldVal);
3. }); // 监听 reactiveObj.nested.value 时，需使用函数式写法，deep 选项无效

复制代码

三、核心区别总结

特性ref (对象范例)reactive数据存储方式包裹在 .value 中直接代理对象默认深度监听否（需显式设置 deep）是保举监听方式监听 .value (无需 deep)直接监听对象实用场景根本范例或必要替换整个对象复杂对象，需深层级响应式 四、最佳实践建议

1. 优先利用 reactive

处置处罚复杂对象时，reactive 的主动深度响应更轻便高效。
2. 明确 ref 的利用场景

当必要替换整个对象或处置处罚基础范例时，选择 ref。
3. 简化 watch 配置

• 监听 ref 的 .value 替换显式 deep
  
• 直接转达 reactive 对象而非函数返回值
  

通过理解这些差别，可以更精准地选择响应式工具，并克制不必要的性能消耗。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。