Vue3 新手入门指南，常用命令

Vue3 相比 Vue2 提供了更好的开发体验，尤其是 Composition API 让代码更加简洁、易于维护。通过 Vite 创建 Vue3 项目是当前最佳实践，可以极大提高开发效率。

一、Vue3 简介

Vue3 是 Vue.js 的最新版本，提供了更好的性能、优化的 API 以及更强大的组合式 API（Composition API）。相较于 Vue2，Vue3 引入了多个新特性，如：

Composition API（组合式 API）
Teleport（传送）
Fragments（多根节点支持）
更好的响应式系统（基于 Proxy）
更快的渲染性能

二、安装 Vue3

Vue3 的安装方式有多种，以下是常见的方法：

1. 通过 CDN 直接引入

适用于快速测试 Vue3 功能。

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

2. 通过 Vue CLI 创建 Vue3 项目

npm install -g @vue/cli  # 安装 Vue CLI（如果尚未安装）
vue create my-vue3-app   # 创建 Vue3 项目

在创建过程中，选择 Vue3 版本。

3. 通过 Vite 创建 Vue3 项目（推荐）

Vite 是 Vue 官方推荐的现代前端构建工具，速度快，适合 Vue3 开发。

npm create vite@latest my-vue3-app --template vue
cd my-vue3-app
npm install
npm run dev  # 启动开发服务器

三、Vue3 关键特性

1. 组合式 API (Composition API)

Vue3 推荐使用 setup 函数来组织组件逻辑。

<script setup>
import { ref } from 'vue';
const count = ref(0);
const increment = () => count.value++;
</script>

<template>
  <button @click="increment">点击次数: {
  { count }}</button>
</template>

2. 组件生命周期

Vue3 采用新的生命周期钩子，如 onMounted、onUnmounted。

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

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

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

Vue3 生命周期函数一览

onBeforeMount：组件挂载之前调用。
onMounted：组件挂载完成后调用。
onBeforeUpdate：组件更新之前调用。
onUpdated：组件更新后调用。
onBeforeUnmount：组件卸载前调用。
onUnmounted：组件卸载后调用。
onErrorCaptured：捕获子组件的错误。
onRenderTracked：跟踪组件的依赖变化。
onRenderTriggered：当组件重新渲染时触发。

import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';

export default {
  setup() {
    onBeforeMount(() => {
      console.log('组件挂载前');
    });
    onMounted(() => {
      console.log('组件已挂载');
    });
    onBeforeUpdate(() => {
      console.log('数据更新前');
    });
    onUpdated(() => {
      console.log('数据已更新');
    });
    onBeforeUnmount(() => {
      console.log('组件销毁前');
    });
    onUnmounted(() => {
      console.log('组件已销毁');
    });
  }
};

3. Vue3 常用指令

Vue3 继承了 Vue2 的大部分指令，并进行了一些优化。

1. v-model（双向绑定）

<input v-model="message" />
<p>输入的内容：{
  { message }}</p>

2. v-if / v-else / v-else-if（条件渲染）

<p v-if="isVisible">这是可见的</p>
<p v-else>这是隐藏的</p>

3. v-for（列表渲染）

<ul>
  <li v-for="item in items" :key="item.id">{
  { item.name }}</li>
</ul>

4. v-bind（属性绑定）

<img v-bind:src="imageSrc" alt="图片" />

简写ÿ