观察数组中当前值的变化

Question

每当它改变半径和中心时，我想监视每个项目，每当它改变时，我想 console.log 项目索引和值

let map = ref(null) map.value.circles是一个数组当我使用这个监视函数时，它只在加载时显示一次值，我希望每次它在控制台中发生变化时都能看到它。我怎样才能做到这一点？

     watch(() => map.value, (currentValue) => {
        currentValue.circles.forEach((item) => {
          console.log(item)
        })
      },
    );

因此，当 item.circle.center.lat() 和 lng 更改时，我想控制台记录它，而不是每个项目。

现在每当我更新任何项目时，都不会记录任何内容。

Answer 1

默认情况下，Vue 对象（包括数组）仅在创建或替换时触发监视。为了观察数组/对象的突变，您需要包含选项deep( deep: true)。

您需要稍微修改您的手表，以便可以传递深度选项 - 我相信它最终会看起来像这样：

watch(() => map.value, 
  (currentValue) => {
    currentValue.circles.forEach((item) => {
      console.log(item)
    })
  },
  {deep: true}
);

资料来源：

关于使用 Deep 的 Vue 3 文档

关于使用 watch 的 Vue 3 文档

Vue 3 将 Deep 与 watch() 和 Composition API 结合使用