render函数
官方的说法:
字符串模板的代替方案,允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个
createElement
方法作为第一个参数用来创建VNode
。
关键词解释:
-
createElement: 创建一个
dom
元素 -
VNoed:用
javascript
对象来描述真实的Dom
,把Dom
标签,属性,内容都变成对象的属性
// 模版
<a class="demo" style="color: red" href="#">
generator VNode
</a>
// VNode描述
{
tag: 'a',
data: {
calss: 'demo',
attrs: {
href: '#'
},
style: {
color: 'red'
}
},
children: ['generator VNode']
}
这个js
对象,已经已经囊括了整个模板的所有信息,完全可以根据这个对象来构造真实dom
。
那么它有什么作用呢?
通过render
将template
模版描述成VNode
,然后进行一系列操作之后形成真实的DOM
进行挂载
也就是vue-cli3脚手架里面的这样一句话。
// main.js
render: function (h) { return h(App) }
h就是createElement
只不过是在函数里面的简写,原样子
render: function (createElement) { return createElement(App) }
借鉴:https://blog.csdn.net/HH921227/article/details/101066875
如有疑问或补充请提出来。 转载请附上链接,谢谢