VUE溫習：內存泄漏、Vue.$set、key做用與虛擬diff算法

1、內存泄漏

一、指令綁定了事件，卻沒有解綁事件，容易產生內存泄漏。（曾經遇到過的案例）

二、v-if指令產生內存泄漏，好比v-if刪除了父級元素，卻沒有刪除父級元素裏的dom片斷

三、跳轉到別的路由，卻沒有刪除產生的dom片斷。須要在beforeDestroy()鉤子裏註銷三方插件，銷燬定時器等

2、Vue.$set

一、vue不能檢測到數組與對象的2種變化：數組長度變化，數組索引修改內容；對象屬性的添加與刪除。

二、Vue.$set(target,key,value)：能夠動態的給數組、對象添加和修改數據，並更新視圖中數據的顯示

三、vue在構造函數new Vue()時就經過Object.defineProperty中的getter和setter方法完成對數據的綁定，因此直接經過vm.arr[1] = ‘aa’的方法，沒法修改值去觸發vue中視圖的更新，必須還得經過Object.defineProperty的方法去改變，而Vue.$set()就封裝了js底層的Object.defineProperty方法

3、key做用與虛擬diff算法

一、虛擬diff算法假設：

（1）兩個相同的組件產生相似的dom結構，不一樣的組件產生不一樣的dom結構

（2）同一層級的一組節點能夠經過惟一id進行區分

　　當頁面的數據發生變化時，Diff算法只會比較同一層級的節點：

　　若是節點類型不一樣，直接幹掉前面的節點，再建立並插入新的節點，不會再比較這個節點之後的子節點了。

　　若是節點類型相同，則會從新設置該節點的屬性，從而實現節點的更新。

　　當某一層有不少相同的節點時，也就是列表節點時，Diff算法的更新過程默認狀況下也是遵循以上原則。因此咱們須要使用key來給每一個節點作一個惟一標識，Diff算法就能夠正確的識別此節點，找到正確的位置區插入新的節點。

二、因此key的做用就是高效的更新虛擬dom