Vue源码简析之视图生成(上)
栏目: JavaScript · 发布时间: 5年前
内容简介:最终会生成new Vue()的时候会执行_init方法,做一些初始化工作后执行vm.$mount,在这之前会判断有没有el属性,没有的话需要手动调用。就像这样:这里先缓存了$mount方法,然后又重新定义了$mount方法,新方法中主要加了template转render函数的部分,这就对应了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并完成挂载,这部分下篇再说。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。