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

watch侦听器——深层侦听

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

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

?

1 2 3 4 5 6 7 8 9

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

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

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

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

?

1 2 3 4 5 6

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

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

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选项的代码示例：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

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' }

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