handler(newVal, oldVal) { newVal.forEach((item, index) => { this .$watch(() => item.name, (newName, oldName) => { console.log(`item ${index}: ${oldName} -> ${newName}`) </ script >

在这个例子中,我们定义了一个 watch 函数来监听 items 数组的变化。当数组中的某个元素的 name 属性发生变化时,这个函数就会被调用。

由于 watch 默认只监听对象的引用,而不会深层次地遍历对象内部的属性,因此我们需要将 deep 属性设置为 true ,这样 watch 会递归地监听数组内部的变化。

handler 函数中,我们遍历 newVal 中的每个元素,并使用 $watch 函数来监听每个元素的 name 属性。在回调函数中,我们可以打印出旧值和新值,或者执行其他操作。

需要注意的是,每当数组中的元素发生变化时, watch 都会重新创建这个元素的 $watch 函数,因此如果你在一个循环中有大量的元素,这可能会导致性能问题。如果你需要监听一个大型的数组,你可能需要使用一些优化措施,如 debounce throttle