Vue原始碼簡析之檢視生成(上)
new Vue({ el: '#app', template: '<div>{{msg}}</div>', data: { msg: 'hello vue' } }) 複製程式碼
最終會生成 <div>hello vue</div>
的檢視,下面來分析一下流程。
new Vue()
function Vue (options) { if (process.env.NODE_ENV !== 'production' && !(this instanceof Vue) ) { warn('Vue is a constructor and should be called with the `new` keyword') } this._init(options) } 複製程式碼
_init
// core/instance/inti.js Vue.prototype._init = function (options?: Object) { const vm: Component = this // a uid vm._uid = uid++ .... ... // a flag to avoid this being observed vm._isVue = true // merge options if (options && options._isComponent) { // optimize internal component instantiation // since dynamic options merging is pretty slow, and none of the // internal component options needs special treatment. initInternalComponent(vm, options) } else { vm.$options = mergeOptions( resolveConstructorOptions(vm.constructor), options || {}, vm ) } /* istanbul ignore else */ if (process.env.NODE_ENV !== 'production') { initProxy(vm) } else { vm._renderProxy = vm } // expose real self vm._self = vm initLifecycle(vm) initEvents(vm) initRender(vm) callHook(vm, 'beforeCreate') initInjections(vm) // resolve injections before data/props initState(vm) initProvide(vm) // resolve provide after data/props callHook(vm, 'created') /* istanbul ignore if */ if (process.env.NODE_ENV !== 'production' && config.performance && mark) { vm._name = formatComponentName(vm, false) mark(endTag) measure(`vue ${vm._name} init`, startTag, endTag) } if (vm.$options.el) { vm.$mount(vm.$options.el) } } 複製程式碼
new Vue()的時候會執行_init方法,做一些初始化工作後執行vm.$mount,在這之前會判斷有沒有el屬性,沒有的話需要手動呼叫。就像這樣:
new Vue({ template: '<div>{{msg}}</div>', data: { msg: 'hello vue' } }).$mount('#app') 複製程式碼
$mount
// platforms/web/entry-runtime-with-compilers.js const mount = Vue.prototype.$mount// 快取$mount方法 Vue.prototype.$mount = function ( el?: string | Element, hydrating?: boolean ): Component { el = el && query(el) ... ... const options = this.$options // resolve template/el and convert to render function if (!options.render) { let template = options.template if (template) { if (typeof template === 'string') { if (template.charAt(0) === '#') { template = idToTemplate(template) /* istanbul ignore if */ if (process.env.NODE_ENV !== 'production' && !template) { warn( `Template element not found or is empty: ${options.template}`, this ) } } } else if (template.nodeType) { template = template.innerHTML } else { if (process.env.NODE_ENV !== 'production') { warn('invalid template option:' + template, this) } return this } } else if (el) { template = getOuterHTML(el) } if (template) { /* istanbul ignore if */ if (process.env.NODE_ENV !== 'production' && config.performance && mark) { mark('compile') } const { render, staticRenderFns } = compileToFunctions(template, { shouldDecodeNewlines, shouldDecodeNewlinesForHref, delimiters: options.delimiters, comments: options.comments }, this) options.render = render options.staticRenderFns = staticRenderFns /* istanbul ignore if */ if (process.env.NODE_ENV !== 'production' && config.performance && mark) { mark('compile end') measure(`vue ${this._name} compile`, 'compile', 'compile end') } } } return mount.call(this, el, hydrating) } 複製程式碼
這裡先快取了$mount方法,然後又重新定義了$mount方法,新方法中主要加了template轉render函式的部分,這就對應了vue的 only-runtime
版本和 runtime-with-compiler
版本,compileToFunction的實現暫不深究,就是用來生成render函式,例子中的template轉成的render函式如下:

快取的mount方法:
//platforms/web/runtime/index.js Vue.prototype.$mount = function ( el?: string | Element, hydrating?: boolean ): Component { el = el && inBrowser ? query(el) : undefined return mountComponent(this, el, hydrating) } 複製程式碼
就是執行了mountComponent方法
mountComponent
export function mountComponent ( vm: Component, el: ?Element, hydrating?: boolean ): Component { vm.$el = el ... callHook(vm, 'beforeMount') let updateComponent /* istanbul ignore if */ if (process.env.NODE_ENV !== 'production' && config.performance && mark) { ... } else { updateComponent = () => { vm._update(vm._render(), hydrating) } } // we set this to vm._watcher inside the watcher's constructor // since the watcher's initial patch may call $forceUpdate (e.g. inside child // component mounted hook), which relies on vm._watcher being already defined new Watcher(vm, updateComponent, noop, { before () { if (vm._isMounted) { callHook(vm, 'beforeUpdate') } } }, true /* isRenderWatcher */) hydrating = false // manually mounted instance, call mounted on self // mounted is called for render-created child components in its inserted hook if (vm.$vnode == null) { vm._isMounted = true callHook(vm, 'mounted') } return vm } 複製程式碼
這裡主要是定義了 updateComponent
函式,例項化一個watcher並將updateComponent作為引數傳入,在watcher的建構函式中會執行。也就執行了下面這句:
vm._update(vm._render(), hydrating) 複製程式碼
整個DOm的生成和掛載都是由這一句程式碼完成的,可以分成兩部分:
- render函式執行返回Vnode
- _update函式執行生成對應的DOM並掛載到頁面上
render
// core/instance/render.js Vue.prototype._render = function (): VNode { const vm: Component = this const { render, _parentVnode } = vm.$options ... let vnode try { vnode = render.call(vm._renderProxy, vm.$createElement) } catch (e) { ... } // return empty vnode in case the render function errored out if (!(vnode instanceof VNode)) { if (process.env.NODE_ENV !== 'production' && Array.isArray(vnode)) { warn( 'Multiple root nodes returned from render function. Render function ' + 'should return a single root node.', vm ) } vnode = createEmptyVNode() } // set parent vnode.parent = _parentVnode return vnode } 複製程式碼
核心程式碼是:
vnode = render.call(vm._renderProxy, vm.$createElement) 複製程式碼
Vue是支援手寫render函式的,接受一個引數,其實就是這裡的vm.$createElement, 該函式也定義在同一個檔案中。
vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true) 複製程式碼
最終還是呼叫了createElement函式
createElement
// core/vdom/render.js export function createElement ( context: Component, tag: any, data: any, children: any, normalizationType: any, alwaysNormalize: boolean ): VNode | Array<VNode> { if (Array.isArray(data) || isPrimitive(data)) { normalizationType = children children = data data = undefined } if (isTrue(alwaysNormalize)) { normalizationType = ALWAYS_NORMALIZE } return _createElement(context, tag, data, children, normalizationType) } export function _createElement ( context: Component, tag?: string | Class<Component> | Function | Object, data?: VNodeData, children?: any, normalizationType?: number ): VNode | Array<VNode> { ... // support single function children as default scoped slot if (Array.isArray(children) && typeof children[0] === 'function' ) { data = data || {} data.scopedSlots = { default: children[0] } children.length = 0 } if (normalizationType === ALWAYS_NORMALIZE) { children = normalizeChildren(children) } else if (normalizationType === SIMPLE_NORMALIZE) { children = simpleNormalizeChildren(children) } let vnode, ns 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) } if (Array.isArray(vnode)) { return vnode } else if (isDef(vnode)) { if (isDef(ns)) applyNS(vnode, ns) if (isDef(data)) registerDeepBindings(data) return vnode } else { return createEmptyVNode() } } 複製程式碼
createElement內部又呼叫了_createElemnet,這裡就是生成Vnode的部分了,Vnode可以理解為用來描述dom節點的js物件,整個VirtualDOM就是由Vnode構成的Tree型結構。_createElement方法中有很多判斷,是web還是weex,是元件還是簡單的節點,對children格式化等,例子比較簡單就不討論這些了。最終會生成Vnode並返回,看下例子中的Vnode長啥樣:

注意幾個屬性,tag表示標籤名,context表示當前的Vue例項,children表示子節點,這裡是我們的hello vue文字節點,見下圖:

到這裡render函式執行完畢,生成了Vnode並傳入_update方法,最終由_update生成DOM並完成掛載,這部分下篇再說。