Vue3 三个核心模块

一、Reactivity Module 响应式模块

创建响应对象，并观察其变化，当使用这些代码时，它们会被跟踪，所以当响应式对象发生变化，它们可以在以后运行

二、Compiler Module 编译器模块

获取HTML模板，并将他们编译成渲染函数

三、Render Module 渲染模块

1. render phase渲染阶段

   将渲染函数返回一个虚拟DOM节点

2. mount phase挂载阶段

   将虚拟DOM节点 调用DOM API来创建网页

3. patch phase打补丁阶段

   将旧的虚拟节点和新的虚拟节点进行对比，只更新网页变化的部分

举个简单组件的例子

第一步：编译器模块将模板编译成渲染函数

第二步：响应式模块 初始化响应对象 进行数据观测

第三步：渲染模块 调用render函数，它引用了响应对象，并观察响应对象的变化，render函数返回一个虚拟DOM节点，接下来在挂载阶段，调用mount函数，使用虚拟DOM节点创建web页面

第四步：如果响应式数据发生变化，渲染器再次调用render函数，创建一个新的虚拟DOM节点，新的虚拟节点和旧的虚拟节点发送到补丁函数中，之后跟新我们的网页

尤玉溪谈render函数比模板语法的优势

当写一些比较复杂的逻辑，模板语法会限制你，模板语法更容易表达潜在的逻辑，当你在模板中加入了很多逻辑，而你还是有很多逻辑，render函数会将这些逻辑组合在一个地方，你通常不需要想太多

vue2 与 vue3 render渲染函数对比

vue2 render函数

 // 使用render函数来创建vnode虚拟节点
 render(h){
 // 给h回调函数传递的第一个参数为类型
 // 第二个参数为vnode所有数据或属性
 // 第三个参数为vnode子节点，只能是文本子节点或一个数组包含更多子节点
     return h('div', {
         attrs: {
         // 绑定属性
             id: 'foo'
         },
         on: {
         // 绑定事件监听
          click: this.onClick
         }
     }, 'hello')
 }

vue3 render函数

 import { h } from 'vue'
 render() {
     return h('div', {
         id: 'foo',
         // on开头的自动绑定为一个监听器
         onClick: this.onClick
     }, 'hello')
 }

vue3 render函数的优势

1. 简化了render函数的第二个参数，扁平的props结构，将属性和事件写在一起，on开头的自动绑定为一个监听器,你不再需要考虑是将其作为attribute绑定还是作为DOM属性绑定
2. h函数不再是作为render函数的参数传入，而是写在了vue3的全局api上，这是因为vue2的h函数绑定在了当前组件实例上，当你想拆分一个大的渲染函数，你必须将h函数传递给这些分割函数，所以非常麻烦，如果是全局引入h函数就不会有此麻烦

vue3 解析模块 和 渲染模块

当给某个事件传递赋值内联函数的时候，vue3会将foo函数返回的结果进行缓存，而vue2则每次重新渲染页面的时候都会执行该函数