Vue 改變數據，頁面不刷新的問題

更多文章

最近在用 element-ui 開發一個網站，使用 table 組件時，發現修改完數據，有時候會延遲一兩秒，頁面才會發生變化。

看了一下代碼，發現修改數據的代碼是這樣的

// popupData是修改的數據，修改完后，賦值給對應的表格數據
this.tableData[this.currentRow] = this.popupData

注意事項（以下內容摘自官方文檔）

由於 JavaScript 的限制，Vue 不能檢測以下數組的變動：

1. 當你利用索引直接設置一個數組項時，例如：vm.items[indexOfItem] = newValue
2. 當你修改數組的長度時，例如：vm.items.length = newLength

舉個例子：

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

為了解決第一類問題，以下兩種方式都可以實現和 vm.items[indexOfItem] = newValue 相同的效果，同時也將在響應式系統內觸發狀態更新：

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

// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

你也可以使用 vm.$set 實例方法，該方法是全局方法 Vue.set 的一個別名：

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

為了解決第二類問題，你可以使用 splice：

vm.items.splice(newLength)

所以，解決方法就是用 Vue.set 來代替直接賦值

this.$set(this.tableData, this.currentRow, this.popupData)