Vue 中如何監測數組的變化？

在 Vue 中，如果直接對數組進行操作，比如使用下標直接修改元素，數組長度不變時， Vue 是無法監測到這種變化的，導致無法觸發視圖更新。針對該問題，總結如下解決方法：

一、使用 Vue.js 提供的方法來更新數組

在 Vue.js 中，可以使用 Vue.set(target, key, value) 或 vm.$set(target, key, value) 來監測數組變化。例如：

// 使用 Vue.set()
Vue.set(vm.items, indexOfItem, newValue)

// 使用 vm.$set
vm.$set(vm.items, indexOfItem, newValue)

除了上述方法之外，Vue.js 還提供了一些其它的方法來監測數組變化，如 push()、pop()、shift()、unshift()、splice()、sort() 和 reverse()。這些方法都是基於數組原型鏈上的方法，Vue.js 通過重寫這些方法來監測數組變化。

例如，如果要在數組末尾添加一個新的元素，可以使用 vm.items.push(newItem)。

你也可以使用vm.items.length = newLength來修改數組長度，這樣也會觸發視圖更新。

總之，在 Vue.js 中，如果你想要監測數組變化，最好使用 Vue.js 提供的方法來更新數組。

二、使用專門用於監測數組變化的語法糖

另外,Vue.js提供了一些專門用於監測數組變化的語法糖，如 v-for 指令，它允許我們遍曆數組並渲染每個元素。當數組發生變化時，v-for 指令會自動重新渲染視圖。

三、使用Vue.observable()函數

還有，對於對象變化的監測,我們可以使用Vue.observable()函數來創建一個可監測的對象。

使用 Vue.observable() 可以避免使用 Vue.set() 或 vm.$set() 來監測對象的變化。

例如：

const obj = Vue.observable({
  prop: 'value'
})

四、使用 computed 屬性和 watch 屬性監測數組變化

computed 屬性是 Vue.js 中的一種計算屬性，它可以根據其他屬性的值進行計算得到新的值。當其他屬性的值發生變化時，computed 屬性也會隨之變化。

watch 屬性是 Vue.js 中的一種監聽屬性，它可以監聽某個屬性的變化並執行相應的函數。

例如:

computed: {
  filteredItems() {
    return this.items.filter(item => item.age > 18)
  }
},
watch: {
  items: {
    immediate: true,
    handler() {
      console.log('items changed')
    }
  }
}

使用 computed 和 watch 屬性可以方便地監測數組和對象的變化，並執行相應的操作。

五、使用 Deep Watcher 方法

watch: {
  'myArray': {
    deep: true,
    handler: function (val) {
    // do something with the new and old value of myArray
    }
  }
}

當 deep 為 true 時，Vue 會遞歸監測數組中所有對象的變化，但是會帶來一些性能開銷，所以在實際使用中需要根據實際需要來確定是否使用 deep watcher。

六、使用 $watch 函數

mounted() {
  this.$watch(
    'myArray',
    function(newVal, oldVal) {
      // do something with the new and old value of myArray
    },
    {
      deep: true
    }
  )
}

$watch 方法接收三個參數，第一個是要監測的屬性，第二個是回調函數，第三個是配置對象，可以使用 deep 選項來監測對象中的變化。

七、使用 Vue 的 $forceUpdate() 方法

使用 Vue 的 $forceUpdate() 方法來強制組件重新渲染，這樣就可以監測到數組的變化。

this.$forceUpdate()

這樣做會讓組件強制重新渲染, 但是這樣會有一些性能開銷,所以不建議在組件中頻繁使用 $forceUpdate()。

八、使用 Vue 中的 $nextTick() 方法

使用 Vue 中的 $nextTick() 方法來監測數組變化。$nextTick() 函數可以在下一次 DOM 更新迴圈結束之後執行延遲回調。

this.$nextTick(() => {
  // your code
})

這樣可以確保在數組變化之後再執行相關的操作，這樣就可以監測到數組的變化。

九、使用 reactive 函數

在 Vue3 中可以使用 reactive 函數來創建響應式的數組，這樣就可以監測到數組的變化。

import { reactive } from 'vue'

const state = reactive({
  myArray: [1, 2, 3]
})

這樣Vue3就會自動監測 myArray 變化。

十、使用 vue-devtools 中的 track 功能

註意：該方法無法解決修改數組未觸發視圖更新的問題，屬於數組監測問題

總之，Vue.js 提供了多種方法來監測數組和對象的變化，如使用 Vue.set()，splice()，$set()，$delete()，watch，computed，$watch()，vue-devtools 中的 “track” 功能，Vue3 中的 reactive 函數，$forceUpdate() 和 $nextTick() 等方法，可以根據需要選擇合適的方法來實現。