當Vue Array資料變動如何做到即時渲染

前言

在Vue中，Reactivity(響應式)是Vue的一大特色，但由于 JavaScript 的限制，有些情況Vue不能檢測array或object的變化來及時渲染頁面，這篇主要針對array來迴避這個問題，以及如何讓他及時渲染。

Array數據變動 ⇒ 甚麼情況不會Reactivity

Vue不能檢測以下數據變化:

1. 直接賦值
   

   vm.items[indexOfItem] = newValue
   

2. 修改數組長度
   

   vm.items.length = newLength
   

如何Reactivity

舉例

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是****Reactivity****
vm.items.length = 2 // 不是****Reactivity****

以下兩種方法都可以實現和vm.items[indexOfItem] = newValue同樣效果，同時也會在*Reactivity System觸發狀態更新*

vm.$set(vm.items, indexOfItem, newValue)

vm.items.splice(newLength)