資訊專欄INFORMATION COLUMN
摘要：，文本節點的比較，需要修改，則會調用。，新節點沒有子節點，老節點有子節點，直接刪除老節點。所以一句話，的作用主要是為了高效的更新虛擬。
20190125
Vue中的diff算法？
概念: diff算法是一種優化手段，將前后兩個模塊進行差異對比，修補(更新)差異的過程叫做patch(打補丁)
為什么vue,react這些框架中都會有diff算法呢? 我們都知道渲染真實dom的開銷是很大的，這個跟性能優化中的重繪重排意義類似, 回到正題來, 有時候我們修改了頁面中的某個數據，如果直接渲染到真實DOM中會引起整棵數的重繪重排, 那么我們能不能只讓我們修改的數據映射到真實DOM, 做一個最少化重繪重排呢，說到這里你應該對為什么使用diff算法有一個簡單的概念了
一句話概括吧，virtual DOM是將真實的DOM的數據抽取出來，以對象的形式模擬樹形結構, diff 算法比較的也是virtual DOM
代碼理解
// 轉換成VNode 類似于下面這種 const Vnode = { tag: "div", children: [ { tag: "p", text: "JS每日一題" } ] };JS每日一題
源碼太多了，就不貼了， 有興趣的可以自己看看 https://github.com/vuejs/vue/...
簡單的說就是新舊虛擬dom 的比較，如果有差異就以新的為準，然后再插入的真實的dom中，重新渲染
特點
只會做同級比較，不做跨級比較
比較后幾種情況
if (oldVnode === vnode)，他們的引用一致，可以認為沒有變化。
if(oldVnode.text !== null && vnode.text !== null && oldVnode.text !== vnode.text)，文本節點的比較，需要修改，則會調用Node.textContent = vnode.text。
if( oldCh && ch && oldCh !== ch ), 兩個節點都有子節點，而且它們不一樣，這樣我們會調用updateChildren函數比較子節點，這是diff的核心
else if (ch)，只有新的節點有子節點，調用createEle(vnode)，vnode.el已經引用了老的dom節點，createEle函數會在老dom節點上添加子節點。
else if (oldCh)，新節點沒有子節點，老節點有子節點，直接刪除老節點。
設置key和不設置key的區別：
不設key，newCh和oldCh只會進行頭尾兩端的相互比較，設key后，除了頭尾兩端的比較外，還會從用key生成的對象oldKeyToIdx中查找匹配的節點，所以為節點設置key可以更高效的利用dom
如我們希望可以在B和C之間加一個F，Diff算法默認執行起來是這樣的：
即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很沒有效率？
所以我們需要使用key來給每個節點做一個唯一標識，Diff算法就可以正確的識別此節點，找到正確的位置區插入新的節點。
所以一句話，key的作用主要是為了高效的更新虛擬DOM。另外vue中在使用相同標簽名元素的過渡切換時，也會使用到key屬性，其目的也是為了讓vue可以區分它們，否則vue只會替換其內部屬性而不會觸發過渡效果
盡量不要跨層級的修改dom
在開發組件時，保持穩定的 DOM 結構會有助于性能的提升
設置key可以讓diff更高效
關于JS每日一題JS每日一題可以看成是一個語音答題社區
每天利用碎片時間采用60秒內的語音形式來完成當天的考題
群主在次日0點推送當天的參考答案
注 絕不僅限于完成當天任務，更多是查漏補缺，學習群內其它同學優秀的答題思路
點擊加入答題
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102200.html
摘要：問簡述一下的編譯過程先上一張圖大致看一下整個流程從上圖中我們可以看到是從后開始進行中整體邏輯分為三個部分解析器將模板字符串轉換成優化器對進行靜態節點標記，主要用來做虛擬的渲染優化代碼生成器使用生成函數代碼字符串開始前先解釋一下抽象 20190215問 簡述一下Vue.js的template編譯過程？ 先上一張圖大致看一下整個流程showImg(https://image-static....
摘要：什么情況下適合使合使用中有幾個步驟開始之前先簡單了解一下定義是一個狀態管理機制采用集中式存儲應用所有組件的狀態嗯，就是一句話能說明白的，沒明白的，我們用代碼再理解一下什么叫集中式式存儲比如下面這段代碼，同時需要用到，那么我們首先能想到就是在 20190121 什么情況下適合使合vuex？Vuex使用中有幾個步驟？ 開始之前先簡單了解一下vuex 定義: vuex是一個狀態管理機制,采用...
摘要：兩個對象鍵名沖突時，取組件對象的鍵值對也使用同樣的策略進行合并。代碼理解全局混合也可以全局注冊混合對象。注意使用一旦使用全局混合對象，將會影響到所有之后創建的實例為自定義的選項注入一個處理器。 20190122 Vue中mixin怎么理解？ mixin是為了讓可復用的功能靈活的混入到當前組件中，混合的對象可以包含任意組件選項（生命周期，指令之類等等）, mixin翻譯過來叫混合,高級的...
摘要：問有哪些鉤子使用場景的實現可以點這里前面我們用大白話講過什么是鉤子，這里在重復一下，就是在什么什么之前什么什么之后英文叫專業點叫生命周期，裝逼點可以叫守衛中也存在鉤子的概念分為三步記憶全局守衛路由獨享守衛組件獨享守衛全局守衛很好理解，全 20190218問 Vue-router有哪些鉤子？使用場景？ router的實現可以點這里 前面我們用大白話講過什么是鉤子，這里在重復一下，就是在...
摘要：問中發生了什么先從語法上分析，關鍵字在語言中代表實例化一個對象而實際上是一個類我們簡單看一下源碼源碼地址從源碼可以看到類中非常干凈，只是執行了一個私有函數并且只能通過關鍵字初始化接著我們追蹤至函數源碼地址從上面的代碼我們看見很清淅的 20190214問 new Vue()中發生了什么？ 先從語法上分析，new關鍵字在js語言中代表實例化一個對象, 而Vue實際上是一個類, 我們簡單看一...
閱讀 3156·2021-11-22 09:34
閱讀 2797·2021-09-22 15:28
閱讀 816·2021-09-10 10:51
閱讀 1853·2019-08-30 14:22
閱讀 2273·2019-08-30 14:17
閱讀 2734·2019-08-30 11:01
閱讀 2295·2019-08-29 17:19
閱讀 3653·2019-08-29 13:17
