小白看源码之Vue篇-2:组件化的过程

微信扫一扫,分享到朋友圈

小白看源码之Vue篇-2:组件化的过程

前言

又到了周末,开始梳理Vue源码的第二篇,在这篇中,我们会讲到初始化Vue过程中组件化的过程,包括如何创建Vnode的过程。以及搞清楚 vm.$vnode
vm._vnode
的区别和关系。上一篇文章我们讲到 vm.$mount
函数最后执行到了 vm._update(vm._render(), hydrating)
那么这一篇我们将接着上一篇的结尾开始讲。

创建Vnode

vm._update(vm._render(), hydrating)
这个行代码,我们首先要看的是 vm._render()
他到底干了什么。

一、 vm._render()
干了什么

首先,我们来到 vm._render()
的定义处 src/core/instance/render.js

export function renderMixin (Vue: Class<Component>) {  //Vue类初始化的时候挂载render函数
// install runtime convenience helpers
installRenderHelpers(Vue.prototype)
Vue.prototype.$nextTick = function (fn: Function) {
return nextTick(fn, this)
}
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 //首次挂载为undefined
// render self
let vnode
try {
// There's no need to maintain a stack because 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)      //Vnode的具体实现通过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.NODE_ENV !== '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()
是在Vue的 renderMixin
过程中创建的,先不细究每一处代码,我们可以看到 vm._render()
最终返回的就是一个vnode。然后作为 vm._update(vnode,hydrafting)
的参数传入。
我们重点看其中的几个步骤,细节可以暂时忽略:

1、 const { render, _parentVnode } = vm.$options
我们从 vm.$options
拿到了render函数和他的父亲vnode(首次实例化肯定是空的);

2、 vm.$vnode = _parentVnode
注释写的非常清楚这个节点可以让render函数拿到占位符节点的数据。后续组件创建的时候会讲到是如何拿到占位符节点的数据的,可以这么理解vm.$vnode就是父亲节点,也就是占位符节点,例如element-ui的 <el-button></el-button>
就是一个占位符节点。

3、 vnode = render.call(vm._renderProxy, vm.$createElement)
可以看到,实际上vnode是通过 vm.$createElement
生成的,而 vm.$createElement
也就是我们常说的h函数:

new Vue({
render: h => h(App),
}).$mount('#app')
复制代码

至于 vm._renderProxy
则是在 vm._init()
的时候定义的,开发环境下就是vm本身。

二、 vm.$createElement

那么接下来我们来看 vm.$createElement
做了什么。代码也在 src/core/instance/render.js
,是通过 vm._init()
进行的 initRender(vm)
来初始化 vm.$createElement

export function initRender (vm: Component) {
//.....some codes
// bind the createElement fn to this instance
// so that we get proper render context inside it.
// args order: tag, data, children, normalizationType, alwaysNormalize
// internal version is used by render functions compiled from templates
vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
// normalization is always applied for the public version, used in
// user-written render functions.
vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)
// $attrs & $listeners are exposed for easier HOC creation.
// they need to be reactive so that HOCs using them are always updated
//... somecodes
}
复制代码

可以看到 vm.$createElement
实际上就是返回了 createElement(vm, a, b, c, d, true)
的结果,接下来看一下 createElement(vm, a, b, c, d, true)
干了什么。

三、 createElement
_createElement

3-1: createElement

createElement
定义在 src/core/vdom/create-elements.js
下:

export function createElement ( //对_createElement函数的封装
context: Component,
tag: any,
data: any,
children: any,
normalizationType: any,
alwaysNormalize: boolean
): VNode | Array<VNode> {
if (Array.isArray(data) || isPrimitive(data)) { //如果未传入data 则把变量值往下传递
normalizationType = children
children = data
data = undefined
}
if (isTrue(alwaysNormalize)) {
normalizationType = ALWAYS_NORMALIZE
}
return _createElement(context, tag, data, children, normalizationType)
}
复制代码

看到传入的参数大家就会觉得非常的熟悉了,就是vue官方文档中的 creatElement
参数中定义的那些字段。我们在这里传入的当然是App.vue导出的这个App对象了,当做是tag传入。可以看到 createElement()
方法实际就是如果未传入data参数,就把childer之类的参数全部向下移位,防止参数调用错误。真正的逻辑则在其返回的函数 _createElement

3-2: _createElement

_createElement
相关定义也在 src/core/vdom/create-elements.js
下:

export function _createElement (
context: Component,
tag?: string | Class<Component> | Function | Object,
data?: VNodeData,
children?: any,
normalizationType?: number
): VNode | Array<VNode> {
if (isDef(data) && isDef((data: any).__ob__)) {
process.env.NODE_ENV !== '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.NODE_ENV !== '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 === 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
if (process.env.NODE_ENV !== 'production' && isDef(data) && isDef(data.nativeOn)) {
warn(
`The .native modifier for v-on is only valid on components but it was used on <${tag}>.`,
context
)
}
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()
}
}
复制代码

代码很长,我们关注几个重点即可:

1、children参数的处理:children参数有两种处理情况,根据传入的参数 normalizationType
的值来确定。如果是 ALWAYS_NORMALIZE
调用 normalizeChildren(children)
如果是 SIMPLE_NORMALIZE
则调用 simpleNormalizeChildren(children)
。这两个函数的定义在同级目录的 ./helper/normolize-children.js
下,这里不细展开来讲了,自己看一看就大概了解了,一个是直接 concat()
拍平数组,一个就是递归push进一个数组当中:

if (normalizationType === ALWAYS_NORMALIZE) {
children = normalizeChildren(children)
} else if (normalizationType === SIMPLE_NORMALIZE) {
children = simpleNormalizeChildren(children)
}
复制代码

2、判断tag类型:1、如果是string类型,则继续判断是否是原生的html标签,如果是,就 new Vnode()
,否则该tag是通过 vue.component()
或者局部 component
注册的组件(后续会讲),则走 createComponent()
生成组件vnode;2、如果不是string类型,那么则是类似我们上面那种情况,传入的是App这个对象,则走 createComponent()
方法创建vnode:

if (typeof tag === 'string') {
let Ctor
ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
if (config.isReservedTag(tag)) {
// platform built-in elements
if (process.env.NODE_ENV !== 'production' && isDef(data) && isDef(data.nativeOn)) {
//生产环境相关
}
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 {
//未知命名空间
}
} else {
// direct component options / constructor
vnode = createComponent(tag, data, context, children)
}
复制代码

3、return Vnode没啥好说的。

到这里那么vnode就生成了,那么我们接下来去看一下 createComponent(tag, data, context, children)
都干了些什么。

四、 createComponent()

createComponent()
是一个比较复杂的环节,希望大家能够反复的琢磨这里面的奥妙,本小白也是在这个地方停留了很久,有非常多的细节需要注意的。 createComponent()
定义在 src/core/vdom/create-component.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  //就是Vue本身,作为一个基类构造器
// plain options object: turn it into a constructor
if (isObject(Ctor)) {
Ctor = baseCtor.extend(Ctor) // 转化为一个构造器,了解Vue.extend的实现
}
// 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)
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
}
复制代码

我们关注其中的几个重点:

createComponent之一、 Ctor = baseCtor.extend(Ctor)
即 Vue.extend()干了什么

baseCtor = context.$options._base
首次渲染的时候,指的就是vue本身,定义在 src/core/global-api/index.js
中: Vue.options._base = Vue
那么 vue.extend()
到底对我们的App对象做了什么呢, Vue.extend
接下去定义在 src/core/global-api/extend.js

Vue.cid = 0
let cid = 1
Vue.extend = function (extendOptions: Object): Function {
extendOptions = extendOptions || {}
const Super = this //指向Vue静态方法
const SuperId = Super.cid
const cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {})
if (cachedCtors[SuperId]) { //单例模式,如果是复用的组件,那么 直接返回缓存在cachedCtors[SuperId]上的Sub
return cachedCtors[SuperId]
}
const name = extendOptions.name || Super.options.name
if (process.env.NODE_ENV !== 'production' && name) {
validateComponentName(name) // 校验component的name属性
}
const Sub = function VueComponent (options) {
this._init(options)
}
Sub.prototype = Object.create(Super.prototype) //原型继承
Sub.prototype.constructor = Sub //再把constructor指回sub
Sub.cid = cid++
Sub.options = mergeOptions(  //合并options
Super.options,
extendOptions
)
Sub['super'] = Super //super指向Vue
// For props and computed properties, we define the proxy getters on
// the Vue instances at extension time, on the extended prototype. This
// avoids Object.defineProperty calls for each instance created.
if (Sub.options.props) {
initProps(Sub)
}
if (Sub.options.computed) {
initComputed(Sub)
}
// allow further extension/mixin/plugin usage
Sub.extend = Super.extend
Sub.mixin = Super.mixin
Sub.use = Super.use
// create asset registers, so extended classes
// can have their private assets too.
ASSET_TYPES.forEach(function (type) {
Sub[type] = Super[type]
})
// enable recursive self-lookup
if (name) {
Sub.options.components[name] = Sub
}
// keep a reference to the super options at extension time.
// later at instantiation we can check if Super's options have
// been updated.
Sub.superOptions = Super.options
Sub.extendOptions = extendOptions
Sub.sealedOptions = extend({}, Sub.options)
// cache constructor
cachedCtors[SuperId] = Sub
return Sub
}
复制代码

tips:可能很多同学看到这里会有些晕了,毕竟文章是按顺序往下写的,可能没有那么直观,很容易造成架构的混淆之类的,这里贴一下我整理的层级幕布图,仅供参考,希望能有所帮助: Vue源码解读

Vue.extend()大致做了以下五件事情。

1、 cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {})
创建该组件实例的构造方法属性,单例模式,优化性能:

if (cachedCtors[SuperId]) { //单例模式,如果是复用的组件,那么 直接返回缓存在cachedCtors[SuperId]上的Sub
return cachedCtors[SuperId]
}
复制代码

2、原型继承模式,创建组件的构造函数:

const Sub = function VueComponent (options) {
this._init(options)//找到Vue的_init
}
Sub.prototype = Object.create(Super.prototype) //原型继承
Sub.prototype.constructor = Sub //再把constructor指回sub
Sub.cid = cid++
Sub.options = mergeOptions(  //合并options
Super.options,
extendOptions
)
Sub['super'] = Super //super指向Vue
复制代码

3、提前数据双向绑定,防止patch实例化的时候在此调用 object.defineProperty

if (Sub.options.props) {
initProps(Sub)
}
if (Sub.options.computed) {
initComputed(Sub)
}
复制代码

4、继承Vue父类的全局方法:

Sub.extend = Super.extend
Sub.mixin = Super.mixin
Sub.use = Super.use
复制代码

5、缓存对象并返回:

cachedCtors[SuperId] = Sub
return Sub
复制代码

createComponent之剩下其他:

createcomponent()
介绍了以下extend方法,接下来还有一些比较重的地方的,往后会在patch环节重点讲到,这边先将其列出,希望读者能够略作留意。

1、 const propsData = extractPropsFromVNodeData(data, Ctor, tag)
这条代码将是往后我们从占位符节点获取自定义props属性并传入子组件的关键所在,patch过程会详细说明。

2、函数式组件:

if (isTrue(Ctor.options.functional)) {
return createFunctionalComponent(Ctor, propsData, data, context, children)
}
复制代码

3、 installComponentHooks(data)
又是一个重点,注册组件上面的钩子函数,钩子函数定义在同一个文件下面:分为init、prepatch、insert、destroy四个钩子函数,patch过程讲到会专门介绍:

const hooksToMerge = Object.keys(componentVNodeHooks)
function installComponentHooks (data: VNodeData) {
const hooks = data.hook || (data.hook = {})
for (let i = 0; i < hooksToMerge.length; i++) {
const key = hooksToMerge[i]
const existing = hooks[key]
const toMerge = componentVNodeHooks[key]
if (existing !== toMerge && !(existing && existing._merged)) {
hooks[key] = existing ? mergeHook(toMerge, existing) : toMerge
}
}
}
复制代码

4、new Vnode() & retrun vnode:

const vnode = new VNode(
`vue-component-${Ctor.cid}${name ? `-${name}` : ''}`,
data, undefined, undefined, undefined, context,
{ Ctor, propsData, listeners, tag, children },
asyncFactory
)
return vnode
复制代码

可以看到组件的构造函数等一些被放在了一个对象当中传入了构造函数。

那么到这么, createComponent()
的过程也大致过了一遍了。

五、Virtual-Dom

讲了半天的vnode创建,也没有讲到vnode类的实现,放到最后面讲是有原因的,实在是创建vnode情况太多了,上面先铺开,再到最后用vnode一收,希望能狗加深各位的印象。

5-1、为什么要使用Vnode?

1、创建真实DOM的代价高

真实的DOM节点node实现的属性很多,而vnode仅仅实现一些必要的属性,相比起来,创建一个vnode的成本比较低。所以创建vnode可以让我们更加关注需求本身。

2、触发多次浏览器重绘及回流

是使用vnode,相当于加了一个缓冲,让一次数据变动所带来的所有node变化,先在vnode中进行修改,然后diff之后对所有产生差异的节点集中一次对DOM tree进行修改,以减少浏览器的重绘及回流。这一点我们会在深入响应原理的章节当中详细介绍,包括渲染watcher更新队列,组件的更新等等~

5-2、 Class Vnode{}

Vnode类定义在 src/core/vdom/vnode.js
中:

export default class VNode {
tag: string | void;
data: VNodeData | void;
children: ?Array<VNode>;
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<VNode>,
text?: string,
elm?: Node,
context?: Component,
componentOptions?: VNodeComponentOptions,
asyncFactory?: Function
) {
//somecodes
}
// DEPRECATED: alias for componentInstance for backwards compat.
/* istanbul ignore next */
get child (): Component | void {
return this.componentInstance
}
}
复制代码

看起来这个Vnode类已经非常的长了,实际的dom节点要比这个更加的庞杂巨大,其中的属性,有些我们暂时可以不用关心,我们重点放在构造函数上:

constructor (
tag?: string,
data?: VNodeData,
children?: ?Array<VNode>,
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
}
复制代码

我们来对照一下 createComponent()
中创建的vnode传入的参数是哪几个:

const vnode = new VNode(
`vue-component-${Ctor.cid}${name ? `-${name}` : ''}`,
data, undefined, undefined, undefined, context,
{ Ctor, propsData, listeners, tag, children },
asyncFactory
)
复制代码

可以看到,实际上 createComponent()
中就传入了一个tag、data、当前的vm:context还有一个componentOptions,当然精华都是在这个componentOptions里面的,后面的_update也就是围绕这个componentOptions展开patch的,那么就放到下一篇:《小白看源码之Vue篇-3:vnode的patch过程》!

总结

那么 vm._render()
创建虚拟dom的过程我们也就大致过了一遍,文章一遍写下来,实际很多的地方需要读者自己反复的琢磨,不是看一遍就了解的,本小白也是在反复挣扎后才略知一二的。

本节的重点如何创建一个vnode,以及不同情况下的不同创建方式,暂不要深究细节,往后慢慢会涉及到铺开,你在回过头来,恍然大明白!加深印象!

最后的最后打个小小的广告~

有大佬们需要短信业务,或者号码认证的能力的话,可以看看这里! 中国联通创新能力平台
运营商官方平台!没有中间商赚差价~

微信扫一扫,分享到朋友圈

小白看源码之Vue篇-2:组件化的过程

前端仿ps斜纹布料效果

上一篇

神策数据罗彦博:如何正确使用漏斗分析提升转化?

下一篇

你也可能喜欢

小白看源码之Vue篇-2:组件化的过程

长按储存图像,分享给朋友