学习 Vue 3：前端开发者的必备入门知识 – wiki词典

作者： /

学习 Vue 3：前端开发者的必备入门知识

在快速发展的前端世界中，选择一个高效、易学且功能强大的框架是每位开发者职业生涯中的重要决策。Vue.js 凭借其渐进式框架的特性、出色的性能和友好的社区，成为了众多前端开发者的首选。特别是 Vue 3，带来了许多激动人心的新特性和优化，使其在构建现代、高性能的单页应用（SPA）和复杂的用户界面时更具吸引力。

本文将带领你深入了解 Vue 3 的核心概念和必备知识，助你快速入门，成为一名合格的 Vue 3 开发者。

1. 为什么选择 Vue 3？

在深入学习之前，我们先来探讨一下 Vue 3 相比于 Vue 2 或其他框架的优势：

  • 性能提升： Vue 3 进行了重写，采用了 Proxy 作为响应式系统，带来了更快的渲染速度和更小的包体积。
  • Composition API： 这是 Vue 3 最重要的特性之一，提供了更灵活、更可维护的代码组织方式，尤其适用于大型复杂组件。
  • 更好的 TypeScript 支持： Vue 3 从设计之初就考虑了 TypeScript，提供了更完善的类型推导和更好的开发体验。
  • 更小的包体积： 通过摇树优化（Tree-shaking），Vue 3 的核心库体积更小。
  • Teleport、Fragments、Suspense： 新增的内置组件和特性，解决了 Vue 2 中一些常见的开发痛点。

2. Vue 3 核心概念

2.1 响应式系统：Proxy 的魔力

Vue 3 的响应式系统是其性能提升的关键。它放弃了 Vue 2 中基于 Object.defineProperty 的实现，转而使用 ES6 的 Proxy。

为什么 Proxy 更好？

  • 完整覆盖： Proxy 可以劫持对象的所有操作（包括属性的添加、删除），而 Object.defineProperty 只能劫持已存在的属性。这意味着在 Vue 3 中，你无需担心对象新增属性无法响应的问题。
  • 性能： Proxy 在某些场景下具有更好的性能表现，尤其是在处理大型数据结构时。
  • 更直接的数组变化侦测： Vue 3 可以直接侦测数组的索引变化和 length 变化，无需像 Vue 2 那样对数组方法进行额外封装。

2.2 API 风格：Composition API vs. Options API

Vue 3 引入了 Composition API，但仍保留了 Options API。理解两者的区别和适用场景至关重要。

  • Options API (Vue 2 风格):

    • 通过 data、methods、computed、watch 等选项来组织组件逻辑。
    • 适用于中小型组件，代码结构清晰，易于理解。
    • 缺点：当组件逻辑复杂时，相同功能的代码（例如处理某个 feature）可能会分散在不同的选项中，导致逻辑难以复用和维护（“高内聚低耦合”的不足）。

    “`vue


    “`

  • Composition API (Vue 3 推荐):

    • 通过 setup 函数，利用 ref、reactive、computed、watch 等函数来组织组件逻辑。
    • 允许开发者将同一功能的逻辑代码聚合在一起，提高了代码的可读性、可维护性和复用性。
    • 解决了 Options API 在大型组件中逻辑分散的问题。

    “`vue


    ```

何时使用 Composition API？
当你的组件逻辑复杂、需要跨组件复用逻辑（通过 Composable 函数）、或者偏好更函数式的编程风格时，Composition API 会是更好的选择。对于简单的组件，Options API 依然是可用的。

2.3 ref 和 reactive

这是 Composition API 中定义响应式数据的两种主要方式：

  • ref:

    • 用于将基本数据类型（如 string, number, boolean）或对象转换为响应式数据。
    • 其值必须通过 .value 访问和修改。
    • 在 <template> 中，Vue 会自动解包 ref，所以你无需使用 .value。

    ```javascript
    import { ref } from 'vue';
    const message = ref('Hello Vue 3');
    const user = ref({ name: 'Alice', age: 30 });

    console.log(message.value); // Hello Vue 3
    user.value.age++;
    ```

  • reactive:

    • 用于将对象（包括数组）转换为响应式数据。
    • 直接返回对象的 Proxy，无需 .value 即可访问和修改属性。
    • 不能用于基本数据类型。
    • 如果你将响应式对象的属性解构或赋值给新变量，会失去响应性。

    ```javascript
    import { reactive } from 'vue';
    const state = reactive({
    count: 0,
    user: { name: 'Bob' }
    });

    state.count++;
    state.user.name = 'Charlie';
    ``
    **注意：** 推荐优先使用    ref，因为它在任何情况下都能保持一致的.value访问模式，并且在




    ```

  • Emits (子传父): 子组件通过触发事件通知父组件。

    ```vue





    ```

2.7 生命周期钩子

Vue 3 的生命周期钩子名称有所变化，并且在 setup 函数中需要导入并使用。

Options API (Vue 2/3) Composition API (Vue 3) 描述
beforeCreate setup() (替代) 实例初始化前，响应式数据和事件未配置
created setup() (替代) 实例创建后，响应式数据已配置，模板未挂载
beforeMount onBeforeMount 模板编译完成，但尚未挂载到 DOM
mounted onMounted 组件挂载到 DOM 后
beforeUpdate onBeforeUpdate 响应式数据更新，DOM 重新渲染前
updated onUpdated DOM 重新渲染和修补后
beforeUnmount onBeforeUnmount 组件实例被卸载前
unmounted onUnmounted 组件实例被卸载后
errorCaptured onErrorCaptured 捕获子孙组件的错误
renderTracked (仅开发模式) onRenderTracked (仅开发模式) 侦测渲染过程中响应式依赖
renderTriggered (仅开发模式) onRenderTriggered (仅开发模式) 侦测响应式依赖导致重新渲染

在 <script setup> 中使用：

```vue

```

2.8 内置指令

Vue 的指令（Directives）提供了对 DOM 元素的底层操作能力。常用指令包括：

  • v-if, v-else-if, v-else: 条件渲染。
  • v-for: 列表渲染。
  • v-bind (:): 属性绑定。
  • v-on (@): 事件监听。
  • v-model: 双向数据绑定（在 input, textarea, select 等表单元素上）。

2.9 新增特性：Teleport, Fragments, Suspense

  • Teleport: 允许你将组件的模板内容渲染到 DOM 树中的不同位置，例如将模态框渲染到 <body> 下，避免样式或层级问题。

    vue
    <template>
    <button @click="showModal = true">Open Modal</button>
    <Teleport to="body">
    <div v-if="showModal" class="modal">
    <!-- Modal content -->
    </div>
    </Teleport>
    </template>

  • Fragments: Vue 3 组件现在可以拥有多个根节点，无需像 Vue 2 那样必须包裹在一个 div 中。

    vue
    <!-- MyComponent.vue (Vue 3) -->
    <template>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
    </template>

  • Suspense: 用于处理异步组件和数据加载状态。它允许你在等待异步操作完成时显示一个加载状态（fallback 内容）。

    vue
    <template>
    <Suspense>
    <template #default>
    <AsyncComponent />
    </template>
    <template #fallback>
    <div>Loading...</div>
    </template>
    </Suspense>
    </template>
    Suspense 在实际项目中通常与异步组件、路由懒加载等结合使用。

3. 构建工具和生态

3.1 Vite：新一代构建工具

Vue 3 的官方推荐构建工具是 Vite，它提供了极速的开发服务器启动、即时热模块更新（HMR）以及优化的生产构建。相比于 Vue CLI (基于 Webpack)，Vite 带来的开发体验是革命性的。

创建 Vue 3 项目 (使用 Vite):

```bash
npm create vue@latest

或者

yarn create vue@latest

或者

pnpm create vue@latest
```
按照提示选择你的项目配置即可。

3.2 路由：Vue Router 4

Vue Router 是 Vue.js 的官方路由管理器。Vue Router 4 专门为 Vue 3 设计，支持 Composition API，提供了更灵活的路由配置和导航控制。

安装: npm install vue-router@4

3.3 状态管理：Pinia (推荐) 或 Vuex 4

  • Pinia: Vue 官方推荐的新一代状态管理库。它更轻量、API 更简洁，完全支持 TypeScript，且不需要嵌套模块。

    安装: npm install pinia
    * Vuex 4: Vuex 4 是 Vuex 的最新版本，兼容 Vue 3，但相比 Pinia，其 API 和概念略显复杂。对于新项目，强烈建议使用 Pinia。

4. 快速开始：一个简单的计数器应用

```bash

1. 创建一个新的 Vue 3 项目

npm create vue@latest my-vue3-app
cd my-vue3-app

2. 安装依赖

npm install

3. 运行开发服务器

npm run dev
```

现在，修改 src/App.vue 文件：

```vue

```
保存文件后，浏览器中的应用会立即更新，你就可以看到一个简单的计数器。

5. 学习路线和最佳实践

  1. 从基础开始： 掌握 HTML、CSS、JavaScript 的基础知识是前提。
  2. 理解响应式原理： 深入了解 ref、reactive、computed、watch 的工作机制。
  3. 熟练使用 Composition API： 多加练习，尝试将不同的功能模块化为独立的 Composable 函数。
  4. 掌握组件通信： 熟练使用 props 和 emit，了解 provide/inject（用于深层组件通信）。
  5. 学习生态系统： 掌握 Vue Router 进行路由管理，使用 Pinia 进行状态管理。
  6. 熟悉开发工具： 掌握 Vite 和 Vue Devtools 插件的使用。
  7. 阅读官方文档： Vue 官方文档是最好的学习资源，务必仔细研读。
  8. 实践项目： 理论结合实践，从小项目开始，逐步挑战更复杂的应用。
  9. 关注 TypeScript： 随着项目规模的增长，TypeScript 会成为你强大的盟友。

结语

Vue 3 带来了显著的改进，提升了开发效率和应用性能。Composition API 的引入更是为 Vue.js 的组件设计带来了新的范式，使其在处理大型应用时更加游刃有余。作为一名前端开发者，掌握 Vue 3 无疑会为你的技术栈增添强大的一笔。从现在开始，勇敢地投入到 Vue 3 的学习和实践中吧，你将发现一个更加高效和愉悦的开发体验！

滚动至顶部