我們可能經(jīng)常會(huì)在處理vue項(xiàng)目的時(shí)候，遇到數(shù)據(jù)變化，但是視圖并沒(méi)有實(shí)時(shí)渲染的情況

vue視圖為什么不渲染頁(yè)面的原因

當(dāng)你把一個(gè)普通的 JavaScript 對(duì)象傳給 Vue 實(shí)例的 data 選項(xiàng)，Vue 將遍歷此對(duì)象所有的屬性，并使用 Object.defineProperty 把這些屬性全部轉(zhuǎn)為 getter/setter。Object.defineProperty 是 ES5 中一個(gè)無(wú)法 shim 的特性，這也就是為什么 Vue 不支持 IE8 以及更低版本瀏覽器

劃重點(diǎn)?。。?！

這些 getter/setter 對(duì)用戶來(lái)說(shuō)是不可見(jiàn)的，但是在內(nèi)部它們讓 Vue 追蹤依賴，在屬性被訪問(wèn)和修改時(shí)通知變化。這里需要注意的問(wèn)題是瀏覽器控制臺(tái)在打印數(shù)據(jù)對(duì)象時(shí) getter/setter 的格式化并不同，所以你可能需要安裝 vue-devtools 來(lái)獲取更加友好的檢查接口

每個(gè)組件實(shí)例都有相應(yīng)的 watcher 實(shí)例對(duì)象，它會(huì)在組件渲染的過(guò)程中把屬性記錄為依賴，之后當(dāng)依賴項(xiàng)的 setter 被調(diào)用時(shí)，會(huì)通知 watcher 重新計(jì)算，從而致使它關(guān)聯(lián)的組件得以更新。

1.視圖不更新情況一

數(shù)組數(shù)據(jù)變動(dòng)：我們使用某些方法操作數(shù)組，變動(dòng)數(shù)據(jù)時(shí)，有些方法無(wú)法被vue監(jiān)測(cè)，有些可以

1.哪些方法使數(shù)組變化，可以被vue檢測(cè)到 

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

filter(), concat(), slice() 。這些不會(huì)改變?cè)紨?shù)組，但總是返回一個(gè)新數(shù)組。當(dāng)使用非變異方法時(shí)，可以用新數(shù)組替換舊數(shù)組

2.Vue 不能檢測(cè)以下變動(dòng)的數(shù)組： 

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

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

2.視圖不更新情況二

第二種視圖不更新情況是Vue 不能檢測(cè)到對(duì)象屬性的添加或刪除。由于 Vue 會(huì)在初始化實(shí)例時(shí)對(duì)屬性執(zhí)行 getter/setter 轉(zhuǎn)化過(guò)程，所以屬性必須在 data 對(duì)象上存在才能讓 Vue 轉(zhuǎn)換它，這樣才能讓它是響應(yīng)的

Vue 不允許在已經(jīng)創(chuàng)建的實(shí)例上動(dòng)態(tài)添加新的根級(jí)響應(yīng)式屬性

解決辦法

然而它可以使用 Vue.set(object, key, value) 方法將響應(yīng)屬性添加到嵌套的對(duì)象上

Vue.set(vm.someObject, 'b', 2)

或者

this.$set(this.someObject,'b',2) （這也是全局 Vue.set 方法的別名）

有時(shí)你想向一個(gè)已有對(duì)象添加多個(gè)屬性，例如使用 Object.assign() 或 _.extend() 方法來(lái)添加屬性。但是，這樣添加到對(duì)象上的新屬性不會(huì)觸發(fā)更新。在這種情況下可以創(chuàng)建一個(gè)新的對(duì)象，讓它包含原對(duì)象的屬性和新的屬性：

// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 }) // 深拷貝

3.視圖不更新情況三（異步更新隊(duì)列）

在最新的項(xiàng)目中我遇到了一個(gè)特別詭異的情況，就是數(shù)據(jù)第一次的獲取到了，也渲染了，但是第二次之后數(shù)據(jù)只有在再一次渲染頁(yè)面的時(shí)候更新，并不能實(shí)時(shí)更新

你渲染的數(shù)據(jù)是你上一次選擇的數(shù)據(jù)，并不是本次選擇的數(shù)據(jù)，俗稱“慢一拍”現(xiàn)在我們就來(lái)了解一下這個(gè)問(wèn)題

可能你還沒(méi)有注意到，Vue 異步執(zhí)行 DOM 更新。只要觀察到數(shù)據(jù)變化，Vue 將開(kāi)啟一個(gè)隊(duì)列，并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)改變。

如果同一個(gè) watcher 被多次觸發(fā)，只會(huì)被推入到隊(duì)列中一次。

這種在緩沖時(shí)去除重復(fù)數(shù)據(jù)對(duì)于避免不必要的計(jì)算和 DOM 操作上非常重要。

然后，在下一個(gè)的事件循環(huán)“tick”中，

Vue 刷新隊(duì)列并執(zhí)行實(shí)際 (已去重的) 工作。

Vue 在內(nèi)部嘗試對(duì)異步隊(duì)列使用原生的 Promise.then 和 MessageChannel，如果執(zhí)行環(huán)境不支持，會(huì)采用 setTimeout(fn, 0) 代替。

雖然 Vue.js 通常鼓勵(lì)開(kāi)發(fā)人員沿著“數(shù)據(jù)驅(qū)動(dòng)”的方式思考，避免直接接觸 DOM，但是有時(shí)我們確實(shí)要這么做。為了在數(shù)據(jù)變化之后等待 Vue 完成更新 DOM ，可以在數(shù)據(jù)變化之后立即使用 Vue.nextTick(callback) 。這樣回調(diào)函數(shù)在 DOM 更新完成后就會(huì)調(diào)用。例如：

因?yàn)?nbsp;$nextTick() 返回一個(gè) Promise 對(duì)象，所以你可以使用新的 ES2016 async/await語(yǔ)法完成相同的事情：

ES2016 async/await方法

此文出處

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論