对vue中的render理解

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

如有疑问或补充请提出来。 转载请附上链接，谢谢