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

創(chuàng)新互聯(lián)的客戶來自各行各業(yè)，為了共同目標(biāo)，我們在工作上密切配合，從創(chuàng)業(yè)型小企業(yè)到企事業(yè)單位，感謝他們對我們的要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。專業(yè)領(lǐng)域包括網(wǎng)站制作、網(wǎng)站設(shè)計、電商網(wǎng)站開發(fā)、微信營銷、系統(tǒng)平臺開發(fā)。

vue視圖為什么不渲染頁面的原因

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

劃重點?。。?！

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

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

1.視圖不更新情況一

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

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

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

filter(), concat(), slice() 。這些不會改變原始數(shù)組，但總是返回一個新數(shù)組。當(dāng)使用非變異方法時，可以用新數(shù)組替換舊數(shù)組

2.Vue 不能檢測以下變動的數(shù)組： 

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

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

2.視圖不更新情況二

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

解決辦法

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

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

當(dāng)前文章：vue視圖不更新情況詳解-創(chuàng)新互聯(lián)
標(biāo)題網(wǎng)址：http://weahome.cn/article/dpdoih.html