DEV Community

周柏諭 BO-YU CHOU
周柏諭 BO-YU CHOU

Posted on

當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****
Enter fullscreen mode Exit fullscreen mode

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

vm.$set(vm.items, indexOfItem, newValue)
Enter fullscreen mode Exit fullscreen mode
vm.items.splice(newLength)
Enter fullscreen mode Exit fullscreen mode

Top comments (0)