（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 否則它將不適用於子數組