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

前言

在 vue 中, 반응성 (響應式 響應式) 是 vue 的 一 大 大 特色 特色 特色 特色 特色 特色 特色 特色 特色 特色 由于 由于 由于 由于 由于 由于 由于 javaScript 的 限制 限制 限制 限制 情況 情況 vue 不 能 檢測 檢測 배열 或 객체 的 變化 變化 變化 來 及時 頁面 頁面 這 篇 主要 主要 針對 針對 針對 針對 來 迴避 這 問題 問題 問題 讓 讓 讓 讓 讓 讓 讓 讓 讓 渲染他及時渲染.

Array數據變動 ⇒ 甚麼情況不會반응성

Vue 불확실한 작업 중단:

直接賦值

vm.items[indexOfItem] = newValue

修改數組長度

vm.items.length = newLength

반응성

예시

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)