render函数介绍

这是我参与11月更文挑战的第20天，活动详情查看：2021最后一次更文挑战

虚拟dom

DOM是文档对象模型(Document Object Model)的简写，在浏览器中通过js来操作DOM的操作性能很差，于是虚拟Dom应运而生。虚拟Dom就是在js中模拟DOM对象树来优化DOM操作的一种技术或思路。React和Vue2都使用了虚拟DOM技术，虚拟DOM并不是真正意义上的DOM，它作为一个轻量级的JavaScript对象，在状态发生变化时，会进行Diff运算，来更新发生变化的DOM，对于未发生变化的DOM节点，不予操作，由于不是全部重绘，大大提高更新渲染性能。当使用render函数描述虚拟DOM时，vue提供一个函数，这个函数是就构建虚拟DOM所需要的工具。官网上给他起了个名字叫 createElement。还有约定的简写叫 h, vm中有一个方法 _c, 也是这个函数的别名。

不难发现一个Vue的应用程序是如何运行起来的，模板通过编译生成AST，再由AST生成Vue的render函数（渲染函数），渲染函数结合数据生成Virtual DOM树，Diff和Patch后生成新的UI。

let app = new Vue({
    template: `<div>{{ msg }}</div>`,
    data () {
        return {
            msg: ''
        }
    }
})

总结：

1. render方法的实质就是生成template模板； 

2. 通过调用一个方法来生成，而这个方法是通过render方法的参数传递给它的；

3. 这个方法有三个参数，分别提供标签名，标签相关属性，标签内部的html内容 

4. 通过这三个参数，可以生成一个完整的木模板

备注：

1. render方法可以使用JSX语法，但需要Babel plugin插件；

2. render方法里的第三个参数可以使用函数来生成多个组件（特别是如果他们相同的话），只要生成结果是一个数组，且数组元素都是VNode即可；

注意：

render函数室友限制的，Vue.js 2.X支持，但是1.X无法使用。