携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情 >>
好记性不如烂笔头，只有记下来，反复检查才能记住鸭！

拥有虚拟DOM的一些好处

最终要的是他让组件的渲染逻辑，完全从真实的DOM中解耦，并让他更直接的重用框架的运行时在其他环境中。
例如，Vue允许第三方开发人员创建自定义渲染解决方案，目标不仅仅是浏览器也包括IOS和Andoroid等原生环境，也可以使用API创建自定义渲染器直接渲染到WebGL，而不是DOM节点。
所以在Vue2中 实际上已经有了这种能力，但是在Vue2中提供的API，没有正式记录，并且需要分叉源代码，为了维护他，所以这给维护带来了很大的负担，对开发这些定制解决方案的开发人员在Vue3中，我们让自定义渲染器API成为一等公民，因此开发人员可以直接拉取Vue运行时核心作为依赖项，然后利用自定义渲染器API，构建自己的自定义渲染器

关于虚拟DOM的另一个重要方面，是他提供了能力，以编程方式构造、检查、克隆以及操作所需要的DOM结构，在实际返回渲染引擎之前，你可以做到这些，利用JS的全部能力。
有时在UI变成时，这些能力会尤为重要，你需要有一种充分灵活性的方案来应对千变万化的DOM，来表达潜在的逻辑，在你有时封装一些组件的时候，例如一连串的文本框，他们拥有复杂的交互逻辑，如果使用模板语法的话，需要将一些逻辑写在模板上，还有一些逻辑要写在JS里，而Runder函数可以让你把这些逻辑组合在一个地方，你通常不需要想太多，关于这些情况下的标记。

### Vue2的渲染函数

    render(h) {
        return h("div",{
            attrs:{
                id:"foo"
            },
            on:{
                click:this.onClick
            }
        },"hello")  
    },

在渲染函数中你会得到一个参数h，我们可以使用h函数来构建想要的虚拟DOM节点，简称vnode

1. vnode接收的第一个参数是类型，比如我们要创建一个DIV
2. 第二个参数是一个对象，包含vnode上的所有数据或属性
3. 在Vue2中你必须指明传递给节点的绑定类型，例如你要绑定属性，你必须把他嵌套在attrs对象下
4. 如果要绑定侦听器，你得把他列在on下面
5. 第三个参数是这个vnode的子节点，如果直接传递一个字符串，表明此节点只包含文本子节点，但是他也可以是数组，包含更多子节点，那么如果这里是一个数组，他会嵌套很多h调用

Vue3的渲染函数

    import { h } from "vue";
    render(){
        return h("div",{
            id:"foo",
            onClick:this.onClick
        },"hello")
    }

他有一个很明显的变化是，我们有了一个扁平的props结构

1. 现在当你调用h函数的时候，第二个参数是一个扁平的对象，你可以直接给他传递一个属性
2. 以on开头的事件都会呗自动绑定为一个监听器
3. 我们检查这个Key是否在原生DOM中存在这个属性，如果存在，我们会将其设置为property，如果不存在，我们将他设置为一个attribute

Runder函数的另一项改动是h函数现在是全局引入的，在Vue2的时候，如果你想要拆分一个比较大的Runder函数的时候，你必须将这个h函数的一部分传递给这些分割函数，而变成导入后，你可以将这个函数随意的分割，你可以使用很多次h函数。