业精于勤 荒于嬉
模板编译
概述
模板编译的主要目标是将模板(template)转换为渲染函数(render)
template => render()
模板编译的必要性
Vue 2.0 需要用到VNode 描述视图以及各种交互,手写显然不切实际,因此用户需要编写类似HTML 代码的Vue模板,通过编译器将模板转换为可返回VNode 的 render 函数。
整体流程
如果用户设置了template 或者是el 选项,最终就会执行编译函数,compileToFunctions
若指定 template 或 el 选项,则会执行编译, platforms\web\entry-runtime-with-compiler.js
编译过程
编译分为三步:解析 ,优化,生成; src\compiler\index.js
export const createCompiler = createCompilerCreator(function baseCompile(
template: string,
options: CompilerOptions
): CompiledResult {
// 1、解析:将模板转换为对象 AST(抽象语法树)
const ast = parse(template.trim(), options)
//2、标记静态节点(页面中不会变的地方)
if (options.optimize !== false) {
optimize(ast, options)
}
//3、代码生成 转换 ast 为代码字符串 new Function(code) 这样就可以得到一个真正的render 函数了
const code = generate(ast, options)
return {
ast,
render: code.render,
staticRenderFns: code.staticRenderFns
}
})
解析-parse
解析器将模板解析为抽象语法树,基于AST可以做优化或者代码生成工作。
/src/compiler/parser/index.js, 结构如下:
解析器内部分了 HTML 解析器 、 文本解析器 和 过滤器解析器 ,最主要是 HTML 解析器
优化-optimize
优化器的作用是在AST中找出静态子树并打上标记。静态子树是在AST中永远不变的节点,如纯文本节点
标记静态子树的好处:
- 每次重新渲染,不需要为静态子树创建新节点
- 虚拟DOM 中 patch 时,可以跳过静态子树
代码实现,src/compiler/optimizer.js - optimize
标记结束:
代码生成 - generate
将AST 转换成渲染函数中的内容,即代码字符串。
generate方法生成渲染函数代码,src/compiler/codegen/index.js
生成的代码形如
`_c('div',{attrs:{"id":"demo"}},[
_c('h1',[_v("Vue.js测试")]),
_c('p',[_v(_s(foo))])
])`
其中 几个关键指令的解析 如 v-if v-for 的解析生成
// 关键指令解析
if (inVPre) {
processRawAttrs(element)
} else if (!element.processed) {
// structural directives
processFor(element)
processIf(element)
processOnce(element)
}
export function genElement (el: ASTElement, state: CodegenState): string {
if (el.parent) {
el.pre = el.pre || el.parent.pre
}
if (el.staticRoot && !el.staticProcessed) {
return genStatic(el, state)
} else if (el.once && !el.onceProcessed) {
return genOnce(el, state)
} else if (el.for && !el.forProcessed) {
return genFor(el, state)
} else if (el.if && !el.ifProcessed) {
return genIf(el, state)
} else if (el.tag === 'template' && !el.slotTarget && !state.pre) {
return genChildren(el, state) || 'void 0'
} else if (el.tag === 'slot') {
return genSlot(el, state)
} else {
// component or element
let code
if (el.component) {
code = genComponent(el.component, el, state)
} else {
let data
if (!el.plain || (el.pre && state.maybeComponent(el))) {
data = genData(el, state)
}
const children = el.inlineTemplate ? null : genChildren(el, state, true)
code = `_c('${el.tag}'${
data ? `,${data}` : '' // data
}${
children ? `,${children}` : '' // children
})`
}
// module transforms
for (let i = 0; i < state.transforms.length; i++) {
code = state.transforms[i](el, code)
}
return code
}
}
组件化机制
组件声明
Vue.component()
initAssetRegisters(Vue) src/core/global-api/assets.js
组件注册使用extend方法将配置转换为构造函数并添加到components选项
组件实例创建及挂载
整体流程
首先创建的是根组件,首次 _render() 时,会得到整棵树的 VNode 结构
整体流程: new Vue() => $mount() => vm._render() => createElement() => createComponent() =》 patch = 》 createElm = 》 createComponent()
创建自定义组件VNode
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()
}
}
_createElement src\core\vdom\create-element.js
_createElement实际执行VNode创建的函数,由于传入tag是非保留标签,因此判定为自定义组件通过createComponent去创建
createComponent
src/core/vdom/create-component.js
创建组件 VNode ,保存了上一步处理得到的组件构造函数, props ,事件等
注意组件钩子安装和组件tag指定规则
创建自定义组件实例
根组件执行更新函数时,会递归创建子元素和子组件,入口createElm
createEle() core/vdom/patch.js
首次执行_update()时,patch()会通过createEle()创建根元素,子元素创建研究从这里开始
createComponent core/vdom/patch.js
// 组件实例创建、挂载
if (isDef(i = i.hook) && isDef(i = i.init)) {
i(vnode, false /* hydrating */ )
}
// after calling the init hook, if the vnode is a child component
// it should've created a child instance and mounted it. the child
// component also has set the placeholder vnode's elm.
// in that case we can just return the element and be done.
if (isDef(vnode.componentInstance)) {
// 元素引用指定vnode.elm 元素属性创建等
initComponent(vnode, insertedVnodeQueue)
// 插入到父元素
insert(parentElm, vnode.elm, refElm)
if (isTrue(isReactivated)) {
reactivateComponent(vnode, insertedVnodeQueue, parentElm, refElm)
}
return true
}
注:
组件创建顺序 自上而下
组件挂载顺序 自下而上
总结
Vue 源码的学习进阶目前先到这里,还需要自己在多看多分析多尝试,Vue源码的学习使我们能够深入理解原理,解答很多开发中的疑惑、规避很多潜在的错误,写出更好的代码。学习大神的代码,能够学习编程思想,设计模式,训练基本功能,提升内里。
人生当自勉 学习需坚持