Vue 3 新特性与最佳实践

Posted on | In

Vue3 作为 Vue.js 的重大升级，带来了 Composition API、Teleport、Fragments、Suspense 等一系列新特性。本文将详细介绍 Vue 3 的新特性，并结合代码示例，帮助开发者更高效地构建 Vue 应用。

1. Composition API

Vue 3 引入了 Composition API，使代码更具可复用性和可读性。

1.1 setup 函数

1
2
3
4
5
6
7
8
9
10
11
12
<script setup>
import { ref } from 'vue';

const count = ref(0);
const increment = () => {
  count.value++;
};
</script>

<template>
  <button @click="increment">Count: {{ count }}</button>
</template>

1.2 reactive vs ref

1
2
3
4
5
6
<script setup>
import { ref, reactive } from 'vue';

const count = ref(0);
const state = reactive({ count: 0 });
</script>

1.3 如何组织逻辑代码

使用 Composition API 可以将不同的逻辑抽离为独立的函数模块，例如：

1
2
3
4
5
6
7
8
// useCounter.ts
import { ref } from 'vue';

export function useCounter() {
  const count = ref(0);
  const increment = () => count.value++;
  return { count, increment };
}
1
2
3
4
5
6
7
8
9
<script setup>
import { useCounter } from './useCounter';

const { count, increment } = useCounter();
</script>

<template>
  <button @click="increment">Count: {{ count }}</button>
</template>

2. Teleport 组件

Teleport 允许将子组件渲染到 DOM 的其他位置。

1
2
3
4
5
<template>
  <teleport to="body">
    <div class="modal">This is a modal</div>
  </teleport>
</template>

使用场景

  • 弹窗（Modal）
  • 提示框（Tooltip）
  • 全局层级组件（如 Loading Spinner）

3. Suspense 组件

用于异步组件的加载。

1
2
3
4
5
6
7
8
9
10
<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      Loading...
    </template>
  </Suspense>
</template>

注意事项

  • 只适用于 <script setup> 或函数式组件中的异步组件
  • Suspense 的 fallback 不应太复杂，以避免性能问题

4. Fragments 组件

支持多个根节点。

1
2
3
4
5
6
<template>
  <>
    <h1>Title</h1>
    <p>Paragraph</p>
  </>
</template>

小提示

Fragments 是编译器层面支持，最终仍会转成普通元素包裹，因此对样式布局基本无影响。

5. 其他增强

更快的虚拟 DOM

Vue 3 在底层对 Virtual DOM 进行了重写，整体性能提升约 1.5~2 倍。

更好的 TypeScript 支持

Vue 3 完全用 TypeScript 重写，支持 IDE 自动提示和类型推导，更适合大型项目。

更轻量的打包体积

Tree-shaking 支持让 Vue 3 的打包更小，更精简。

6. 结论

Vue 3 通过 Composition API、Teleport、Suspense 等特性提升了代码组织能力和性能。掌握这些新特性，将让你的 Vue 开发更加高效。