Vue 性能優化track-by

Vue 是一個MVVM框架

所謂mvvm就是model-->view,view-->model。 vue幫助我們實現了自動綁定。省點我們用JQUERY,zpeto 去操作dom的麻煩。

主要是Object.defineProperty 給object添加get set 訪問器來實現值變化的監聽。

但是由於es5的限制,有很多不能達到監聽值的目點。比如:

1.數組的各個方法，來改變數組

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

2.純數組 [1,2,3,4,5,6] 這樣的也不能監聽到值的變化

3.對象：動態添加對象的屬性等

這些都不能監聽到，不過vue都處理過了，什么$set ,$delete,$remove等等。 es6 瀏覽器出現了 Object.observe ,Array.observe. 不過兼容性問題也很頭疼，可能在以后的各個MVVM框架都會改版吧.

利用Object.freeze() 方法可以阻止vue 給添加get set訪問器。 這樣能提高性能，但同時也放棄了監聽的功能

列表渲染

用v-for 進行列表渲染。這是一個最基本最重要的功能。vue 在設計時為了性能（不能每次一個list更改就要全量的創建dom）,提供了track-by特性,用來復用dom和原來的作用域。

<div v-for="item in list">
     {{item}}
   </div>

 

默認情況下，只要

this.list=[1,2,3,4,5]

 

就會全部重新渲染。

不用：track-by

不復用也是復用的一種方式

1.在不用track-by 的情況,在遍歷數組的時候會給每一個對象 添加一個v-for id，這個東西是要用來在再次渲染的時候用的。所以如果數組中哪個對象，用了Object.freeze。那么它就生成不了這個對象。在第一次之后的任何一次渲染都會失敗。這種情況下需要添加track-by,來通知vue 應該怎樣去復用

2.在數組數據重復時,在渲染時無法決定如何復用。這時需要添加track-by="$index",來處理。

用：track-by

但是，如果每個對象都有一個唯一 ID 的屬性，便可以使用 track-by 特性給 Vue.js 一個提示，Vue.js 因而能盡可能地復用已有實例。

例如，假定數據為：

{
  items: [
    { _uid: '88f869d', ... },
    { _uid: '7496c10', ... }
  ]
}

然后可以這樣給出提示：

<div v-for="item in items" track-by="_uid">
  <!-- content -->
</div>

然后在替換數組 items 時，如果 Vue.js 遇到一個包含 _uid: '88f869d' 的新對象，它知道它可以復用這個已有對象的作用域與 DOM 元素。

在這個渲染過程中,在新的items的_uid在 索引 10 處。老的items此_uid 在20處，就會發生dom片段移動。 

如果值發生變化就更新值,（只涉及到綁定的屬性，沒有綁定的屬性，即使改變了也不會渲染，因為沒必要。。）

track-by="$index"

如果沒有唯一的鍵供追蹤，可以使用 track-by="$index"，它強制讓 v-for 進入原位更新模式：片斷不會被移動，而是簡單地以對應索引的新值刷新。這種模式也能處理數據數組中重復的值。

這讓數據替換非常高效，但是也會付出一定的代價。因為這時 DOM 節點不再映射數組元素順序的改變，不能同步臨時狀態（比如 <input> 元素的值）以及組件的私有狀態。因此，如果 v-for 塊包含 <input> 元素或子組件，要小心使用 track-by="$index"

 

按照新的數組來遍歷，第幾個就是拿老的對應index的dom過來渲染，如果值變化就更新值.沒變化就算了。 多余的dom 刪除。