vue2 和 vue3 设计上的区别

1. 性能改进

• 响应式系统的优化：

  • Vue 2：基于 Object.defineProperty 实现响应式，无法实现对数组的变化，对于对象需要递归便利监听每个属性。
  • Vue 3：采用了基于 Proxy 的全新响应式系统，Proxy可以直接监听数组的变化；proxy直接监听代理整个对象，而不是属性。

• 编译器优化：

  • Vue 3：引入了静态提升、缓存事件处理器、碎片化更新等多种编译优化技术，使得模板编译后的代码更加高效。
    • 静态提升是指在编译阶段将不变的静态内容提取到渲染函数外部，从而避免每次渲染时都重新创建这些内容。这包括静态的 HTML 结构和属性。
    • Vue 2 中，每次组件重新渲染时，模板中绑定的事件处理器函数都会被重新创建。Vue 3 通过缓存事件处理器来优化这一过程。即使组件重新渲染，事件处理器函数也不会重新创建，而是直接从缓存中获取。这减少了内存使用和处理器开销。
    • 碎片化更新（也叫 Patch Flag 优化）是 Vue 3 用来减少 DOM 更新的技术。通过在编译阶段给不同的节点打上特殊的标记 (Patch Flags)，Vue 3 在运行时可以只更新那些实际发生变化的部分，而不是进行整个树的对比和更新。

2. 组合式 API (Composition API)

• Vue 2：主要使用选项式 API (Options API)，通过 data、methods、computed、watch 等选项来组织代码。这种方式在大型组件中可能导致代码分散且不易管理。
• Vue 3：引入了组合式 API，允许通过 setup 函数使用 ref、reactive、computed、watch 等 API，更灵活地组织和复用代码逻辑，尤其适用于复杂逻辑或逻辑复用的场景。

3. 片段 (Fragments)

• Vue 2：一个组件必须有一个根节点，不能直接返回多个根元素。
• Vue 3：支持片段，允许组件返回多个根节点，从而减少不必要的 DOM 元素层级。

4. 更好的 TypeScript 支持

• Vue 2：虽然支持 TypeScript，但并不是设计之初的重点，因此使用时可能会遇到类型推断不完整等问题。
• Vue 3：从底层开始就对 TypeScript 进行了更好的支持，Vue 3 的核心代码完全使用 TypeScript 编写，类型推断更完整，开发体验更好。

5. Vue 3 的树形摇树优化 (Tree Shaking)

• Vue 2：Vue 2 的代码库在打包时不能很好地进行摇树优化，可能会打包一些未使用的代码。
• Vue 3：通过模块化的设计，使得未使用的部分代码在打包时可以被自动移除，减少打包后的体积。

6. 自定义渲染器

• Vue 2：虽然可以通过 render 函数自定义渲染逻辑，但框架的渲染机制是固定的。
• Vue 3：提供了更灵活的自定义渲染器 API，可以更自由地控制渲染过程，适用于非 DOM 平台或自定义渲染场景。

7. 事件处理器缓存

• Vue 2：在模板中每次渲染都需要重新绑定事件处理函数，这会带来一些性能开销。
• Vue 3：通过缓存事件处理器，减少了不必要的重新绑定，从而提升了渲染性能。

8. 响应式 API

• Vue 3：新增了 ref、reactive、toRefs、readonly 等响应式 API，使得响应式数据的定义和处理更加灵活方便。

9. Teleport 组件

• Vue 3：引入了 Teleport 组件，允许你在不改变组件结构的情况下，将其渲染到 DOM 树中的其他位置。

10. 异步组件和 Suspense

• Vue 3：增强了异步组件的支持，并引入了 Suspense 组件，用于处理异步内容的加载过程，提供了更好的用户体验。

11. 自定义指令 API 的变化

• Vue 3：在指令的生命周期钩子中，移除了 bind 和 componentUpdated 钩子，新增了 beforeMount、mounted、beforeUpdate、updated 钩子。

12. 生命周期钩子的命名变化

• Vue 3：生命周期钩子的命名进行了调整，使其更具一致性和语义化：
  • beforeCreate -> setup()
  • created -> setup()
  • beforeMount -> onBeforeMount
  • mounted -> onMounted
  • beforeUpdate -> onBeforeUpdate
  • updated -> onUpdated
  • beforeDestroy -> onBeforeUnmount
  • destroyed -> onUnmounted