（VueJS v3）我如何观察反应数组的数组突变（插入、删除、替换）？

Question

如何查看反应数组，以便知道在调用push() 、 splice()等时插入、删除和替换了什么？

Answer 1

由于splice等不直接为数组分配新值，因此 Vue 的反应性系统不会接受更改，并且观察者不会触发。

但是，您可以创建一个复制数组的计算对象，然后观察：

computed: {
  myArray() {
    return this.my_array.slice();
  },
},
data() {
  return {
    my_array: [],
  };
},
watch: {
  myArray(newArray, oldArray) {
    // do stuff
  },
},

演示

Answer 2

在 Vue3 上，您可以在脚本上执行此操作

<script setup>
watchEffect(() => { console.log(nameOfYourArray)})
</script>

或者在带有选项 API 的 Vue 2 和 Vue3 上

     Watch: {
      nameofYourArray: {
        deep: true,
        immediate:true,
        handler(newVal,oldVal){
        console.log(newVal)
        }
      }
   }

如果您使用 2 个解决方案，请不要忘记添加 deep 否则它将不适用于子数组