对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

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