在vue 中

數(shù)據(jù)改變 -> 虛擬DOM（計算變更）-> 操作DOM -> 視圖更新

虛擬DOM： js執(zhí)行速度比較快

什么是虛擬DOM？

用JS模擬DOM結構

為什么需要虛擬DOM？

vue中 數(shù)據(jù)驅動視圖，需要用高效方法來控制DOM操作的次數(shù)

diff算法： 虛擬DOM的核心

patch函數(shù)

兩個使用場景：

首次渲染時，判斷第一個參數(shù)是否是一個真實dom元素，是的話就創(chuàng)建空vnode，并且關聯(lián)一個DOM元素，然后比較patch函數(shù)傳入的第一個參數(shù)和第二個參數(shù)是否是同一個vnode,如果是同一個vnode，那么就直接patchVnode做更新，如果是不同的vnode，那么就創(chuàng)建新的DOM元素，插入，并且把老的DOM元素刪除。

patchVnode函數(shù)：

updateChildren函數(shù)：

DOM Diff

對比兩個虛擬節(jié)點，找出他們的差異，然后對應到真實DOM節(jié)點 去打補丁（patch）的過程

目的：以最小的代價來去修改DOM

虛擬節(jié)點：將真實DOM用一個對象來表達出來。

defineProperty 和 Proxy的區(qū)別：

本質上有不同，所以使用上有所不同。

defineProperty 本質是給對象增加屬性用的，所以在修改數(shù)組長度，用索引設置數(shù)組的值，數(shù)組的push(),pop() 是無法觸發(fā)

defineProperty 中的set 的。所以Vue2中是使用自己定義的一些數(shù)組方法來實現(xiàn)的。

Proxy 沒有這個缺點。

Vue2 中不使用Proxy的原因是因為proxy是屬于ES6，當時考慮的是兼容性的問題。

Reflect 反射 內置對象 方法集合的容器

Reflect 的好處：

之前的好多方法都掛在Object上，就很混亂。

未來很多方法都會逐漸放在Reflect上，成為內置方法的容器，統(tǒng)一管理各種方法。

Reflect.has(obj,'a') // 函數(shù)式編程。

對比 'a' in obj

Object中的方法有些會直接拋出異常，需要包裹try catch

而Reflect中的方法一般都有返回值，失敗后會合理返回。

Proxy 中handler中的方法 和Reflect中的方法是一一對應的。

Reflect 是ES6中全局的內置對象。直接保存的靜態(tài)方法，不需要實例化，可以直接使用。

總結

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內容!    

最新評論