观察数组中当前值的变化

每当它改变半径和中心时，我想监视每个项目，每当它改变时，我想 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 更改时，我想控制台记录它，而不是每个项目。

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

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

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

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

Sources:

关于使用 Deep 的 Vue 3 文档 https://v3-migration.vuejs.org/breaking-changes/watch.html#overview

关于使用 watch 的 Vue 3 文档 https://v3.vuejs.org/api/computed-watch-api.html#watch

Vue 3 将 Deep 与 watch() 和 Composition API 结合使用 https://v3.vuejs.org/guide/reactivity-computed-watchers.html#watching-reactive-objects