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

saucxs 發布于2019-08-23 18:06 / 2594人閱讀

摘要：更多文章最近在用開發一個網站，使用組件時，發現修改完數據，有時候會延遲一兩秒，頁面才會發生變化。

更多文章

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

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

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

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

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

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

當你修改數組的長度時，例如：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)

云服務器 GPU云服務器 js 保存數據刷新不改變 asp不刷新頁面 php 不刷新頁面 asp不刷新全部頁面

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/104678.html

前端路由簡介以及vue-router實現原理

摘要：后端路由簡介路由這個概念最先是后端出現的。前端路由模式隨著的流行，異步數據請求交互運行在不刷新瀏覽器的情況下進行。通過這些就能用另一種方式來實現前端路由了，但原理都是跟實現相同的。后端路由簡介路由這個概念最先是后端出現的。在以前用模板引擎開發頁面時，經常會看到這樣 http://www.xxx.com/login 大致流程可以看成這樣：瀏覽器發出請求服務器監聽到80端口（或4...

tuomao 2019-08-26 11:56 評論0 收藏0
面試官常問——vue篇

摘要：如果要相應狀態改變，通常最好使用計算屬性或取而代之。那解決問題的思路便是在改變的情況下，保證頁面的不刷新。后面值的變化，并不會導致瀏覽器向服務器發出請求，瀏覽器不發出請求，也就不會刷新頁面。 1.vue生命周期2.vue 雙向綁定原理3.vue router原理4.vue router動態路由 1.vue 生命周期鉤子 showImg(https://segmentfault.com/...

BlackMass 2019-08-30 15:55 評論0 收藏0
面試官常問——vue篇

摘要：如果要相應狀態改變，通常最好使用計算屬性或取而代之。那解決問題的思路便是在改變的情況下，保證頁面的不刷新。后面值的變化，并不會導致瀏覽器向服務器發出請求，瀏覽器不發出請求，也就不會刷新頁面。 1.vue生命周期2.vue 雙向綁定原理3.vue router原理4.vue router動態路由 1.vue 生命周期鉤子 showImg(https://segmentfault.com/...

xingqiba 2019-08-23 15:25 評論0 收藏0
面試官常問——vue篇

摘要：如果要相應狀態改變，通常最好使用計算屬性或取而代之。那解決問題的思路便是在改變的情況下，保證頁面的不刷新。后面值的變化，并不會導致瀏覽器向服務器發出請求，瀏覽器不發出請求，也就不會刷新頁面。 1.vue生命周期2.vue 雙向綁定原理3.vue router原理4.vue router動態路由 1.vue 生命周期鉤子 showImg(https://segmentfault.com/...

quietin 2019-08-02 14:19 評論0 收藏0
vue2實踐（持續更新）

摘要：記錄一些小技巧和踩過的坑由于本篇文章內容太多，導致編輯器有點卡，所以新開辟了一篇實踐二，后續再這里更新。組件的生命周期函數是在標簽里的數據發生變化時候觸發數據可能更新了，但是沒有綁定到上面的話，不會調用鉤子函數。記錄一些小技巧和踩過的坑由于本篇文章內容太多，導致SF編輯器有點卡，所以新開辟了一篇 vue2實踐（二），后續再這里更新。 1. props 帶不帶冒號的區別 ...

n7then 2019-08-20 15:05 評論0 收藏0