更多文章

最近在用 element-ui 開發(fā)一個網(wǎng)站，使用 table 組件時，發(fā)現(xiàn)修改完數(shù)據(jù)，有時候會延遲一兩秒，頁面才會發(fā)生變化。

看了一下代碼，發(fā)現(xiàn)修改數(shù)據(jù)的代碼是這樣的

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

注意事項（以下內(nèi)容摘自官方文檔）

由于 JavaScript 的限制，Vue 不能檢測以下數(shù)組的變動：

當你利用索引直接設置一個數(shù)組項時，例如：vm.items[indexOfItem] = newValue

當你修改數(shù)組的長度時，例如：vm.items.length = newLength

舉個例子：

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

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

// 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)

轉載于:https://www.cnblogs.com/woai3c/p/11021808.html

總結

以上是生活随笔為你收集整理的Vue 改变数据，页面不刷新的问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。