vuejs3.0 从入门到精通——watch侦听器——深层侦听

watch侦听器——深层侦听

https://cn.vuejs.org/guide/essentials/watchers.html#basic-example

  直接给watch()传入一个响应式对象，会隐式地创建一个深层侦听器——该回调函数在所有嵌套的变更时都会被触发：

const obj = reactive({ count: 0 })

watch(obj, (newValue, oldValue) => {
  // 在嵌套的属性变更时触发
  // 注意：`newValue` 此处和 `oldValue` 是相等的
  // 因为它们是同一个对象！
})

obj.count++

  在 Vue3 中，watch()函数被用来观察一个响应式对象或响应式引用（ref）的变化。当传入的响应式对象或引用发生变化时，watch()函数会执行一个回调函数。

  此外，如果你观察一个对象，Vue3 会为对象的每个嵌套属性创建一个单独的侦听器。这意味着，如果对象中的任何属性发生变化，无论其深度如何，都会触发侦听器。

  相比之下，一个返回响应式对象的 getter 函数，只有在返回不同的对象时，才会触发回调：

watch(
  () => state.someObject,
  () => {
    // 仅当 state.someObject 被替换时触发
  }
)　　

  上面官方的这段代码怎么理解呢？

import { reactive, watch } from 'vue';  
  
const state = reactive({  
  someObject: { name: 'John' },  
});  
  
watch(  
  () => state.someObject,  
  (newValue, oldValue) => {  
    console.log('someObject changed:', newValue, ' Old value:', oldValue);  
    // 在这里执行你需要的操作  
  }  
);  
  
// 修改 state.someObject  
state.someObject.name = 'Jane';  
// 输出：someObject changed: { name: 'Jane' } Old value: { name: 'John' }

  在上面的示例中，我们使用 watch 函数来观察 state.someObject 的变化。当 state.someObject 中的 name 属性被修改时，回调函数被触发，并输出新的值和旧的值。

  在Vue3中，使用watch函数时，可以通过添加deep选项来强制将其转换为深层侦听器。深层侦听器会观察对象内部的属性变化，而不仅仅是对象本身的变化。

  下面是针对上述例子，添加deep选项的代码示例：

import { reactive, watch } from 'vue';  
  
const state = reactive({  
  someObject: { name: 'John' },  
});  
  
watch(  
  () => state.someObject,  
  { deep: true },  
  (newValue, oldValue) => {  
    console.log('someObject changed:', newValue, ' Old value:', oldValue);  
    // 在这里执行你需要的操作  
  }  
);  
  
// 修改 state.someObject  
state.someObject.name = 'Jane';  
// 输出：someObject changed: { name: 'Jane' } Old value: { name: 'John' }

  深度侦听需要遍历被侦听对象中的所有嵌套的属性，当用于大型数据结构时，开销很大。因此请只在必要时才使用它，并且要留意性能。