Vue 3 入门指南

Vue 3 是 Vue.js 的最新主要版本，带来了许多新特性和性能改进。本文将介绍 Vue 3 的核心概念和使用方法。

1. 组合式 API (Composition API)

组合式 API 是 Vue 3 最显著的新特性，它允许我们按照功能组织代码，而不是按照选项类型。

Setup 函数

setup 函数是组合式 API 的入口点，在组件创建之前执行。

<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

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

响应式系统

Vue 3 使用 ref 和 reactive 来创建响应式数据。

import { ref, reactive, computed } from 'vue';

// 使用 ref 创建响应式基本类型
const count = ref(0);

// 使用 reactive 创建响应式对象
const user = reactive({
  name: '张三',
  age: 25
});

// 使用 computed 创建计算属性
const doubleCount = computed(() => count.value * 2);

2. 生命周期钩子

Vue 3 的生命周期钩子可以直接从 vue 导入并在 setup 函数中使用。

import { onMounted, onUpdated, onUnmounted } from 'vue';

onMounted(() => {
  console.log('组件已挂载');
});

onUpdated(() => {
  console.log('组件已更新');
});

onUnmounted(() => {
  console.log('组件已卸载');
});

3. 自定义组合式函数

我们可以创建自定义组合式函数来复用逻辑。

// composables/useCounter.js
import { ref, computed } from 'vue';

export function useCounter(initialValue = 0) {
  const count = ref(initialValue);
  const doubleCount = computed(() => count.value * 2);
  
  const increment = () => count.value++;
  const decrement = () => count.value--;
  const reset = () => count.value = initialValue;
  
  return {
    count,
    doubleCount,
    increment,
    decrement,
    reset
  };
}

// 在组件中使用
import { useCounter } from './composables/useCounter';

const { count, doubleCount, increment } = useCounter(10);

4. 响应式 API

Ref

ref 用于创建响应式的基本类型值。

import { ref } from 'vue';

const count = ref(0);
console.log(count.value); // 0

count.value = 1;
console.log(count.value); // 1

Reactive

reactive 用于创建响应式的对象。

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  user: {
    name: '张三'
  }
});

state.count++;
console.log(state.count); // 1

Computed

computed 用于创建基于其他响应式数据的计算属性。

import { ref, computed } from 'vue';

const count = ref(0);
const doubleCount = computed(() => count.value * 2);

console.log(doubleCount.value); // 0
count.value = 1;
console.log(doubleCount.value); // 2

Watch

watch 用于监听响应式数据的变化。

import { ref, watch } from 'vue';

const count = ref(0);

watch(count, (newValue, oldValue) => {
  console.log(`Count changed from ${oldValue} to ${newValue}`);
});

count.value = 1; // 输出: Count changed from 0 to 1

5. 组件通信

Props

父组件通过 props 向子组件传递数据。

<!-- 父组件 -->
<template>
  <ChildComponent :message="parentMessage" />
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const parentMessage = ref('Hello from parent');
</script>

<!-- 子组件 -->
<template>
  <div>{{ message }}</div>
</template>

<script setup>
defineProps({
  message: String
});
</script>

Emits

子组件通过 emits 向父组件发送事件。

<!-- 子组件 -->
<template>
  <button @click="emit('custom-event', 'Hello from child')">Click me</button>
</template>

<script setup>
const emit = defineEmits(['custom-event']);
</script>

<!-- 父组件 -->
<template>
  <ChildComponent @custom-event="handleEvent" />
</template>

<script setup>
import ChildComponent from './ChildComponent.vue';

const handleEvent = (message) => {
  console.log(message); // 输出: Hello from child
};
</script>

6. 新特性

Teleport

Teleport 允许我们将组件的内容渲染到 DOM 树的其他位置。

<template>
  <Teleport to="#modal-container">
    <div class="modal">
      <h2>Modal</h2>
      <p>This is a modal</p>
    </div>
  </Teleport>
</template>

Suspense

Suspense 允许我们在组件加载完成前显示一个 fallback 内容。

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

<script setup>
const AsyncComponent = defineAsyncComponent(() => import('./AsyncComponent.vue'));
</script>

多根节点组件

Vue 3 支持多根节点组件。

<template>
  <div>First root</div>
  <div>Second root</div>
</template>

7. 性能优化

虚拟 DOM 改进

Vue 3 的虚拟 DOM 实现更加高效，减少了运行时开销。

树摇 (Tree Shaking)

Vue 3 支持树摇，只打包使用的功能，减少包大小。

响应式系统优化

Vue 3 的响应式系统使用 Proxy，提供了更好的性能和更多的特性。

8. 与 TypeScript 集成

Vue 3 对 TypeScript 提供了更好的支持。

<template>
  <div>{{ user.name }}</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

interface User {
  name: string;
  age: number;
}

const user = ref<User>({
  name: '张三',
  age: 25
});
</script>

9. 迁移指南

从 Vue 2 迁移

1. 安装 Vue 3：npm install vue@latest
2. 更新依赖：确保所有依赖都支持 Vue 3
3. 修改代码：
   • 将选项式 API 迁移到组合式 API（可选）
   • 更新生命周期钩子
   • 处理 breaking changes

常见问题

• Filter 已移除：使用计算属性或方法替代
• $on, $off, $once 已移除：使用第三方库如 mitt
• Vue.set 已移除：使用 reactive 或 ref

10. 最佳实践

1. 使用组合式 API：按照功能组织代码
2. 使用 TypeScript：提供类型安全
3. 使用 Vite：获得更快的开发体验
4. 组件拆分：将复杂组件拆分为更小的组件
5. 状态管理：使用 Pinia 作为状态管理库
6. 路由：使用 Vue Router 4
7. 测试：使用 Vitest 进行单元测试

总结

Vue 3 带来了许多令人兴奋的新特性，包括组合式 API、更好的 TypeScript 支持、性能优化等。通过学习和使用这些新特性，我们可以构建更加高效、可维护的前端应用。