Vue的虛擬DOM和diff算法你了解嗎
在vue 中
數(shù)據(jù)改變 -> 虛擬DOM（計算變更）-> 操作DOM -> 視圖更新
虛擬DOM： js執(zhí)行速度比較快
什么是虛擬DOM？
用JS模擬DOM結(jié)構(gòu)
為什么需要虛擬DOM？
vue中 數(shù)據(jù)驅(qū)動視圖，需要用高效方法來控制DOM操作的次數(shù)
diff算法： 虛擬DOM的核心
patch函數(shù)
兩個使用場景：
首次渲染時，判斷第一個參數(shù)是否是一個真實dom元素，是的話就創(chuàng)建空vnode，并且關(guān)聯(lián)一個DOM元素，然后比較patch函數(shù)傳入的第一個參數(shù)和第二個參數(shù)是否是同一個vnode,如果是同一個vnode，那么就直接patchVnode做更新，如果是不同的vnode，那么就創(chuàng)建新的DOM元素，插入，并且把老的DOM元素刪除。
patchVnode函數(shù)：
updateChildren函數(shù)：
DOM Diff
對比兩個虛擬節(jié)點，找出他們的差異，然后對應(yīng)到真實DOM節(jié)點 去打補?。╬atch）的過程
目的：以最小的代價來去修改DOM
虛擬節(jié)點：將真實DOM用一個對象來表達(dá)出來。
defineProperty 和 Proxy的區(qū)別：
本質(zhì)上有不同，所以使用上有所不同。
defineProperty 本質(zhì)是給對象增加屬性用的，所以在修改數(shù)組長度，用索引設(shè)置數(shù)組的值，數(shù)組的push(),pop() 是無法觸發(fā)
defineProperty 中的set 的。所以Vue2中是使用自己定義的一些數(shù)組方法來實現(xiàn)的。
Proxy 沒有這個缺點。
Vue2 中不使用Proxy的原因是因為proxy是屬于ES6，當(dāng)時考慮的是兼容性的問題。
Reflect 反射 內(nèi)置對象 方法集合的容器
Reflect 的好處：
之前的好多方法都掛在Object上，就很混亂。
未來很多方法都會逐漸放在Reflect上，成為內(nèi)置方法的容器，統(tǒng)一管理各種方法。
Reflect.has(obj,'a') // 函數(shù)式編程。
對比 'a' in obj
Object中的方法有些會直接拋出異常，需要包裹try catch
而Reflect中的方法一般都有返回值，失敗后會合理返回。
Proxy 中handler中的方法 和Reflect中的方法是一一對應(yīng)的。
Reflect 是ES6中全局的內(nèi)置對象。直接保存的靜態(tài)方法，不需要實例化，可以直接使用。
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
這篇文章主要介紹了vue.js使用watch監(jiān)聽路由變化的方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-07
Element實現(xiàn)表格嵌套、多個表格共用一個表頭的方法
這篇文章主要介紹了Element實現(xiàn)表格嵌套、多個表格共用一個表頭的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)文本展開收起功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
vue中的雙向數(shù)據(jù)綁定原理與常見操作技巧詳解
這篇文章主要介紹了vue中的雙向數(shù)據(jù)綁定原理與常見操作技巧,結(jié)合實例形式詳細(xì)分析了vue中雙向數(shù)據(jù)綁定的概念、原理、常見操作技巧與相關(guān)注意事項,需要的朋友可以參考下2020-03-03
Vue中ElementUI分頁組件Pagination的使用方法
這篇文章主要為大家詳細(xì)介紹了Vue中ElementUI分頁組件Pagination的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要介紹了Vue 表情包輸入組件的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
Vue+SpringBoot實現(xiàn)支付寶沙箱支付的示例代碼
本文主要介紹了Vue+SpringBoot實現(xiàn)支付寶沙箱支付的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06
這篇文章主要介紹了Vue.js劃分組件的方法,需要的朋友可以參考下2017-10-10
axios發(fā)送post請求,提交圖片類型表單數(shù)據(jù)方法
下面小編就為大家分享一篇axios發(fā)送post請求,提交圖片類型表單數(shù)據(jù)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)目錄樹結(jié)構(gòu)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03