观察数组中当前值的变化答案

【问题标题】：Watch for current value changes in array观察数组中当前值的变化
【发布时间】：2021-09-08 00:20:09
【问题描述】：

每当它改变半径和中心时，我都想观察每个项目，无论何时我想控制台记录项目索引和值

let map = ref(null) map.value.circles 是一个数组当我使用这个监视功能时，它只在加载时显示一次值，我希望每次在控制台中更改时都能看到它。我该怎么做？

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

所以当 item.circle.center.lat() 和 lng 发生变化时，我想通过控制台记录它，而不是每个项目。

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

【问题讨论】：

标签： vue.js vuejs3

【解决方案1】：

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

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

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

来源：

Vue 3 docs about using deep

Vue 3 docs about using watch

Vue 3 Using Deep with watch() & Composition API

【讨论】：

尝试使用您的解决方案，它根本不会记录任何内容
OP 使用的是watch() method in the composition API，而不是watch option in the options API。
@Terry 我在帖子中的内容似乎在第一次在页面上加载时有效，但它不会更新任何更改的值，或者每当添加新项目时它不会记录任何内容.
@Terry 是正确的 - 我更新了我的答案以与组合 api 而不是选项 api 保持一致：)
@vanblart，当我添加 deep: true 时，我的应用程序加载 20 秒，当它加载时没有任何效果。如果没有 deep，它会记录项目，但在更改后不会再次记录。