全面总结Vue 3.0的新特性

我们来对 Vue 3.0（于 2022年成为新的默认版本）的新特性进行一次全面、系统的总结。Vue 3 是一次彻底的革新，其核心是更快、更小、更易于维护，同时更好地支持大规模应用。

一、核心架构革新：Composition API 与 响应式系统

这是 Vue 3 最革命性的变化，解决了 Vue 2 在复杂组件代码组织上的痛点。

1. Composition API

目的：通过逻辑相关性来组织代码，而不是像 Options API (data, methods, computed, watch) 那样通过选项类型来组织。

• 核心函数：

  • setup(): 组件逻辑的入口点，在组件创建之前执行。它接收 props 和 context 参数。

  • ref(): 定义一个响应式的基本类型数据（也可以是对象，内部通过 .value 访问）。

  • reactive(): 定义一个响应式的对象或数组。

  • computed(): 创建计算属性。

  • watch() 和 watchEffect(): 创建侦听器。watchEffect 会自动收集其回调函数中使用的响应式依赖。

• 优势：

  • 更好的逻辑复用：通过自定义组合式函数 (Composables) 可以轻松提取和复用逻辑（替代了 Vue 2 的 mixins，解决了命名冲突和来源不清晰的问题）。著名的库如 VueUse 就是基于此构建的。

  • 更灵活的代码组织：可以将与同一功能相关的 data, method, watch, computed 放在一起，而不是分散在 Options 的各个部分。

  • 更好的 TypeScript 支持：使用函数时，类型推导比 Options API 更容易、更准确。

示例：一个计数器功能

<script setup>
import { ref, computed } from 'vue'

// 逻辑相关的代码都在一起
const count = ref(0)
const doubleCount = computed(() => count.value * 2)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">{{ count }} * 2 = {{ doubleCount }}</button>
</template>

2. 全新的响应式系统

Vue 3 使用 Proxy 重写了响应式系统，替代了 Vue 2 基于 Object.defineProperty 的实现。

• 优势：

  • 全面检测变化：可以监听动态添加的属性、删除属性、数组的索引和 length 修改等，解决了 Vue 2 的诸多限制。

  • 更好的性能：Proxy 是浏览器原生支持，性能更好。初始化和更新速度都有提升。

  • 支持 Map、Set、WeakMap、WeakSet：可以原生地使这些集合类型变为响应式。

二、性能提升

1. 更快的渲染速度

• 重写 Virtual DOM (虚拟 DOM)：优化了 diff 算法，在编译时提供了更多的提示信息，减少了运行时开销。

  • 静态节点提升 (Static Hoisting)：将静态节点在编译阶段提升，在渲染时直接复用，跳过 diff 过程。

  • 补丁标志 (Patch Flags)：在编译时对动态节点标记其需要更新的类型（如 CLASS, TEXT, PROPS），diff 时只需检查这些有标志的节点，极大减少了比较次数。

  • 树结构拍平 (Tree Flattening)：将模板中静态的父节点和其动态子节点分开，大大减少了虚拟 DOM 树的层级，提升了 diff 效率。

2. 更小的体积

• 更好的 Tree-shaking：Vue 3 的模块结构设计得非常利于 Tree-shaking。如果你没有使用 transition、v-model 等某些功能，这些功能的代码将不会被打包到最终的产物中。核心运行时只有 ~10kb gzipped。

三、更好的 TypeScript 支持

Vue 3 完全使用 TypeScript 重写，这意味着：

• 完整的类型定义：提供了非常全面和准确的 TypeScript 类型定义。

• Composition API 与 TS 完美结合：使用 ref, reactive, computed 等 API 时，能获得完美的类型推断。

• TSX 支持：对 TSX 的支持变得更加自然和简单。

四、新的组件：Fragment, Teleport, Suspense

1. Fragment (片段)

• 组件可以拥有多个根节点，无需再用一个多余的 div 包裹。这简化了模板结构和 CSS 样式编写。

2. Teleport (传送)

• 可以将组件的一部分模板“传送”到 DOM 中的其他位置（通常是 body 末尾），非常适合处理模态框 (Modal)、弹出框 (Toast)、提示框 (Tooltip) 等需要避免父组件样式影响的情景。

• 示例：将一个模态框渲染到 body 下。

  <teleport to="body">
    <div class="modal" v-if="showModal">...</div>
  </teleport>

3. Suspense (实验性)

• 提供了一种在组件树中协调异步依赖（通常是异步组件）的机制，可以在等待异步组件解析时显示一个加载状态。

• 示例：

  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>

五、其他 API 和变更

1. 生命周期钩子更名

为了与 Composition API 保持一致，部分钩子被重命名（旧名仍可用）：

• beforeDestroy -> beforeUnmount

• destroyed -> unmounted

Composition API 中的生命周期函数都以 on 开头，如 onMounted, onUpdated。

2. 多个 v-model

• 在同一个组件上可以绑定多个 v-model，替代了 Vue 2 的 .sync 修饰符。

• 示例：<UserForm v-model:firstName="first" v-model:lastName="last" />

3. 自定义渲染器 API

• 暴露了创建自定义渲染器的 API，允许开发者基于 Vue 的运行时核心，针对非 DOM 环境（如小程序、Canvas、Native）进行渲染。

4. 全局 API 变更

• 全局 API（如 Vue.component, Vue.directive）改为应用程序实例（由 createApp 创建）的方法，避免了在同一个页面的多个 Vue 应用之间产生冲突。

• 示例：

  // Vue 2
  const app = new Vue({ ... })
  Vue.component('comp', component)
  
  // Vue 3
  const app = Vue.createApp({ ... })
  app.component('comp', component) // 作用于此app实例，而不是全局

六、官方生态更新

Vue 3 的发布也带动了其官方核心生态工具的升级：

• Vue Router 4：为 Vue 3 设计，提供了 Composition API 的支持。

• Vuex 4：提供了与 Vue 3 的兼容性版本。

• Vite：由 Vue 作者开发的下一代前端构建工具，利用原生 ES 模块提供极速的热更新和服务启动体验，已成为 Vue 项目的推荐构建工具。

总结对比表

Vue 3 的核心价值在于：它通过 Composition API 和基于 Proxy 的响应式系统，为开发者提供了更强的能力来构建可维护性高、逻辑清晰的大型应用程序，同时在性能和体积上实现了显著的优化，确保了其在现代前端框架中的竞争力。对于新项目，强烈推荐直接从 Vue 3 开始。