[TOC] >PS：個人筆記，僅供參考，需要深入了解請閱讀參考資料。 # 參考資料 [https://ustbhuangyi.github.io/vue-analysis/prepare/directory.html#sfc](https://ustbhuangyi.github.io/vue-analysis/prepare/directory.html#sfc) # 組件化 所謂組件化，就是把頁面拆分成多個組件 (component)，每個組件依賴的 CSS、JavaScript、模板、圖片等資源放在一起開發和維護。組件是資源獨立的，組件在系統內部可復用，組件和組件之間可以嵌套。 接下來我們會用 Vue-cli 初始化的代碼為例，來分析一下 Vue 組件初始化的一個過程。 ```js import Vue from 'vue' import App from './App.vue' var app = new Vue({ el: '#app', // 這里的 h 是 createElement 方法 render: h => h(App) }) ``` 它和我們上一章相同的點也是通過`render`函數去渲染的，不同的這次通過`createElement`傳的參數是一個組件而不是一個原生的標簽，那么接下來我們就開始分析這一過程。 ## createComponent 上一章我們在分析`createElement`的實現的時候，它最終會調用`_createElement`方法，其中有一段邏輯是對參數`tag`的判斷，如果是一個普通的 html 標簽，像上一章的例子那樣是一個普通的 div，則會實例化一個普通 VNode 節點，否則通過`createComponent`方法創建一個組件 VNode。 ```js if (typeof tag === 'string') { let Ctor ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag) if (config.isReservedTag(tag)) { // platform built-in elements vnode = new VNode( config.parsePlatformTagName(tag), data, children, undefined, undefined, context ) } else if (isDef(Ctor = resolveAsset(context.$options, 'components', tag))) { // component vnode = createComponent(Ctor, data, context, children, tag) } else { // unknown or unlisted namespaced elements // check at runtime because it may get assigned a namespace when its // parent normalizes children vnode = new VNode( tag, data, children, undefined, undefined, context ) } } else { // direct component options / constructor vnode = createComponent(tag, data, context, children) } ``` 在我們這一章傳入的是一個 App 對象，它本質上是一個`Component`類型，那么它會走到上述代碼的 else 邏輯，直接通過`createComponent`方法來創建`vnode`。所以接下來我們來看一下`createComponent`方法的實現，它定義在`src/core/vdom/create-component.js`文件中： ```js export function createComponent ( Ctor: Class<Component> | Function | Object | void, data: ?VNodeData, context: Component, children: ?Array<VNode>, tag?: string ): VNode | Array<VNode> | void { if (isUndef(Ctor)) { return } const baseCtor = context.$options._base // plain options object: turn it into a constructor if (isObject(Ctor)) { Ctor = baseCtor.extend(Ctor) } // if at this stage it's not a constructor or an async component factory, // reject. if (typeof Ctor !== 'function') { if (process.env.NODE_ENV !== 'production') { warn(`Invalid Component definition: ${String(Ctor)}`, context) } return } // async component let asyncFactory if (isUndef(Ctor.cid)) { asyncFactory = Ctor Ctor = resolveAsyncComponent(asyncFactory, baseCtor, context) if (Ctor === undefined) { // return a placeholder node for async component, which is rendered // as a comment node but preserves all the raw information for the node. // the information will be used for async server-rendering and hydration. return createAsyncPlaceholder( asyncFactory, data, context, children, tag ) } } data = data || {} // resolve constructor options in case global mixins are applied after // component constructor creation resolveConstructorOptions(Ctor) // transform component v-model data into props & events if (isDef(data.model)) { transformModel(Ctor.options, data) } // extract props const propsData = extractPropsFromVNodeData(data, Ctor, tag) // functional component if (isTrue(Ctor.options.functional)) { return createFunctionalComponent(Ctor, propsData, data, context, children) } // extract listeners, since these needs to be treated as // child component listeners instead of DOM listeners const listeners = data.on // replace with listeners with .native modifier // so it gets processed during parent component patch. data.on = data.nativeOn if (isTrue(Ctor.options.abstract)) { // abstract components do not keep anything // other than props & listeners & slot // work around flow const slot = data.slot data = {} if (slot) { data.slot = slot } } // install component management hooks onto the placeholder node installComponentHooks(data) // return a placeholder vnode const name = Ctor.options.name || tag const vnode = new VNode( `vue-component-${Ctor.cid}${name ? `-${name}` : ''}`, data, undefined, undefined, undefined, context, { Ctor, propsData, listeners, tag, children }, asyncFactory ) // Weex specific: invoke recycle-list optimized @render function for // extracting cell-slot template. // https://github.com/Hanks10100/weex-native-directive/tree/master/component /* istanbul ignore if */ if (__WEEX__ && isRecyclableComponent(vnode)) { return renderRecyclableComponentTemplate(vnode) } return vnode } ``` 組件渲染主要有 3 個關鍵步驟：構造子類構造函數，安裝組件鉤子函數和實例化`vnode`。 ## 生命周期 每個 Vue 實例在被創建之前都要經過一系列的初始化過程。例如需要設置數據監聽、編譯模板、掛載實例到 DOM、在數據變化時更新 DOM 等。同時在這個過程中也會運行一些叫做生命周期鉤子的函數，給予用戶機會在一些特定的場景下添加他們自己的代碼。 從源碼的角度來看一下這些生命周期的鉤子函數是如何被執行的。 源碼中最終執行生命周期的函數都是調用`callHook`方法，它的定義在`src/core/instance/lifecycle`中： ```js export function callHook (vm: Component, hook: string) { // #7573 disable dep collection when invoking lifecycle hooks pushTarget() const handlers = vm.$options[hook] if (handlers) { for (let i = 0, j = handlers.length; i < j; i++) { try { handlers[i].call(vm) } catch (e) { handleError(e, vm, `${hook} hook`) } } } if (vm._hasHookEvent) { vm.$emit('hook:' + hook) } popTarget() } ``` `callHook`函數的邏輯很簡單，根據傳入的字符串`hook`，去拿到`vm.$options[hook]`對應的回調函數數組，然后遍歷執行，執行的時候把`vm`作為函數執行的上下文。 各個階段的生命周期的函數被合并到`vm.$options`里，并且是一個數組。因此`callhook`函數的功能就是調用某個生命周期鉤子注冊的所有回調函數。 ## 組件更新 組件的更新還是調用了`vm._update`方法（與初始化走類似的流程），我們再回顧一下這個方法，它的定義在`src/core/instance/lifecycle.js`中： ```js Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) { const vm: Component = this // ... const prevVnode = vm._vnode if (!prevVnode) { // initial render vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */) } else { // updates vm.$el = vm.__patch__(prevVnode, vnode) } // ... } ``` 組件更新的過程，會執行`vm.$el = vm.__patch__(prevVnode, vnode)`，它仍然會調用`patch`函數，在`src/core/vdom/patch.js`中定義： ```js return function patch (oldVnode, vnode, hydrating, removeOnly) { if (isUndef(vnode)) { if (isDef(oldVnode)) invokeDestroyHook(oldVnode) return } let isInitialPatch = false const insertedVnodeQueue = [] if (isUndef(oldVnode)) { // empty mount (likely as component), create new root element isInitialPatch = true createElm(vnode, insertedVnodeQueue) } else { const isRealElement = isDef(oldVnode.nodeType) if (!isRealElement && sameVnode(oldVnode, vnode)) { // patch existing root node patchVnode(oldVnode, vnode, insertedVnodeQueue, removeOnly) } else { if (isRealElement) { // ... } // replacing existing element const oldElm = oldVnode.elm const parentElm = nodeOps.parentNode(oldElm) // create new node createElm( vnode, insertedVnodeQueue, // extremely rare edge case: do not insert if old element is in a // leaving transition. Only happens when combining transition + // keep-alive + HOCs. (#4590) oldElm._leaveCb ? null : parentElm, nodeOps.nextSibling(oldElm) ) // update parent placeholder node element, recursively if (isDef(vnode.parent)) { let ancestor = vnode.parent const patchable = isPatchable(vnode) while (ancestor) { for (let i = 0; i < cbs.destroy.length; ++i) { cbs.destroy[i](ancestor) } ancestor.elm = vnode.elm if (patchable) { for (let i = 0; i < cbs.create.length; ++i) { cbs.create[i](emptyNode, ancestor) } // #6513 // invoke insert hooks that may have been merged by create hooks. // e.g. for directives that uses the "inserted" hook. const insert = ancestor.data.hook.insert if (insert.merged) { // start at index 1 to avoid re-invoking component mounted hook for (let i = 1; i < insert.fns.length; i++) { insert.fns[i]() } } } else { registerRef(ancestor) } ancestor = ancestor.parent } } // destroy old node if (isDef(parentElm)) { removeVnodes(parentElm, [oldVnode], 0, 0) } else if (isDef(oldVnode.tag)) { invokeDestroyHook(oldVnode) } } } invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch) return vnode.elm } ``` 這里執行`patch`的邏輯和首次渲染是不一樣的，因為`oldVnode`不為空，并且它和`vnode`都是 VNode 類型，接下來會通過`sameVNode(oldVnode, vnode)`判斷它們是否是相同的 VNode 來決定走不同的更新邏輯： ```js function sameVnode (a, b) { return ( a.key === b.key && ( ( a.tag === b.tag && a.isComment === b.isComment && isDef(a.data) === isDef(b.data) && sameInputType(a, b) ) || ( isTrue(a.isAsyncPlaceholder) && a.asyncFactory === b.asyncFactory && isUndef(b.asyncFactory.error) ) ) ) } ``` `sameVnode`的邏輯非常簡單，如果兩個`vnode`的`key`不相等，則是不同的；否則繼續判斷對于同步組件，則判斷`isComment`、`data`、`input`類型等是否相同，對于異步組件，則判斷`asyncFactory`是否相同。 所以根據新舊`vnode`是否為`sameVnode`，會走到不同的更新邏輯，我們先來說一下不同的情況。 ### 新舊節點不同 如果新舊`vnode`不同，那么更新的邏輯非常簡單，它本質上是要替換已存在的節點，大致分為 3 步 - 創建新節點 - 更新父的占位符節點 - 刪除舊節點 ### 新舊節點相同 如果新舊節點相同，會調用`patchVNode`方法，它的定義在`src/core/vdom/patch.js`中： ```js function patchVnode (oldVnode, vnode, insertedVnodeQueue, removeOnly) { if (oldVnode === vnode) { return } 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 (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) } } ```