成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Vue 改變數(shù)據(jù)，頁面不刷新的問題

saucxs / 2601人閱讀

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

更多文章

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

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

// popupData是修改的數(shù)據(jù)，修改完后，賦值給對應(yīng)的表格數(shù)據(jù)
this.tableData[this.currentRow] = this.popupData
注意事項（以下內(nèi)容摘自官方文檔）

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

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

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

舉個例子：

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

為了解決第一類問題，以下兩種方式都可以實現(xiàn)和 vm.items[indexOfItem] = newValue 相同的效果，同時也將在響應(yīng)式系統(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)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/104678.html

相關(guān)文章

  • 前端路由簡介以及vue-router實現(xiàn)原理

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

    tuomao 評論0 收藏0

  • 面試官常問——vue篇

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

    BlackMass 評論0 收藏0

  • 面試官常問——vue篇

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

    xingqiba 評論0 收藏0

  • 面試官常問——vue篇

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

    quietin 評論0 收藏0

  • vue2實踐（持續(xù)更新）

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

    n7then 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<