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
。