vue watch怎么监听数组中具体某个字段？

Question

比如有数组：

    const items = ref([
        { name: "item1", checked: false },
      { name: "item2", checked: true },
      { name: "item3", checked: false },
    ]);

怎么只监听里面的checked字段？

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

vue watch监听数组中具体某个字段

Vue 的 watch 方法可以监听对象或数组的变化，但是如果你想监听数组中某个字段的变化，需要使用 deep 选项。

例如：

const items = ref([
  { name: "item1", checked: false },
  { name: "item2", checked: false }
])

watch(
  () => items.value.map(item => item.checked),
  (newValue, oldValue) => {
    console.log('checked field changed')
  },
  { deep: true }
)

在上面的代码中，我们使用 map 方法将数组中的每个对象转换为一个新的对象，其中包含 checked 字段的值，然后将这个新的对象作为 watch 方法的依赖项。

deep: true 选项告诉 Vue 深入监听数组中的每个对象，而不是只监听数组的引用变化。

这样，当 items 数组中的某个对象的 checked 字段发生变化时，watch 方法将被触发，并执行回调函数。

如果你想监听某个具体的字段变化，可以使用 items.value.forEach 方法遍历数组，然后使用 watch 方法监听每个对象的该字段的变化。

items.value.forEach((item, index) => {
  watch(
    () => item.checked,
    (newValue, oldValue) => {
      console.log(`item ${index} checked field changed`)
    }
  )
})

这将监听每个对象的 checked 字段的变化，并执行回调函数。