Vue 3 从入门到进阶：快速上手指南

Vue 3 是 Vue.js 的最新版本，引入了许多强大的新特性，如 Composition API、全新的响应式系统等，为开发者提供了更高的灵活性和性能优化。本文将带你快速了解 Vue 3 的核心概念，并提供代码示例帮助你上手。

一、Vue 3 新特性概览

1. Composition API

Composition API 是 Vue 3 的核心改进之一，提供了更加灵活的组件逻辑组织方式。

示例：

<script lang="ts">
import { defineComponent, ref, computed } from 'vue';

export default defineComponent({
  setup() {
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2);

    const increment = () => {
      count.value++;
    };

    return { count, doubleCount, increment };
  },
});
</script>

优势：

• 更易于组织和复用代码。
• 逻辑更清晰，减少组件间的耦合。

2. 全新的响应式系统

Vue 3 使用 Proxy 替代了 Vue 2 的 Object.defineProperty，性能显著提升。

特点：

• 支持数组、对象动态属性的监听。
• 改进了调试体验。

3. Teleport

Teleport 提供了一种更简单的方法，将 DOM 元素渲染到组件树之外的任意位置。

示例：

<template>
  <teleport to="#modal">
    <div class="modal">这是一个弹窗</div>
  </teleport>
</template>

二、快速创建 Vue 3 项目

Vue 3 推荐使用 Vite 作为构建工具。以下是创建项目的步骤：

1. 安装 Vue CLI 或 Vite

安装 Vite

npm create vite@latest my-vue3-app -- --template vue-ts
cd my-vue3-app
npm install
npm run dev

安装 Vue CLI（备用）

npm install -g @vue/cli
vue create my-vue3-app
cd my-vue3-app
npm run serve

2. 项目结构

• src/：存放项目主要代码。
• public/：静态资源目录。
• vite.config.ts：Vite 配置文件。

三、Vue 3 示例：实现一个 Todo List

下面是一个简单的 Todo List 应用，展示 Vue 3 的基础功能。

代码实现：

<template>
  <div>
    <h1>Todo List</h1>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="添加任务" />
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        <span>{{ todo }}</span>
        <button @click="removeTodo(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

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

export default defineComponent({
  setup() {
    const newTodo = ref('');
    const todos = ref<string[]>([]);

    const addTodo = () => {
      if (newTodo.value.trim()) {
        todos.value.push(newTodo.value.trim());
        newTodo.value = '';
      }
    };

    const removeTodo = (index: number) => {
      todos.value.splice(index, 1);
    };

    return { newTodo, todos, addTodo, removeTodo };
  },
});
</script>

<style>
input {
  margin-bottom: 10px;
}
li {
  list-style: none;
  margin: 5px 0;
}
button {
  margin-left: 10px;
  color: red;
}
</style>

四、常见问题与解决方案

1. 如何升级现有 Vue 2 项目到 Vue 3？

• 使用官方工具 Vue Migration Helper。
• 按照升级指南逐步替换 Vue 2 API。

2. TypeScript 的最佳实践？

• 定义类型接口，提升代码可维护性。
• 使用 defineComponent 辅助函数。

3. 使用 Vue Router 和 Vuex？

Vue 3 的 Router 和 Vuex 也进行了升级，推荐参考 官方文档 和 Vuex 文档。

五、结语

Vue 3 的新特性为开发者带来了更高的灵活性和性能提升，同时也更适合与现代工具链（如 TypeScript 和 Vite）结合使用。希望本文对你快速上手 Vue 3 有所帮助。如果你有任何问题，欢迎在评论区留言！

关注我，获取更多前端开发技巧！