Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

Vue源码解析(二):数据驱动

雨水一盒~ 2019-02-20 18:22:00 阅读数:227 评论数:0 点赞数:0 收藏数:0

一、数据驱动:

数据驱动是vue.js最大的特点。在vue.js中,数据驱动就是当数据发生变化的时候,用户界面发生相应的变化,开发者不需要手动的去修改dom。数据驱动还有一部分是数据更新驱动视图变化。下面我们来分析vue.js中模板和数据如何渲染成最终的DOM的。

二、Vue初始化发生了什么:

当我们new Vue的时候,发生了什么?

在上一节中,我们分析了vue初始化的代码在'src/core/instance/index.js'中,可以看到,Vue实例里面调用了this._init方法function Vue (options) { if (process.env.NODEENV !== 'production' && !(this instanceof Vue) ) { warn('Vue is a constructor and should be called with the new keyword') } this.init(options) } initMixin(Vue) stateMixin(Vue) eventsMixin(Vue) lifecycleMixin(Vue) renderMixin(Vue) export default Vue

而 _init 方法是在'src/core/instance/init.js'中定义的

Vue.prototype.init = function (options?: Object) { const vm: Component = this // a uid vm.uid = uid++ let startTag, endTag // istanbul ignore if // if (process.env.NODEENV !== 'production' && config.performance && mark) { startTag = `vue-perf-start:${vm.uid} endTag = vue-perf-end:${vm.uid}` mark(startTag) } // 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.NODEENV !== '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.NODEENV !== '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) } }

也就是说,在vue初始化的时候主要就干了这些事情:合并配置,初始化生命周期,初始化事件中心,初始化渲染,初始化 data、props、computed、watcher 等等;

各种初始化逻辑完成之后,判断vm.$options.el是否存在

,如果存在,就调用vm.$mount方法挂载vm,将模版渲染成最终的DOM;

这里我们暂时不管初始化的逻辑,先来分析Vue 的挂载过程。

三、$mount实例挂载:

$mount 这个方法的实现是和平台、构建方式都相关的,这里我们重点分析带 

compiler 版本的 

$mount 实现,打开'src/platform/web/entry-runtime-with-compiler.js'文件const mount = Vue.prototype.$mount Vue.prototype.$mount = function ( el?: string | Element, hydrating?: boolean ): Component { el = el && query(el) // istanbul ignore if // if (el === document.body || el === document.documentElement) { process.env.NODEENV !== 'production' && warn( Do not mount Vue to <html> or <body> - mount to normal elements instead. ) return this } 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.NODEENV !== 'production' && !template) { warn( Template element not found or is empty: ${options.template}, this ) } } } else if (template.nodeType) { template = template.innerHTML } else { if (process.env.NODEENV !== 'production') { warn('invalid template option:' + template, this) } return this } } else if (el) { template = getOuterHTML(el) } if (template) { // istanbul ignore if // if (process.env.NODEENV !== '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.NODEENV !== 'production' && config.performance && mark) { mark('compile end') measure(`vue ${this.name} compile`, 'compile', 'compile end') } } } return mount.call(this, el, hydrating) }

这里首先引入了原生的$mount方法,然后对这个方法进行改写;

从上往下读,首先如果是body或者html元素,就会报错,Vue 不能挂载在 

body、

html 这样的根节点上;

然后, 如果没有定义 

render 方法,则会把 

el 或者 

template 字符串转换成 

render 方法,在 Vue 2.0 版本中,所有 Vue 的组件的渲染最终都需要 

render 方法,它是调用 

compileToFunctions 方法实现的;

最后,调用原先原型上的 

$mount 方法挂载。

四、_render方法:

_render 方法是实例的一个私有方法,它用来把实例渲染成一个虚拟 Node。它的定义在 

src/core/instance/render.js 文件中Vue.prototype.render = function (): VNode { const vm: Component = this const { render, parentVnode } = vm.$options if (parentVnode) { vm.$scopedSlots = normalizeScopedSlots( parentVnode.data.scopedSlots, vm.$slots, vm.$scopedSlots ) } // set parent vnode. this allows render functions to have access // to the data on the placeholder node. vm.$vnode = parentVnode // render self let vnode try { // There's no need to maintain a stack becaues all render fns are called // separately from one another. Nested component's render fns are called // when parent component is patched. currentRenderingInstance = vm vnode = render.call(vm.renderProxy, vm.$createElement) } catch (e) { handleError(e, vm, render) // return error render result, // or previous vnode to prevent render error causing blank component // istanbul ignore else // if (process.env.NODEENV !== 'production' && vm.$options.renderError) { try { vnode = vm.$options.renderError.call(vm.renderProxy, vm.$createElement, e) } catch (e) { handleError(e, vm, renderError) vnode = vm.vnode } } else { vnode = vm.vnode } } finally { currentRenderingInstance = null } // if the returned array contains only a single node, allow it if (Array.isArray(vnode) && vnode.length === 1) { vnode = vnode[0] } // 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 }

vm._render 最终是通过执行 

createElement 方法并返回的是 

vnode,它是一个虚拟 Node。下面我们先来分析一下Virtual DOM

五、Virtual DOM

Virtual DOM产生的前提是,浏览器中真正的 DOM 元素是非常庞大的,因为浏览器的标准就把 DOM 设计的非常复杂。当我们频繁的去做 DOM 更新,会产生一定的性能问题;

Virtual DOM 就是用一个原生的 JS 对象去描述一个 DOM 节点,所以它比创建一个 DOM 的代价要小很多。在 Vue.js 中,Virtual DOM 是用 

VNode 这么一个 Class 去描述,它定义在 

src/core/vdom/vnode.js 中export default class VNode { tag: string | void; data: VNodeData | void; children: ?Array; text: string | void; elm: Node | void; ns: string | void; context: Component | void; // rendered in this component's scope key: string | number | void; componentOptions: VNodeComponentOptions | void; componentInstance: Component | void; // component instance parent: VNode | void; // component placeholder node // strictly internal raw: boolean; // contains raw HTML? (server only) isStatic: boolean; // hoisted static node isRootInsert: boolean; // necessary for enter transition check isComment: boolean; // empty comment placeholder? isCloned: boolean; // is a cloned node? isOnce: boolean; // is a v-once node? asyncFactory: Function | void; // async component factory function asyncMeta: Object | void; isAsyncPlaceholder: boolean; ssrContext: Object | void; fnContext: Component | void; // real context vm for functional nodes fnOptions: ?ComponentOptions; // for SSR caching devtoolsMeta: ?Object; // used to store functional render context for devtools fnScopeId: ?string; // functional scope id support constructor ( tag?: string, data?: VNodeData, children?: ?Array, text?: string, elm?: Node, context?: Component, componentOptions?: VNodeComponentOptions, asyncFactory?: Function ) { this.tag = tag this.data = data this.children = children this.text = text this.elm = elm this.ns = undefined this.context = context this.fnContext = undefined this.fnOptions = undefined this.fnScopeId = undefined this.key = data && data.key this.componentOptions = componentOptions this.componentInstance = undefined this.parent = undefined this.raw = false this.isStatic = false this.isRootInsert = true this.isComment = false this.isCloned = false this.isOnce = false this.asyncFactory = asyncFactory this.asyncMeta = undefined this.isAsyncPlaceholder = false } // DEPRECATED: alias for componentInstance for backwards compat. // istanbul ignore next // get child (): Component | void { return this.componentInstance } }

Virtual DOM 除了它的数据结构的定义,映射到真实的 DOM 实际上要经历 VNode 的 create、diff、patch 等过程。那么在 Vue.js 中,VNode 的 create 是通过之前提到的 

createElement 方法创建的,我们接下来分析这部分的实现

六、createElement

Vue.js使用createElement 方法创建 VNode,它定义在 '

src/core/vdom/create-elemenet.js' 中:export function createElement ( context: Component, tag: any, data: any, children: any, normalizationType: any, alwaysNormalize: boolean ): VNode | Array { if (Array.isArray(data) || isPrimitive(data)) { normalizationType = children children = data data = undefined } if (isTrue(alwaysNormalize)) { normalizationType = ALWAYSNORMALIZE } return createElement(context, tag, data, children, normalizationType) }

createElement实际上是对 

_createElement 方法的封装,它允许传入的参数更加灵活,在处理这些参数后,调用真正创建 VNode 的函数 

_createElement:

export function createElement ( context: Component, tag?: string | Class | Function | Object, data?: VNodeData, children?: any, normalizationType?: number ): VNode | Array { if (isDef(data) && isDef((data: any).ob)) { process.env.NODEENV !== 'production' && warn( Avoid using observed data object as vnode data: ${JSON.stringify(data)}n + 'Always create fresh vnode data objects in each render!', context ) return createEmptyVNode() } // object syntax in v-bind if (isDef(data) && isDef(data.is)) { tag = data.is } if (!tag) { // in case of component :is set to falsy value return createEmptyVNode() } // warn against non-primitive key if (process.env.NODEENV !== 'production' && isDef(data) && isDef(data.key) && !isPrimitive(data.key) ) { if (!WEEX || !('@binding' in data.key)) { warn( 'Avoid using non-primitive value as key, ' + 'use string/number value instead.', context ) } } // 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 === ALWAYSNORMALIZE) { 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 ((!data || !data.pre) && 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 方法有 5 个参数:

context 表示 VNode 的上下文环境,它是 

Component 类型;

tag 表示标签,它可以是一个字符串,也可以是一个 

Component;

data 表示 VNode 的数据,它是一个 

VNodeData 类型,可以在 

flow/vnode.js 中找到它的定义;

children 表示当前 VNode 的子节点,它是任意类型的,它接下来需要被规范为标准的 VNode 数组;

normalizationType 表示子节点规范的类型,类型不同规范的方法也就不一样,它主要是参考 

render 函数是编译生成的还是用户手写的

createElement 创建 VNode 的过程:每个 VNode 有 

children,

children 每个元素也是一个 VNode,这样就形成了一个 VNode Tree,它很好的描述了我们的 DOM Tree

回到 

mountComponent 函数的过程,我们已经知道 

vm._render 是如何创建了一个 VNode,接下来就是要把这个 VNode 渲染成一个真实的 DOM 并渲染出来,这个过程是通过 

vm._update 完成的

七、patch

Vue 的 

_update 是实例的一个私有方法,它被调用的时机有 2 个,一个是首次渲染,一个是数据更新的时候,这里我们只分析首次渲染部分;

_update 方法的作用是把 VNode 渲染成真实的 DOM,它的定义在 

src/core/instance/lifecycle.js 中Vue.prototype.update = function (vnode: VNode, hydrating?: boolean) { const vm: Component = this const prevEl = vm.$el const prevVnode = vm.vnode const restoreActiveInstance = setActiveInstance(vm) vm.vnode = vnode // Vue.prototype.patch is injected in entry points // based on the rendering backend used. if (!prevVnode) { // initial render vm.$el = vm.patch(vm.$el, vnode, hydrating, false // removeOnly //) } else { // updates vm.$el = vm.patch(prevVnode, vnode) } restoreActiveInstance() // update vue reference if (prevEl) { prevEl.vue = null } if (vm.$el) { vm.$el.vue = vm } // if parent is an HOC, update its $el as well if (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent.vnode) { vm.$parent.$el = vm.$el } // updated hook is called by the scheduler to ensure that children are // updated in a parent's updated hook. }

_update 的核心就是调用 

vm.patch 方法,而在浏览器端渲染中,它指向了 

patch 方法,它的定义在 

src/platforms/web/runtime/patch.js中

import /* as nodeOps from 'web/runtime/node-ops' import { createPatchFunction } from 'core/vdom/patch' import baseModules from 'core/vdom/modules/index' import platformModules from 'web/runtime/modules/index' // the directive module should be applied last, after all // built-in modules have been applied. const modules = platformModules.concat(baseModules) export const patch: Function = createPatchFunction({ nodeOps, modules })

该方法的定义是调用 createPatchFunction 的返回值,createPatchFunction的实现定义在‘src/core/vdom/patch.js’中:

export function createPatchFunction (backend) { let i, j const cbs = {} const { modules, nodeOps } = backend for (i = 0; i < hooks.length; ++i) { cbs[hooks[i]] = [] for (j = 0; j < modules.length; ++j) { if (isDef(modules[j][hooks[i]])) { cbs[hooks[i]].push(modules[j][hooks[i]]) } } } function emptyNodeAt (elm) { return new VNode(nodeOps.tagName(elm).toLowerCase(), {}, [], undefined, elm) } function createRmCb (childElm, listeners) { function remove () { if (--remove.listeners === 0) { removeNode(childElm) } } remove.listeners = listeners return remove } //... }

createPatchFunction 内部定义了一系列的辅助方法,最终返回了一个 

patch 方法,这个方法就赋值给了 

vm._update 函数里调用的 

vm.patch

patch 方法本身,它接收 4个参数:

oldVnode 表示旧的 VNode 节点,它也可以不存在或者是一个 DOM 对象;

vnode 表示执行 

_render 后返回的 VNode 的节点;

hydrating 表示是否是服务端渲染;

removeOnly 是给 

transition-group 用的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, null, null, removeOnly) } else { if (isRealElement) { // mounting to a real element // check if this is server-rendered content and if we can perform // a successful hydration. if (oldVnode.nodeType === 1 && oldVnode.hasAttribute(SSR_ATTR)) { oldVnode.removeAttribute(SSR_ATTR) hydrating = true } if (isTrue(hydrating)) { if (hydrate(oldVnode, vnode, insertedVnodeQueue)) { invokeInsertHook(vnode, insertedVnodeQueue, true) return oldVnode } else if (process.env.NODE_ENV !== 'production') { warn( 'The client-side rendered virtual DOM tree is not matching ' + 'server-rendered content. This is likely caused by incorrect ' + 'HTML markup, for example nesting block-level elements inside ' + '

, or missing . Bailing hydration and performing ' + 'full client-side render.' ) } } // either not server-rendered, or hydration failed. // create an empty node and replace it oldVnode = emptyNodeAt(oldVnode) } // 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 }

八、总结

至此我们从主线上把模板和数据如何渲染成最终的 DOM 的过程分析完毕了,我们可以看到从初始化 Vue 到最终渲染的整个过程:

new Vue => init => $mount => compile => render => vnode => patch => dom

版权声明
本文为[雨水一盒~]所创,转载请带上原文链接,感谢
https://www.cnblogs.com/angelatian/p/10408306.html

编程之旅,人生之路,不止于编程,还有诗和远方。
阅代码原理,看框架知识,学企业实践;
赏诗词,读日记,踏人生之路,观世界之行;

支付宝红包,每日可领