Vue3 基础教程：从入门到实践 (保姆级教学)

最新推荐文章于 2025-05-13 19:40:35 发布

前段技术人

最新推荐文章于 2025-05-13 19:40:35 发布

阅读量4.2k

点赞数 54

文章标签：学习前端 vue.js vue

本文链接：https://blog.youkuaiyun.com/mi1981422521/article/details/146169587

版权

一、Vue3 简介

Vue.js 是一款用于构建用户界面的 JavaScript 框架，而 Vue3 作为其最新的主要版本，带来了诸多令人瞩目的改进与新特性，使其在前端开发领域备受青睐。

（一）Vue3 的优势

性能提升：Vue3 重写了虚拟 DOM 算法，显著提高了挂载、更新和渲染的速度。在处理大型列表或频繁数据更新的场景时，Vue3 的表现更为出色，能够为用户带来更流畅的交互体验。例如，一个包含大量商品信息的电商产品列表页面，使用 Vue3 进行开发，其数据加载和更新速度相较于 Vue2 有明显提升。
打包体积更小：得益于新的架构设计以及树摇（Tree - shaking）技术的应用，Vue3 的打包体积相比 Vue2 进一步减小。这意味着在网络传输过程中，用户能够更快地加载页面资源，特别是对于移动设备或网络条件不佳的用户来说，更快的页面加载速度能够极大提升用户对应用的好感度。
更好的 TypeScript 支持：Vue3 在内部全面使用 TypeScript 进行开发，为开发者提供了更强大的类型检查和智能提示功能。在团队协作开发中，TypeScript 能够有效减少代码中的类型错误，提高代码的可维护性和可读性。例如，在一个大型项目中，不同开发者使用 TypeScript 编写 Vue3 代码，能够更清晰地了解每个变量、函数的类型和用途，降低沟通成本，减少因类型不明确导致的潜在错误。
全新的组合式 API：这是 Vue3 最核心的特性之一，组合式 API 允许开发者按照功能而非生命周期来组织代码逻辑，使得代码更加灵活、可复用性更强。比如在开发一个具有多种功能模块（如用户登录、数据获取、页面交互等）的复杂组件时，使用组合式 API 可以将不同功能的代码逻辑清晰地分离，方便维护和扩展。

（二）Vue3 与 Vue2 的主要区别

API 风格：Vue2 主要采用选项式 API（Options API），开发者需要在不同的选项（如 data、methods、computed 等）中定义组件的各种逻辑。而 Vue3 除了保留选项式 API 外，新增了组合式 API（Composition API）。组合式 API 提供了一种更灵活、更逻辑化的代码组织方式，让开发者能够根据功能需求将相关代码组合在一起，提高代码的可维护性和复用性。
性能表现：如前文所述，Vue3 在性能方面有显著提升，虚拟 DOM 的优化以及其他底层改进使得其渲染速度更快，打包体积更小。这使得 Vue3 在开发大型应用或对性能要求较高的项目时具有更大的优势。
TypeScript 支持程度：Vue3 对 TypeScript 的支持更为原生和深入，内部代码基于 TypeScript 编写，类型定义更加完善。相比之下，Vue2 虽然也可以使用 TypeScript，但在类型支持的完整性和便利性上不如 Vue3。

二、Vue3 开发环境搭建

在开始使用 Vue3 进行项目开发之前，我们需要搭建好相应的开发环境。以下将详细介绍搭建 Vue3 开发环境的步骤。

（一）安装 Node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，Vue3 的开发依赖于 Node.js。因此，我们首先需要安装 Node.js。

访问 Node.js 官方网站（Node.js — Run JavaScript Everywhere），根据你的操作系统下载对应的安装包。
运行安装包，按照安装向导的提示进行安装。在安装过程中，可以选择默认的安装选项，也可以根据个人需求进行自定义安装。
安装完成后，打开命令行工具（Windows 下为 cmd 或 PowerShell，Mac 下为终端），输入以下命令检查 Node.js 是否安装成功：

node -v

如果安装成功，命令行将输出 Node.js 的版本号。

（二）安装 Vue CLI（可选）

Vue CLI 是 Vue.js 的官方命令行工具，它可以帮助我们快速创建 Vue 项目，并提供一系列的开发辅助功能。虽然 Vue3 项目也可以使用其他方式创建（如 Vite），但 Vue CLI 仍然是一种常用的选择。

确保你已经安装了 Node.js，然后在命令行中输入以下命令安装 Vue CLI：

npm install -g @vue/cli

这里的 -g 表示全局安装，安装完成后，你可以在任何目录下使用 vue 命令。
2. 安装完成后，输入以下命令检查 Vue CLI 是否安装成功：

vue --version

（三）创建 Vue3 项目

使用 Vue CLI 创建项目：
- 在命令行中，进入你希望创建项目的目录，然后输入以下命令创建一个新的 Vue3 项目：

vue create my-vue3-app

这里的 my - vue3 - app 是项目名称，你可以根据实际情况进行修改。

命令执行后，Vue CLI 会提示你选择项目的预设配置。选择 “Manually select features”（手动选择特性），然后按回车键。
在特性选择列表中，使用空格键选择你需要的特性，例如 “Babel”、“TypeScript”、“Router”、“Vuex” 等。对于一个基础的 Vue3 项目，至少选择 “Babel” 和 “Vue 3.x”。选择完成后，按回车键。
接下来，根据提示选择 Vue3 的版本以及其他相关配置选项，如是否使用 ESLint 进行代码检查、选择代码风格等。配置完成后，Vue CLI 会自动下载项目所需的依赖并创建项目结构。

使用 Vite 创建项目：
- Vite 是一个快速的前端构建工具，特别适合用于创建 Vue3 项目。首先，确保你已经安装了 Node.js。
- 在命令行中，进入你希望创建项目的目录，然后输入以下命令安装 Vite：

npm create vite@latest my - vue3 - app -- --template vue

这里的 my - vue3 - app 是项目名称，你可以根据实际情况进行修改。--template vue 表示使用 Vue 模板创建项目。

命令执行后，Vite 会自动创建项目结构并安装项目所需的依赖。

（四）启动项目

使用 Vue CLI 创建的项目：
- 进入项目目录：

cd my-vue3-app

启动开发服务器：

npm run serve

启动成功后，在浏览器中访问 http://localhost:8080，你将看到默认的 Vue3 项目页面。

三、Vue3 基础语法

（一）模板语法

文本插值：在 Vue3 的模板中，可以使用双大括号 {{ }} 进行文本插值，将数据绑定到模板中。例如：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const message = ref('Hello, Vue3!');
</script>

在上述代码中，{{ message }} 会被替换为 message 变量的值。当 message 的值发生变化时，模板中的显示也会自动更新。
2. 指令：Vue3 提供了许多内置指令，用于实现各种功能。

v - if 和 v - else：用于条件渲染。例如：

<template>
  <div>
    <p v - if="isShow">显示这段文字</p>
    <p v - else>不显示这段文字</p>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const isShow = ref(true);
</script>

v - for：用于列表渲染。例如：

<template>
  <div>
    <ul>
      <li v - for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const list = ref(['apple', 'banana', 'cherry']);
</script>

在 v - for 指令中，item 表示当前遍历的元素，index 表示当前元素的索引。:key 用于给每个列表项提供一个唯一的标识，这在列表更新时有助于提高性能。

v - bind：用于绑定 HTML 属性。可以简写为 :。例如：

<template>
  <div>
    <img :src="imageUrl" :alt="imageAlt">
  </div>
</template>
<script setup>
import { ref } from 'vue';
const imageUrl = ref('https://example.com/image.jpg');
const imageAlt = ref('示例图片');
</script>

v - on：用于绑定事件。可以简写为 @。例如：

<template>
  <div>
    <button @click="handleClick">点击我</button>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const handleClick = () => {
  console.log('按钮被点击了');
};
</script>

（二）响应式数据

ref：ref 函数用于创建一个响应式的数据引用。它可以接受任意类型的值，并返回一个包含 value 属性的对象。当 value 的值发生变化时，与之绑定的模板会自动更新。例如：

<template>
  <div>
    <p>{{ count.value }}</p>
    <button @click="increment">增加</button>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const count = ref(0);
const increment = () => {
  count.value++;
};
</script>

在模板中使用 count.value 来显示数据，在 JavaScript 代码中通过修改 count.value 来更新数据。
2. reactive：reactive 函数用于创建一个响应式的对象或数组。与 ref 不同，reactive 直接返回响应式的数据，不需要通过 value 属性来访问。例如：

<template>
  <div>
    <p>{{ user.name }}</p>
    <p>{{ user.age }}</p>
    <button @click="updateUser">更新用户信息</button>
  </div>
</template>
<script setup>
import { reactive } from 'vue';
const user = reactive({
  name: '张三',
  age: 20
});
const updateUser = () => {
  user.name = '李四';
  user.age = 21;
};
</script>

在上述代码中，user 是一个响应式对象，当 user 的属性值发生变化时，模板会自动更新。

三）计算属性与侦听器

计算属性：计算属性是基于响应式数据进行计算的结果，并且具有缓存机制。只有当依赖的响应式数据发生变化时，计算属性才会重新计算。例如：

<template>
  <div>
    <p>原始数字: {{ num }}</p>
    <p>加倍后的数字: {{ doubledNum }}</p>
    <button @click="increment">增加</button>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const num = ref(10);
const doubledNum = computed(() => {
  return num.value * 2;
});
const increment = () => {
  num.value++;
};
</script>

在上述代码中，doubledNum 是一个计算属性，它依赖于 num。当 num 的值发生变化时，doubledNum 会重新计算。
2. 侦听器：侦听器用于监听响应式数据的变化，并在数据变化时执行相应的操作。Vue3 提供了 watch 和 watchEffect 两种方式来创建侦听器。

watch：watch 函数用于监听特定的响应式数据。例如：

<template>
  <div>
    <input v - model="message" placeholder="输入一些内容">
  </div>
</template>
<script setup>
import { ref, watch } from 'vue';
const message = ref('');
watch(message, (newValue, oldValue) => {
  console.log('消息内容发生了变化，新值为:', newValue, '，旧值为:', oldValue);
});
</script>

watchEffect：watchEffect 函数会自动追踪其内部使用的响应式数据，并在这些数据变化时执行回调函数。例如：

<template>
  <div>
    <input v - model="count" type="number">
  </div>
</template>
<script setup>
import { ref, watchEffect } from 'vue';
const count = ref(0);
watchEffect(() => {
  console.log('count 的值变为:', count.value);
});
</script>

（四）生命周期钩子

Vue3 提供了一系列的生命周期钩子函数，用于在组件的不同生命周期阶段执行特定的代码。常见的生命周期钩子如下：

setup：setup 是 Vue3 中新增的一个特殊函数，它在组件创建之前执行，用于初始化组件的响应式数据、计算属性、方法和生命周期钩子等。setup 函数是所有组合式 API 的入口点。例如：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const message = ref('Hello from setup');
</script>

onBeforeMount：在组件挂载到 DOM 之前调用，此时组件的模板还未渲染到页面上。例如：

<template>
  <div>
    <p>组件内容</p>
  </div>
</template>
<script setup>
import { onBeforeMount } from 'vue';
onBeforeMount(() => {
  console.log('组件即将挂载');
});
</script>

onMounted：在组件挂载到 DOM 之后调用，此时组件的模板已经渲染到页面上，可以进行 DOM 操作等。例如：

<template>
  <div>
    <p id="my - p">组件内容</p>
  </div>
</template>
<script setup>
import { onMounted } from 'vue';
onMounted(() => {
  const pElement = document.getElementById('my - p');
  if (pElement) {
    pElement.style.color ='red';
  }
});
</script>

onBeforeUpdate：在组件数据更新之前调用，此时组件的响应式数据已经发生变化，但 DOM 还未更新。例如：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>
<script setup>
import { ref, onBeforeUpdate } from 'vue';
const count = ref(0);
const increment = () => {
  count.value++;
};
onBeforeUpdate(() => {
  console.log('组件即将更新，count 的新值为:', count.value);
});
</script>

onUpdated：在组件数据更新之后调用，此时 DOM 已经更新完成。例如：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>
<script setup>
import { ref, onUpdated } from 'vue';
const count = ref(0);
const increment = () => {
  count.value++;
};
onUpdated(() => {
  console.log('组件已更新，页面上的 count 值已改变');
});
</script>

onBeforeUnmount：在组件卸载之前调用，可以在此处进行一些清理工作，如解绑事件监听器等。例如：

<template>
  <div>
    <p>组件内容</p>
  </div>
</template>
<script setup>
import { onBeforeUnmount } from 'vue';
let timer;
const startTimer = () => {
  timer = setInterval(() => {
    console.log('定时器在运行');
  }, 1000);
};
onBeforeUnmount(() => {
  if (timer) {
    clearInterval(timer);
  }