成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JS每日一題:Vue中的diff算法？

Caicloud / 2369人閱讀

摘要：，文本節(jié)點(diǎn)的比較，需要修改，則會(huì)調(diào)用。，新節(jié)點(diǎn)沒有子節(jié)點(diǎn)，老節(jié)點(diǎn)有子節(jié)點(diǎn)，直接刪除老節(jié)點(diǎn)。所以一句話，的作用主要是為了高效的更新虛擬。

20190125

Vue中的diff算法？

概念: diff算法是一種優(yōu)化手段，將前后兩個(gè)模塊進(jìn)行差異對(duì)比，修補(bǔ)(更新)差異的過程叫做patch(打補(bǔ)丁)

為什么vue,react這些框架中都會(huì)有diff算法呢? 我們都知道渲染真實(shí)dom的開銷是很大的，這個(gè)跟性能優(yōu)化中的重繪重排意義類似, 回到正題來, 有時(shí)候我們修改了頁面中的某個(gè)數(shù)據(jù)，如果直接渲染到真實(shí)DOM中會(huì)引起整棵數(shù)的重繪重排, 那么我們能不能只讓我們修改的數(shù)據(jù)映射到真實(shí)DOM, 做一個(gè)最少化重繪重排呢，說到這里你應(yīng)該對(duì)為什么使用diff算法有一個(gè)簡單的概念了

virtual DOM和真實(shí)DOM的區(qū)別

一句話概括吧，virtual DOM是將真實(shí)的DOM的數(shù)據(jù)抽取出來，以對(duì)象的形式模擬樹形結(jié)構(gòu), diff 算法比較的也是virtual DOM

代碼理解


    
JS每日一題




// 轉(zhuǎn)換成VNode 類似于下面這種

const Vnode = {
    tag: "div",
    children: [
        { tag: "p", text: "JS每日一題" }
    ]
};
diff 是如何比較的?
源碼太多了，就不貼了， 有興趣的可以自己看看  https://github.com/vuejs/vue/...

簡單的說就是新舊虛擬dom 的比較，如果有差異就以新的為準(zhǔn)，然后再插入的真實(shí)的dom中，重新渲染

特點(diǎn)

只會(huì)做同級(jí)比較，不做跨級(jí)比較

比較后幾種情況

if (oldVnode === vnode)，他們的引用一致，可以認(rèn)為沒有變化。

if(oldVnode.text !== null && vnode.text !== null && oldVnode.text !== vnode.text)，文本節(jié)點(diǎn)的比較，需要修改，則會(huì)調(diào)用Node.textContent = vnode.text。

if( oldCh && ch && oldCh !== ch ), 兩個(gè)節(jié)點(diǎn)都有子節(jié)點(diǎn)，而且它們不一樣，這樣我們會(huì)調(diào)用updateChildren函數(shù)比較子節(jié)點(diǎn)，這是diff的核心

else if (ch)，只有新的節(jié)點(diǎn)有子節(jié)點(diǎn)，調(diào)用createEle(vnode)，vnode.el已經(jīng)引用了老的dom節(jié)點(diǎn)，createEle函數(shù)會(huì)在老dom節(jié)點(diǎn)上添加子節(jié)點(diǎn)。

else if (oldCh)，新節(jié)點(diǎn)沒有子節(jié)點(diǎn)，老節(jié)點(diǎn)有子節(jié)點(diǎn)，直接刪除老節(jié)點(diǎn)。

key的作用

設(shè)置key和不設(shè)置key的區(qū)別：
不設(shè)key，newCh和oldCh只會(huì)進(jìn)行頭尾兩端的相互比較，設(shè)key后，除了頭尾兩端的比較外，還會(huì)從用key生成的對(duì)象oldKeyToIdx中查找匹配的節(jié)點(diǎn)，所以為節(jié)點(diǎn)設(shè)置key可以更高效的利用dom

如我們希望可以在B和C之間加一個(gè)F，Diff算法默認(rèn)執(zhí)行起來是這樣的：

即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很沒有效率？

所以我們需要使用key來給每個(gè)節(jié)點(diǎn)做一個(gè)唯一標(biāo)識(shí)，Diff算法就可以正確的識(shí)別此節(jié)點(diǎn)，找到正確的位置區(qū)插入新的節(jié)點(diǎn)。



所以一句話，key的作用主要是為了高效的更新虛擬DOM。另外vue中在使用相同標(biāo)簽名元素的過渡切換時(shí)，也會(huì)使用到key屬性，其目的也是為了讓vue可以區(qū)分它們，否則vue只會(huì)替換其內(nèi)部屬性而不會(huì)觸發(fā)過渡效果

總結(jié)

盡量不要跨層級(jí)的修改dom

在開發(fā)組件時(shí)，保持穩(wěn)定的 DOM 結(jié)構(gòu)會(huì)有助于性能的提升

設(shè)置key可以讓diff更高效

關(guān)于JS每日一題

JS每日一題可以看成是一個(gè)語音答題社區(qū)
每天利用碎片時(shí)間采用60秒內(nèi)的語音形式來完成當(dāng)天的考題
群主在次日0點(diǎn)推送當(dāng)天的參考答案

注 絕不僅限于完成當(dāng)天任務(wù)，更多是查漏補(bǔ)缺，學(xué)習(xí)群內(nèi)其它同學(xué)優(yōu)秀的答題思路

點(diǎn)擊加入答題

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/102200.html

相關(guān)文章

  • JS每日一題：簡述一下Vue.js的template編譯過程？

    摘要：問簡述一下的編譯過程先上一張圖大致看一下整個(gè)流程從上圖中我們可以看到是從后開始進(jìn)行中整體邏輯分為三個(gè)部分解析器將模板字符串轉(zhuǎn)換成優(yōu)化器對(duì)進(jìn)行靜態(tài)節(jié)點(diǎn)標(biāo)記，主要用來做虛擬的渲染優(yōu)化代碼生成器使用生成函數(shù)代碼字符串開始前先解釋一下抽象 20190215問 簡述一下Vue.js的template編譯過程？ 先上一張圖大致看一下整個(gè)流程showImg(https://image-static....

    NicolasHe 評(píng)論0 收藏0

  • JS每日一題：什么情況下適合使合vuex？Vuex使用中有幾個(gè)步驟？

    摘要：什么情況下適合使合使用中有幾個(gè)步驟開始之前先簡單了解一下定義是一個(gè)狀態(tài)管理機(jī)制采用集中式存儲(chǔ)應(yīng)用所有組件的狀態(tài)嗯，就是一句話能說明白的，沒明白的，我們用代碼再理解一下什么叫集中式式存儲(chǔ)比如下面這段代碼，同時(shí)需要用到，那么我們首先能想到就是在 20190121 什么情況下適合使合vuex？Vuex使用中有幾個(gè)步驟？ 開始之前先簡單了解一下vuex 定義: vuex是一個(gè)狀態(tài)管理機(jī)制,采用...

    wow_worktile 評(píng)論0 收藏0

  • JS每日一題: Vue中mixin怎么理解？

    摘要：兩個(gè)對(duì)象鍵名沖突時(shí)，取組件對(duì)象的鍵值對(duì)也使用同樣的策略進(jìn)行合并。代碼理解全局混合也可以全局注冊(cè)混合對(duì)象。注意使用一旦使用全局混合對(duì)象，將會(huì)影響到所有之后創(chuàng)建的實(shí)例為自定義的選項(xiàng)注入一個(gè)處理器。 20190122 Vue中mixin怎么理解？ mixin是為了讓可復(fù)用的功能靈活的混入到當(dāng)前組件中，混合的對(duì)象可以包含任意組件選項(xiàng)（生命周期，指令之類等等）, mixin翻譯過來叫混合,高級(jí)的...

    jubincn 評(píng)論0 收藏0

  • JS每日一題：Vue-router有哪些鉤子？使用場(chǎng)景？

    摘要：問有哪些鉤子使用場(chǎng)景的實(shí)現(xiàn)可以點(diǎn)這里前面我們用大白話講過什么是鉤子，這里在重復(fù)一下，就是在什么什么之前什么什么之后英文叫專業(yè)點(diǎn)叫生命周期，裝逼點(diǎn)可以叫守衛(wèi)中也存在鉤子的概念分為三步記憶全局守衛(wèi)路由獨(dú)享守衛(wèi)組件獨(dú)享守衛(wèi)全局守衛(wèi)很好理解，全 20190218問 Vue-router有哪些鉤子？使用場(chǎng)景？ router的實(shí)現(xiàn)可以點(diǎn)這里 前面我們用大白話講過什么是鉤子，這里在重復(fù)一下，就是在...

    張金寶 評(píng)論0 收藏0

  • JS每日一題:new Vue()中發(fā)生了什么？

    摘要：問中發(fā)生了什么先從語法上分析，關(guān)鍵字在語言中代表實(shí)例化一個(gè)對(duì)象而實(shí)際上是一個(gè)類我們簡單看一下源碼源碼地址從源碼可以看到類中非常干凈，只是執(zhí)行了一個(gè)私有函數(shù)并且只能通過關(guān)鍵字初始化接著我們追蹤至函數(shù)源碼地址從上面的代碼我們看見很清淅的 20190214問 new Vue()中發(fā)生了什么？ 先從語法上分析，new關(guān)鍵字在js語言中代表實(shí)例化一個(gè)對(duì)象, 而Vue實(shí)際上是一個(gè)類, 我們簡單看一...

    fobnn 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<