如何快速入门 Vue 3

Vue.js 是一个流行的前端 JavaScript 框架，以其简洁、高效而著称。Vue 3 作为最新的主要版本，带来了许多新特性和改进，包括更好的性能、更小的体积以及更多的内置功能。以下是一份快速入门 Vue 3 的指南。

一、了解 Vue 3 的新特性

在开始之前，了解 Vue 3 的一些关键新特性是很有帮助的：

Composition API：Vue 3 引入了 Composition API，提供了一种更灵活的方式来组织组件逻辑。
响应式系统的改进：Vue 3 的响应式系统经过重写，性能得到显著提升。
Teleport：一个新的内置组件，允许你将组件的子节点“传送”到 DOM 中的其他位置。
Fragments：支持多个根节点，使得组件可以返回多个元素。
自定义渲染器 API：允许开发者创建自定义的渲染器。

二、环境准备

要开始使用 Vue 3，你需要准备以下环境：

Node.js：确保你的开发环境中安装了 Node.js，Vue 3 需要 Node.js 版本 10.0 或更高。
Vue CLI：Vue CLI 是 Vue 官方的命令行工具，用于快速生成和管理 Vue 项目。安装 Vue CLI 的命令是：
```
npm install -g @vue/cli
```

三、创建 Vue 3 项目

使用 Vue CLI 创建一个新的 Vue 3 项目：

打开终端或命令提示符。
输入以下命令创建新项目：
```
vue create my-vue3-app
```
按照提示选择 Vue 3 预设或手动选择特性。

四、探索项目结构

创建项目后，熟悉一下项目的基本结构：

src/：存放所有的源代码。
components/：存放 Vue 组件。
App.vue：根组件。
main.js：入口文件，用于创建 Vue 实例。
public/：存放静态资源，如 index.html。

五、使用 Composition API

Vue 3 的 Composition API 提供了一种新的方式来组织组件逻辑，它允许开发者将组件的功能分割成可复用的函数。以下是一些实际的 Composition API 使用示例。

1. 基础响应式状态

使用 ref 创建响应式状态：

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

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

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

2. 计算属性

使用 computed 创建计算属性：

<template>
  <div>Double Count: {{ doubleCount }}</div>
</template>

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

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

3. 侦听器

使用 watch 和 watchEffect 来侦听响应式状态的变化：

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

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

const count = ref(0);

watchEffect(() => {
  console.log(`count is now: ${count.value}`);
});

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

4. 生命周期钩子

使用 onMounted, onUpdated, onUnmounted 等生命周期钩子：

<template>
  <div>Component is {{ state }}</div>
</template>

<script setup>
import { ref, onMounted, onUpdated, onUnmounted } from 'vue';

const state = ref('mounted');

onMounted(() => {
  state.value = 'mounted';
});

onUpdated(() => {
  state.value = 'updated';
});

onUnmounted(() => {
  state.value = 'unmounted';
});
</script>

5. 自定义 Hook

创建自定义的 Hook 来复用逻辑：

// useCounter.js
export default function useCounter(initialValue) {
  const count = ref(initialValue);

  function increment() {
    count.value++;
  }

  return { count, increment };
}

// MyComponent.vue
<template>
  <button @click="increment">Count is {{ count }}</button>
</template>

<script setup>
import useCounter from './useCounter';

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

6. 提供和注入

使用 provide 和 inject 进行跨组件的状态共享：

// ParentComponent.vue
<template>
  <ChildComponent />
</template>

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

provide('theme', 'dark');
</script>

// ChildComponent.vue
<template>
  <div>The theme is {{ theme }}</div>
</template>

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

const theme = inject('theme');
</script>

六、组件开发

开始开发你的组件，使用 Vue 3 的新特性：

模板语法：使用新的指令，如 v-model 现在统一为 v-model:value 和 v-model:arg。
组件通信：使用 provide 和 inject 来实现祖先组件向后代组件传递数据。
自定义指令：Vue 3 改进了自定义指令 API。

七、项目构建和部署

当你的项目开发完成后，使用以下命令来构建项目：

npm run build

构建完成后，将 dist/ 目录中的内容部署到你的服务器或使用静态网站托管服务。

八、学习资源

Vue 官方文档：Vue 3 Documentation
Vue 3 教程：网络上有许多教程和课程可以帮助你更深入地学习 Vue 3。
社区：加入 Vue 社区，如论坛、Slack 频道或 Discord 服务器，与其他开发者交流。

结语

Vue 3 带来了许多激动人心的新特性和改进，通过上述步骤，你可以快速入门并开始构建现代化的前端应用。不断实践和探索，你将能够充分利用 Vue 3 的强大能力。