vue.js - 观察数组中当前值的变化

Question

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

让 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 ，以便您可以传递 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