Vue程序运行过程
这个图就是一个vue文件的完整运行过程,在用vue-cli2创建项目时,会让我们选择两种类型:1.runtime-compiler 2.runtime-only
这两种类型的区别就在于:
1.runtime-compiler:
template -> ast -> render -> vdom -> ui
2.runtime-only
render -> vdom -> ui
通过这种方式创建的项目vue文件跳过了前两个流程,所以性能更高,代码量更少
// 省去了前两个步骤,那么.vue文件的template是由谁来处理的呢?
// vue-loader用来加载.vue文件
// vue-template-compiler用来解析.vue文件,将解析成render函数
render函数
render: function (createElement) { return createElement('h1', this.blogTitle) }
createElement 到底会返回什么呢?其实不是一个实际的 DOM 元素。它更准确的名字可能是 createNodeDescription,因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点,包括及其子节点的描述信息。我们把这样的节点描述为“虚拟节点 (virtual node)”,也常简写它为“VNode”。“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼。
createElement接受的参数:
// @returns {VNode}
createElement(
// {String | Object | Function}
// 一个 HTML 标签名、组件选项对象,或者
// resolve 了上述任何一种的一个 async 函数。必填项。
'div',
// {Object}
// 一个与模板中 attribute 对应的数据对象。可选。
{
class: 'app'
},
// {String | Array}
// 子级虚拟节点 (VNodes),由 `createElement()` 构建而成,
// 也可以使用字符串来生成“文本虚拟节点”。可选。
[
'先写一些文字',
createElement('h1', '一则头条'),
createElement(MyComponent, {
props: {
someProp: 'foobar'
}
})
]
)
除了可以按以上方法传入参数,还可以直接传入组件
部分参考:https://blog.csdn.net/weixin_42043532/article/details/108066372