关于Vistual Dom已经vue3的三大机制

<div>Hello</div> ------->render function ----> Vnode

vue3的三大机制分别为

1）响应式模块

• 创建相应对象，观察变化 2）编译器模块
• 将Html template转变为 render function 也就是 return h('div', {}, 'XXXX}; 3）渲染模块
• render(渲染）：从render function 得到Vnode
• mount（挂载）：vnode转变为真正的web html
• patch(补丁）：当响应变化时候，对vnode进行compare and update。

visual dom的好处

1. 组件渲染逻辑可以和html dom 解耦
2. 用户可以自定义渲染器，为其他目标浏览器服务比如OS，android，而不只是web浏览器
3. 可以编程式操控DOM，更大强大，效率高效。

vue3与vue2的render function的区别

• 1） h在vue3作为全局函数存在，而不是作为函数参数存在。这样方便函数的迁移，分割。
• 2） vue3的render function 更扁平一些。 原则：检查key在原生dom中作为proprty存在不存在，存在的话就设置为property，不存在设置为attibute， 以on开头的设置为event。

    return h('div', {
        id:'foo', 
        onClick: this.onClick
       }, 'hello')}