【vue】vue2 和 vue3 的区别，响应式/性能提升/渲染函数/插槽

vue2/vue3  的对比

1. 响应式原理
   1. vue2 使用 defineProperty
   2. vue3 使用 proxy
2. api
   1. vue2 是选项式 options API
      1. 基于对象的方式，将组件的选项 data，methods 等作为组件实例属性
      2. 代码逻辑比较复杂，难以维护
      3. data 必须是函数
      4. 使用 mixin 复用相同逻辑
         1. 命名冲突
         2. 数据来源不清楚
   2. vue3 引入了组合式 composition api
      1. 更灵活，强大的组件状态和逻辑管理方式，高内聚，第耦合
      2. 代码组织和重用更加方便
      3. 基于函数的方式
      4. 使用 ref，reactive 等函数来创建响应式数据
      5. 使用函数而不是对象，提高 tree-shaking优化，减小打包体积
      6. 更容易实现逻辑复用
      7. 不适用 this，减少了 this 指向不明的问题
3. 编译时优化
   1. vue3 在编译时会对模板进行静态分析，并且会将模板编译成优化过的渲染函数。这些渲染函数是静态的，不依赖于运行时的状态，因此可以提高渲染性能。
4. 虚拟 dom 优化
   1. Vue 3 对虚拟 DOM 进行了一些优化，包括对静态节点的标记和缓存，以及更高效的 Patch 算法，从而提高了渲染性能。
   2. dff 算法策略
      1. 深度优先，同层比较：
         1. 比较只会在同层级进行, 不会跨层级比较
         2. 比较的过程中，循环从两边向中间收拢
5. 插槽变化
   1. vue3 中，作用域插槽被 slot 语法替换
6. 渲染函数变化
   1. vue2 使用 createElement
   2. vue3 使用 h 函数来代替
7. fragment 支持
   1. vue3 的渲染函数支持返回片段，可以在渲染函数中直接返回多个跟节点
8. 动态组件
   1. vue2 使用 component
   2. vue3 的动态组件使用 :is 指令来指定动态组件类型
9. 模版
   1. vue3 模版支持多个根结点
10. Teleport 支持：
    1. Vue 3 中引入了 Teleport（传送门）特性，允许组件在 DOM 树中的任何位置渲染自己的内容，与 Vue 2 中的 slot 指令有所不同。
11. typescript 
    1. vue3 支持 ts
12. 全局 API重构
    1. vue2 使用 Vue.xx()
    2. vue3 使用 app.xx()
13. tree-shaking
    1. vue2 默认不支持tree-shaking ，但是可以使用 webpack等工具实现
       1. 基于 cjs 语法
       2. 基于单例的，捆绑程序无法检测到该对象的哪些属性在代码中被使用到
    2. Vue3 源码引入 tree-shaking，将全局 API 进行分块，不使用某些功能，不会包含在基础包中
       1. 基于 esm，借助 esm 静态编译思想，再编译时就能确定模块的依赖关系
       2. 编译阶段利用ES6 Module判断哪些模块已经加载
       3. 判断那些模块和变量未被使用或者引用，进而删除对应代码
       4. 这个 tree-shaking 原理和webpack的tree-shaking原理一样
    3. Vue 3 支持更好的 Tree-shaking，可以更有效地剔除未使用的代码，减少最终打包文件的大小。
    4. 模块的静态分析
    5. 按需引入
    6. 编译时优化
    7. 剔除未使用的导出
    8. vue3 更小的打包体积
    9. vue3 程序执行时间更快

vue3性能提升的体现

1. 编译阶段渲染函数的优化
   1. diff 算法优化
   2. 静态提升
      1. 不参与更新的元素，会做静态提升
      2. 只会被创建一次，在渲染时直接复用
      3. 免去了重复的创建节点
   3. 事件监听缓存
      1. 当一个事件监听器被创建时，它会被缓存起来，并在下次重新渲染时重复使用，除非监听器的依赖发生了变化，才会重新创建。这样就避免了不必要的函数创建和销毁，提高了性能。
   4. SSR 优化
      1. 当静态内容大到一定量级时候，会用createStaticVNode方法在客户端去生成一个static node，这些静态node，会被直接innerHtml，就不需要创建对象，然后根据对象渲染
2. 源码体积优化
   1. vue3 整体体积变小，移除了不常用的 API
      1. 移除 filter 过滤器，使用计算属性和方法可以实现
      2. 移除 v-on.native 修饰符，值用使用v-on直接来监听原生事件
      3. $on, $off, $once 方法: 在 Vue.js 3 中，不再推荐直接访问实例上的 $on, $off, $once 方法来进行事件的监听和解绑，而是使用 Composition API 提供的 onMounted, onUnmounted, onBeforeUnmount 等生命周期钩子函数来进行事件的绑定和解绑。
         1. vue2 中的$on 本质上是基于发布-订阅模式实现的
         2. vue3 不支持之后我们可以自己实现订阅发布或者使用第三方库
            1. @vue/event-emitter
            2. mitt
   2. 使用 tree-shaking
      1. 原理是 esm 的静态编译
3. 响应式系统的优化
   1. vue3 使用 proxy
      1. 可以动态监听对象属性的添加
      2. 可以监听数组的索引和数组length属性
      3. 可以监听删除属性
4. 语法/api的优化
   1. 组合式API