目的:生成一个基于参数 “APP”内容 的 HTML。
根据以下链接,整理。
v-for模板
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
模板类似于html代码,又不是。因为模板中含有v-if,v-for,@click等不属于html的属性代码。
首选模板含有v-for等逻辑,因此必须使用js来进行解析。(html和css解析不了)js会解析为一个js函数,即render函数,最后经过其他函数,渲染成html。
Vue render函数
render
函数可以作为一道分割线,render
函数的左边可以称之为编译期,将Vue的模板转换为渲染函数。
render
函数的右边是Vue的运行时,主要是基于渲染函数生成Virtual DOM树,Diff和Patch。
渲染函数的基础
render 函数
跟 template
一样都是创建 html 模板的,但是有些场景中用 template
实现起来代码冗长繁琐而且有大量重复,需要使用JavaScript的编程能力和创建HTML,这时候就可以用 render 函数
,它比template
更接近编译器。
createElement
是 render 函数
的参数,它本身也是个函数,并且有三个参数。
/**
* render: 渲染函数
* 参数: createElement
* 参数类型: Function
*/
render: function (createElement) {
let _this = this['$options'].parent // 我这个是在 .vue 文件的 components 中写的,这样写才能访问this
let _header = _this.$slots.header // $slots: vue中所有分发插槽,不具名的都在default里
/**
* createElement 本身也是一个函数,它有三个参数
* 返回值: VNode,即虚拟节点
* 1. 一个 HTML 标签字符串,组件选项对象,或者解析上述任何一种的一个 async 异步函数。必需参数。{String | Object | Function} - 就是你要渲染的最外层标签
* 2. 一个包含模板相关属性的数据对象你可以在 template 中使用这些特性。可选参数。{Object} - 1中的标签的属性
* 3. 子虚拟节点 (VNodes),由 `createElement()` 构建而成,也可以使用字符串来生成“文本虚拟节点”。可选参数。{String | Array} - 1的子节点,可以用 createElement() 创建,文本节点直接写就可以
*/
return createElement(
// 1. 要渲染的标签名称:第一个参数【必需】
'div',
// 2. 1中渲染的标签的属性,详情查看文档:第二个参数【可选】
{
style: {
color: '#333',
border: '1px solid #ccc'
}
},
// 3. 1中渲染的标签的子元素数组:第三个参数【可选】
[
'text', // 文本节点直接写就可以
_this.$slots.default, // 所有不具名插槽,是个数组
createElement('div', _header) // createElement()创建的VNodes
]
)
}
ES6箭头语法:=>
// ES5
render: function (createElement) {
return createElement(App);
}
//缩写
render (createElement) {
return createElement(App);
}
//再缩写
render (h){
return h(App);
}
// ES6
h => h(App);
“ h ” 来自单词 hyperscript
,这个单词通常用在 virtual-dom 的实现中。Hyperscript
本身是指生成HTML 结构的 script 脚本
,因为 HTML 是 hyper-text markup language
的缩写(超文本标记语言)。
即createElement 函数是用来生成 HTML DOM 元素的,也就是“ h ”
来源:
vue 模板如何解析 ,vue框架整体流程 作者: 孟繁贵
Vue render函数 - 简书 作者:kangaroo_v
终于搞懂了vue 的 render 函数(一) -_-|||_Amy的博客-CSDN博客_render函数 作者: __Amy