【vue】$watch监听数组中对象属性的方法

list: [
        { id: 1, name: 'aaa' },
        { id: 2, name: 'bbb' },
        { id: 3, name: 'ccc' }
      ]

如果需要监听list下的每一个对象的name的变化

watch: {
    'list': {
      deep: true,
      handler(newVal, oldVal) {
        newVal.forEach((item, index) => {
          this.$watch(() => item.name, (newName, oldName) => {
            console.log(`item ${index}: ${oldName} -> ${newName}`)
          })
        })
      }
    }
}

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

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

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

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

搬运工，搬自：www.cnblogs.com/144823836yj…