>[success] # 簡單的了解虛擬DOM 1. vue 無論是模板通語法將模板轉換為`render`，或者直接使用`render`的形式也罷，其實都是為接下來轉換**虛擬DOM**做準備 2. 由普通的 JS 對象來描述 DOM 對象，因為不是真實的 DOM 對象，所以叫 `Virtual DOM`（虛擬DOM）,虛擬DOM 節點叫`VNode`(虛擬節點) >[danger] ##### 打印真實dom 1. 既然有了虛擬dom，那么真實dom是什么？把下面的代碼在瀏覽器中運行 ~~~ let div = document.createElement('div') let str = '' for (const key in div) { str += key + '' } console.log(str) ~~~ 2. 上面代碼運行后，可以發現輸出了**很多的屬性**，可以發現一個真正的 **DOM 元素是非常龐大**,這些對象屬性并不是**實際開發過程都會用上**的如果有一個用js表現的dom的結構，再將這個結構渲染會成為dom可以讓開發階段更關心數據 >[info] ## 虛擬dom 1. 手動操作DOM時代 ，即使有了jq幫助我們對dom做了簡化的操作，但隨著項目的復雜DOM操作也變得復雜起來 2. 后來也出現了一種產物模板方式進行dom操作，就例如**art-template**,但依舊不能解決跟蹤狀態變化 3. 隨著vue 這類數據發生變化視圖就要隨之更新，在更新視圖的時候難免要操作DOM,而操作真實DOM又是**非常耗費性能** 4. 想跟蹤變化，就需要進行比較，比較后知道哪里改變了，去改變對應位置思路就誕生了，**如果說維護兩個dom**，每次兩個dom進行比較，這原本一個dom就相對比較浪費，現在又用兩個，這個肯定不行，如果我們用**js形式記錄兩個數組**，每次比較兩個數組那個位置變化了，再去操作對應變化的局部的dom是不是會更好（兩個dom 比較不好的主要原因通過打印dom 屬性看到的數量上，這么多屬性每次都要最對比是個開銷，并且并不是每個屬性都用了） 5. **Virtual DOM**(虛擬dom) 的好處是當狀態改變時**不需要立即更新 DOM**，只需要創建一個虛擬樹來描述DOM， Virtual DOM 內部將弄清楚如何 **有效(diff)** 的更新 DOM >[danger] ##### 虛擬DOM能帶來的 1. 由于 Virtual DOM 是以 JavaScript 對象為基礎而不依賴真實平臺環境，不同的運行環境進行代碼轉換,所以使它具有了**跨平臺的能力**，比如說**SSR(Nuxt.js/Next.js)、原生應用(Weex/React Native)、小程序(mpvue/uni-app)** 2. 優化性能 。DOM 操作是**比較耗時**的，對于**大量、頻繁的 DOM 操作**，如果先在 JavaScript 中模擬進行，然后再通過計算比對，找到**真正需要更新的節點**，這樣就有可能減少**不必要**的 DOM 操作，從而提升渲染性能。但并不是所有的 DOM 操作**都能通過虛擬 DOM 提升性能**，比如**單次刪除某個節點**，直接操作 DOM肯定比虛擬 DOM 計算比對之后再刪除要快。總體而言，** 虛擬 DOM 提升了 DOM 操作的性能下限，降低了DOM 操作的性能上限**。 所以會看到一些對渲染性能要求比較高的場景，比如**在線文檔、表格編輯，還是會使用原生 DOM 操作**。 3. JavaScript 對象來表示 DOM 元素的方式，該對象僅包括常用的這些屬性方法和節點關系，這樣就可以大大降低對象內存、虛擬 DOM 差異對比的計算量等 >[danger] ##### vnode 1. **VNode是javascript對象**,VNode表示**Virtual DOM**(虛擬DOM)中的**虛擬節點** * js表現形式 ~~~ { sel: "div", data: {}, children: undefined, text: "Hello Virtual DOM", elm: undefined, key: undefined } ~~~ >[info] ## 總結 1. 要分清虛擬dom 和直接操作dom本質上的區別，在jq的時代需要開發既要**關心數據**，又要對對應的**dom進行操作**，例如新增數據的時候需要開發對所在**新增數據dom區域進行新增數據的dom創建并且插入**。那是否可以讓jq也變成只關心數據dom直接改變? * 這里提出一個假設將對應的數據要渲染的**js模板**寫好，當數據變化的時候整個該數據地方的dom全部重新渲染。這樣我們就**可以不再關心模板只要關心數據**,但相對的問題我們需要將數據重新大批量重新加載這些中有些數據其實**沒有變化應該不用刷新**,當然如果我們把這類情況考慮好自然就解決了這類問題 * 用js數據格式表現的數據結構成**為虛擬dom**，每次數據改變生成的新虛擬dom 結構和老的虛擬dom 結構進行比較哪里不一樣重新渲染哪里（**這是理想狀態下**）當然虛擬dom 開銷也不能忽略 ~~~ let heroes = [ { name: "劍圣", age: 80, offsetTop: 0, elmHeight: 20 }, { name: "盲僧", age: 30, offsetTop: 0, elmHeight: 20 }, { name: "暗夜獵手", age: 50, offsetTop: 0, elmHeight: 20 }, { name: "寒冰射手", age: 20, offsetTop: 0, elmHeight: 20 }, { name: "賞金獵人", age: 40, offsetTop: 0, elmHeight: 20 } ]; function render() { let html = ""; heroes.forEach(hero => { html += ` <li class="hero" style="opacity: 0; transform: translateX(0px) translateY(${ hero.offsetTop }px)"> <div> <span class="left">姓名：${hero.name}</span> <span class="left l30">年齡：${hero.age}</span> <span class="right close">x</span> </div> </li> `; }); $(".content > ul").html(html); $(".content > ul > li").each((index, li) => { heroes[index].elmHeight = $(li).height(); }); heroes = heroes.reduce((arr, hero) => { let last = arr[arr.length - 1]; hero.offsetTop = last ? last.elmHeight + last.offsetTop + 10 : 10; return arr.concat(hero); }, []); ~~~ [jq案例鏈接](https://codesandbox.io/s/jq-demo-5i7qp?file=/src/index.js:25-1034) [虛擬dom鏈接](https://codesandbox.io/s/snabbdom-demo-forked-8lsvb?file=/src/index.js:769-944) >[danger] ##### 文章參考來源 [本段內容來自拉勾前端高手進階](https://kaiwu.lagou.com/course/courseInfo.htm?courseId=180#/detail/pc?id=3190) [參考內容來源](https://github.com/lagoufed/vuejs-enhancement)