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

saucxs 發(fā)布于2019-08-23 18:06 / 2585人閱讀

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

更多文章

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

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

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

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

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

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

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

舉個(gè)例子：

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

為了解決第一類(lèi)問(wèn)題，以下兩種方式都可以實(shí)現(xiàn)和 vm.items[indexOfItem] = newValue 相同的效果，同時(shí)也將在響應(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 實(shí)例方法，該方法是全局方法 Vue.set 的一個(gè)別名：

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

為了解決第二類(lèi)問(wèn)題，你可以使用 splice：

vm.items.splice(newLength)

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

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

云服務(wù)器 GPU云服務(wù)器 js 保存數(shù)據(jù)刷新不改變 asp不刷新頁(yè)面 php 不刷新頁(yè)面 asp不刷新全部頁(yè)面

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/104678.html

相關(guān)文章

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

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

tuomao 2019-08-26 11:56 評(píng)論0 收藏0
面試官常問(wèn)——vue篇

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

BlackMass 2019-08-30 15:55 評(píng)論0 收藏0
面試官常問(wèn)——vue篇

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

xingqiba 2019-08-23 15:25 評(píng)論0 收藏0
面試官常問(wèn)——vue篇

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

quietin 2019-08-02 14:19 評(píng)論0 收藏0
vue2實(shí)踐（持續(xù)更新）

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

n7then 2019-08-20 15:05 評(píng)論0 收藏0