Vue中diff演算法詳解-有解無憂

首先帶大家了解一下虛擬DOM概念

一、虛擬DOM本質

虛擬DOM本質就是一個js物件，用來保存DOM關鍵資訊，

二、虛擬DOM概念

后綴名為 .vue檔案中的 template 里寫的標簽，都是模板，都會被vue處理成虛擬DOM物件來渲染顯示在瀏覽器(真實dom頁面)上，

記憶體中生成一樣的虛擬DOM結構
專案中的DOM屬性有很多個，我們無法很快知道什么屬性改變，比如在template中的標簽結構為：

<template>
    <div id='app'>
        <p class='app_p'>虛擬DOM</p>
    </div>
</template>

相當于

const virtualDom = {
        type:'div',
        attributes:[{id:'app'}],
        children:{
            type:'p',
            attributes:[{class:'app_p'}],
            text:'虛擬DOM'
        }
}

當進行vue的資料更新

生成新的虛擬DOM結構

和舊的虛擬DOM結構進行比較

利用diff演算法，找出不同，然后更新變化的部分重繪到頁面，也叫做打補丁，
重繪和回流的概念

回流(重排): 當瀏覽器必須重新處理和繪制部分或全部頁面時，回流就會發生，

重繪: 不影響布局, 只是標簽頁面發生變化, 重新繪制，

注意: 回流(重排)必引發重繪, 重繪不一定引發回流(重排)，

一、什么是diff演算法

diff演算法是一個Virtual DOM的加速器，其演算法的改進優化是React整個界面渲染的基礎和性能的保障，同時也是React原始碼中最神秘的，最不可思議的部分，vue中，diff演算法就是讓新虛擬dom, 和舊的虛擬dom相比較，

二、vue中diff演算法分析

vue中用diff就是通過同級比較dom樹，來進行重繪或者回流，分為三種情況：

根元素變了，洗掉重建整個DOM樹

舊虛擬DOM

<div id='app'>
    <p class='app_p'>虛擬DOM</p>
</div>

新虛擬DOM

<div id='app' >
    <span class='app_p'>虛擬DOM</span>
</div>

根元素沒變，屬性改變，更新屬性，元素復用

舊虛擬DOM

<div id='app'>
    <p class='app_p'>虛擬DOM</p>
</div>

新虛擬DOM

<div id='app' title='新虛擬DOM'>
    <p class='app_p'>虛擬DOM</p>
</div>

根元素和子元素都沒變，但元素里的內容改變

沒有設定key值
v-for 不會移動DOM，而是復用DOM元素，就地更新
```
<ul id="ul">
    <li v-for="item in arr">
        {{ item }} 
        <input type="text">
    </li>
</ul>
<button @click="addFn">新增一個</button>
```
```
export default {
    data(){
        return {
            arr: ["小黑", "小黃", "小白"]
        }
    },
    methods: {
        addFn(){
            this.arr.splice(1, 0, '小綠')
        }
    }
};
```
新虛擬DOM會對照舊虛擬DOM來更新，因為只是內容改變，而標簽并沒有變，所以從第二個標簽開始的內容會改變，再增加一個標簽更新新的資料對應新的視圖，

設有key值
因為新舊虛擬DOM對比，key存在就復用此標簽更新內容，如果不存在就直接創建一個新的
```
<ul id="ul">
    <li v-for="(item, index) in arr" :key="index">
        {{ item }} 
        <input type="text">
    </li>
</ul>
<button @click="addFn">新增一個</button>
```
```
export default {
    data(){
        return {
            arr: ["小黑", "小黃", "小白"]
        }
    },
    methods: {
        addFn(){
            this.arr.splice(1, 0, '小綠')
        }
    }
};
```
v-for先回圈產生新的DOM結構， key是連續的，和資料對應然后比較新舊DOM結構，找到區別，打補丁到頁面上最后補一個li，然后從第二個往后，都要更新內容，
key值只能是唯一不重復的，字串或數值，新DOM里資料的key存在, 去舊的虛擬DOM結構里找到key標記的標簽，復用標簽新DOM里資料的key存在，去舊的虛擬DOM結構里沒有找到key標簽的標簽，創建舊DOM結構的key，在新的DOM結構里沒有了，則移除key所在的標簽，不加key值不影響功能，添加key值可以提高更新性能，

總結：

根元素改變 – 洗掉當前DOM樹重新建
根元素未變, 屬性改變 – 更新屬性
根元素未變, 子元素/內容改變
無key – 就地更新 / 有key – 按key比較

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/333821.html

標籤：其他

上一篇：React中的一個狀態管理工具—Flux

下一篇：【面試利器】原生JS靈魂拷問，你能答上多少(三）