這篇文章在於總結前段時間對於Vue源碼的粗略學習,大體講述一個簡單的vue實例從建立到更新再到銷燬的過程。涉及Vue從html結構到ast對象;再從render函數到virtual dom;以及vue的核心Observer + dep + Watcher對象所構成的數據驅動視圖更新的邏輯;以及最後更新頁面所涉及的diff算法等等。Vue博大精深,小子由衷敬畏和仰慕。能力有限,各方面均是我的膚淺認知。記錄一些我的學習理解心得,有不當的地方請指正。
Observer在建立的時候,給傳入的對象進行封裝,返回一個包含value,dep(from new Dep()),__ob__等屬性的Ob實例。Ob對象對傳入的value進行深層次的改造,給value以及屬性中是對象或者數組的項進行改造,使他們能夠被觀測。對象執行defineReactive(下文解析);數組改寫部分原型方法,使他們能夠被觀測。html
export class Observer { value: any; dep: Dep; vmCount: number; // number of vms that have this object as root $data constructor (value: any) { this.value = value this.dep = new Dep() this.vmCount = 0 // 定義不可枚舉的屬性__ob__ def(value, '__ob__', this) // 給data添加__ob__屬性,返回observer對象 // root value是個對象,這個if針對屬性值 if (Array.isArray(value)) { // 原型鏈綁定到改造後的一些方法,是對象操做可被觀測 if (hasProto) { protoAugment(value, arrayMethods) } else { copyAugment(value, arrayMethods, arrayKeys) } this.observeArray(value) } else { this.walk(value) } } /** * Walk through all properties and convert them into * getter/setters. This method should only be called when * value type is Object. */ walk (obj: Object) { const keys = Object.keys(obj) for (let i = 0; i < keys.length; i++) { defineReactive(obj, keys[i]) } } /** * Observe a list of Array items. */ observeArray (items: Array<any>) { for (let i = 0, l = items.length; i < l; i++) { observe(items[i]) } } }
經過Object.defineProperty在被觀測對象的讀取和寫入過程當中執行一些操做,用來觸發視圖更新。
關鍵步驟有三點:
1.給每個被觀測的屬性或者對象利用閉包建立一個Dep對象供get或者set函數使用。
2.存在觀測對象的前提下(vm的render,update過程,以及compute,watch過程等等,在讀取屬性值的時候,執行dep.depend(大體做用就是將當前target的watcher對象存入dep.subs);
3.存在觀測對象的前提下,在寫入屬性值的時候,執行dep.notify(),這個方法的大體做用是在被觀測對象發生變化時,取出保存在dep.subs裏面的watcher對象,執行這些對象的update方法,去更新依賴。這個地方存在一個我的以爲很優秀的設計,是視圖的更新是調用nextTick函數而且隊列更新視圖。傳送門--Vue異步更新隊列大體做用是異步隊列更新視圖,達到性能以及效率上的提高。vue
/** * Define a reactive property on an Object. */ export function defineReactive ( obj: Object, key: string, val: any, customSetter?: ?Function, shallow?: boolean ) { const dep = new Dep() const property = Object.getOwnPropertyDescriptor(obj, key) if (property && property.configurable === false) { return } // cater for pre-defined getter/setters const getter = property && property.get const setter = property && property.set if ((!getter || setter) && arguments.length === 2) { val = obj[key] } let childOb = !shallow && observe(val) // 做爲props的子對象再也不ob, observe 返回ob對象 Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function reactiveGetter () { const value = getter ? getter.call(obj) : val if (Dep.target) { dep.depend() if (childOb) { childOb.dep.depend() if (Array.isArray(value)) { dependArray(value) } } } return value }, set: function reactiveSetter (newVal) { const value = getter ? getter.call(obj) : val /* eslint-disable no-self-compare */ if (newVal === value || (newVal !== newVal && value !== value)) { return } /* eslint-enable no-self-compare */ if (process.env.NODE_ENV !== 'production' && customSetter) { customSetter() } // #7981: for accessor properties without setter if (getter && !setter) return if (setter) { setter.call(obj, newVal) } else { val = newVal } childOb = !shallow && observe(newVal) dep.notify() // 通知更新this.subs.update } }) }
Dep對象做爲Obverser對象與Watcher對象的中介者,起到關聯兩個對象,統一把控變化的做用。
1.在被觀測屬性被讀取的時候,且是須要被觀測的(被觀測對象的操做,後文如無特殊說明,都在這個前提下,首先檢測當前的watcher對象是否在已經在當前dep對象的subs裏面,不在則添加。
2.notify,是在寫入觀測者對象以後,觸發視圖更新的操做。
3.Dep.target,全部dep對象公用一個target。保證同一時間只有一個目標對象在被計算。node
export default class Dep { static target: ?Watcher; id: number; subs: Array<Watcher>; constructor () { this.id = uid++ this.subs = [] } addSub (sub: Watcher) { this.subs.push(sub) // Watcher } removeSub (sub: Watcher) { remove(this.subs, sub) } depend () { if (Dep.target) { // target 爲Watcher對象 Dep.target.addDep(this) // this當前觀測者持有的dep對象 } } notify () { // stabilize the subscriber list first const subs = this.subs.slice() if (process.env.NODE_ENV !== 'production' && !config.async) { // subs aren't sorted in scheduler if not running async // we need to sort them now to make sure they fire in correct // order subs.sort((a, b) => a.id - b.id) } for (let i = 0, l = subs.length; i < l; i++) { subs[i].update() // watcher.update } } } // The current target watcher being evaluated. // This is globally unique because only one watcher // can be evaluated at a time. Dep.target = null const targetStack = [] export function pushTarget (target: ?Watcher) { targetStack.push(target) Dep.target = target } export function popTarget () { targetStack.pop() Dep.target = targetStack[targetStack.length - 1] }
addDep函數:addDep的做用是,保證在向dep對象添加wathcer的時候,一個depid在一輪觀測中只被添加一次。這個管控過程,在watcher裏面使用set對象維護。
update函數:用來隊列觸發視圖更新react
/** * A watcher parses an expression, collects dependencies, * and fires callback when the expression value changes. * This is used for both the $watch() api and directives. */ export default class Watcher { // 代碼過長,只展文中提到的部分 addDep (dep: Dep) { const id = dep.id if (!this.newDepIds.has(id)) { this.newDepIds.add(id) this.newDeps.push(dep) if (!this.depIds.has(id)) { dep.addSub(this) // this = > Watcher } } } /** * Subscriber interface. * Will be called when a dependency changes. */ update () { /* istanbul ignore else */ if (this.lazy) { this.dirty = true } else if (this.sync) { this.run() } else { queueWatcher(this) } } }
Vue經過數據變化驅動視圖更新,更新的本質是每次設置被觀測數據的值時,調用watcher.update方法,進行局部更新
1.使options.render生成一份新的vnode(新的vnode沒有對應的dom引用,是原始的數組結構)
2.經過vm對象獲取當前的vnode數組,做爲oldVnode,與vnode一塊兒執行函數patchVnode(oldVnode, vnode, insertedVnodeQueue /** [] */, null, null, removeOnly);
算法
patchVnode函數用來比較新舊vnode。大體過程以下
1.修改被觀測屬性的值,觸發dep.notify => watcher.update => vm._update => patchVnode
2.對新舊vnode進行比較,逐步更新屬性,事件等等
3.若是存在子節點,使用diff算法深度優先遍歷子節點。這個過程當中,若是存在props相關觀測屬性的讀取,就會將對應的component的watcher對象push到quene隊列中,等待當前的watcher更新完,再執行更新。這個過程是在patchVnode函數中,遇到component的子節點時,執行prePatch方法後添加的。express
function patchVnode ( oldVnode, vnode, insertedVnodeQueue, ownerArray, index, removeOnly ) { if (oldVnode === vnode) { return } if (isDef(vnode.elm) && isDef(ownerArray)) { // clone reused vnode vnode = ownerArray[index] = cloneVNode(vnode) } const elm = vnode.elm = oldVnode.elm if (isTrue(oldVnode.isAsyncPlaceholder)) { if (isDef(vnode.asyncFactory.resolved)) { hydrate(oldVnode.elm, vnode, insertedVnodeQueue) } else { vnode.isAsyncPlaceholder = true } return } // reuse element for static trees. // note we only do this if the vnode is cloned - // if the new node is not cloned it means the render functions have been // reset by the hot-reload-api and we need to do a proper re-render. if (isTrue(vnode.isStatic) && isTrue(oldVnode.isStatic) && vnode.key === oldVnode.key && (isTrue(vnode.isCloned) || isTrue(vnode.isOnce)) ) { vnode.componentInstance = oldVnode.componentInstance return } let i const data = vnode.data if (isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch)) { i(oldVnode, vnode) } const oldCh = oldVnode.children const ch = vnode.children if (isDef(data) && isPatchable(vnode)) { for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode) if (isDef(i = data.hook) && isDef(i = i.update)) i(oldVnode, vnode) } if (isUndef(vnode.text)) { if (isDef(oldCh) && isDef(ch)) { if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly) } else if (isDef(ch)) { if (process.env.NODE_ENV !== 'production') { checkDuplicateKeys(ch) } if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '') addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue) } else if (isDef(oldCh)) { removeVnodes(elm, oldCh, 0, oldCh.length - 1) } else if (isDef(oldVnode.text)) { nodeOps.setTextContent(elm, '') } } else if (oldVnode.text !== vnode.text) { nodeOps.setTextContent(elm, vnode.text) } if (isDef(data)) { if (isDef(i = data.hook) && isDef(i = i.postpatch)) i(oldVnode, vnode) } }
比較過程:oldCh,newCh
0.元素爲空
1.oldCh[start]與newCh[start]是同一個元素,比較更新,移動到下一組元素比對
2.不然,比較oldCh[end]與newCh[end],相同則比對更新,移動到前一對繼續比較
3.不然,比較oldCh[start]與newCh[end],相同則比較更新,並將oldCh[start]移動到最右邊
4.不然,比較oldCh[end]與newCh[start],相同則比較更新,並將oldCh[end]移動到最左邊
5.若是以上條件都不成立,則進行key值索引操做,首先給lodch創建key值map對象索引;再根據新的vnode是否有key值進行索引查找,有key值則查找map,結果會返回index或者undefined;沒有key值則須要進行節點比對,找出是否存在同樣節點;若是匹配到相同的節點,則進行比較更新,並移動到對應的位置。若是沒有,則建立一個新的節點並插入對應的位置。
6.最後,將多的老節點刪除,或者將多的新節點插入到尾部。
以上,就是大體的邏輯。
其中,有三點須要注意的地方就是:
1.創建key值,能夠最大限度的複用節點並加快索引(有key值會優先匹配key值相同的節點)
2.vue會給靜態節點創建特殊的key值,以達到提高更新效率的目的。
3.diff中的sameVnode方法,是一個弱比較,好比。兩個div,內部元素不一樣,在某種狀況下,也會認爲是相同的vnode,好比以下的狀況:api
<div id="test"> <div v-if="show"> <div class="a"> <a :href="url"></a> <h1>靜態文本</h1> </div> <div class='b'> 這是一個文本節點{{url}} </div> </div> <div v-else> <div class='b'> 這是一個文本節點{{url}} </div> <div class="a"> <a :href="url"></a> <h1>靜態文本</h1> </div> </div> </div>
在diff過程當中,會將第一個的a,和第二個的b視爲相同的vnode,並進行比較。最後差很少整個替換了一遍。能夠看出,這樣的效率並不高,咱們但願的是,a與a比較,b與b比較。這種狀況,咱們能夠人爲的添加key值,去優化diff過程。數組
// diff過程 function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) { let oldStartIdx = 0 let newStartIdx = 0 let oldEndIdx = oldCh.length - 1 let oldStartVnode = oldCh[0] let oldEndVnode = oldCh[oldEndIdx] let newEndIdx = newCh.length - 1 let newStartVnode = newCh[0] let newEndVnode = newCh[newEndIdx] let oldKeyToIdx, idxInOld, vnodeToMove, refElm // removeOnly is a special flag used only by <transition-group> // to ensure removed elements stay in correct relative positions // during leaving transitions const canMove = !removeOnly if (process.env.NODE_ENV !== 'production') { checkDuplicateKeys(newCh) } while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) { if (isUndef(oldStartVnode)) { oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left } else if (isUndef(oldEndVnode)) { oldEndVnode = oldCh[--oldEndIdx] } else if (sameVnode(oldStartVnode, newStartVnode)) { patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx) oldStartVnode = oldCh[++oldStartIdx] newStartVnode = newCh[++newStartIdx] } else if (sameVnode(oldEndVnode, newEndVnode)) { patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx) oldEndVnode = oldCh[--oldEndIdx] newEndVnode = newCh[--newEndIdx] } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx) canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm)) oldStartVnode = oldCh[++oldStartIdx] newEndVnode = newCh[--newEndIdx] } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx) canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm) oldEndVnode = oldCh[--oldEndIdx] newStartVnode = newCh[++newStartIdx] } else { if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx) idxInOld = isDef(newStartVnode.key) ? oldKeyToIdx[newStartVnode.key] : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx) if (isUndef(idxInOld)) { // New element createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx) } else { vnodeToMove = oldCh[idxInOld] if (sameVnode(vnodeToMove, newStartVnode)) { patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx) oldCh[idxInOld] = undefined canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm) } else { // same key but different element. treat as new element createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx) } } newStartVnode = newCh[++newStartIdx] } } if (oldStartIdx > oldEndIdx) { refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue) } else if (newStartIdx > newEndIdx) { removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx) } }
以上,all,感謝。