首页
/ 正文

vue3教程（长文解析）

更新时间: 2025-03-17 22:11:09

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;

《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前，星球内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习，欢迎点击围观

在现代前端开发领域，Vue 3 以其简洁的语法、高效的性能和灵活的生态，成为许多开发者构建单页应用的首选框架。无论是编程初学者还是有一定经验的中级开发者，都能在 Vue 3 的学习过程中找到适合自己的成长路径。本文将通过 vue3教程 的视角，从基础语法到核心概念，结合实例代码与比喻，逐步揭开 Vue 3 的技术面纱，帮助读者系统掌握这一框架的核心能力。

一、Vue3基础语法与环境搭建

1.1 项目初始化与开发环境配置

Vue 3 的开发需要先安装 Node.js（建议版本 16.13+ 或更高）。通过官方脚手架工具 @vue/cli 或 Vite 可快速创建项目。以下以 Vite 为例：

npm init vite@latest my-vue3-project  
cd my-vue3-project  
npm install  
npm run dev

此命令会生成一个基于 Vue 3 的项目模板，开发者可以直接在 src/App.vue 中开始编写代码。

1.2 组件基础：Vue3的最小运行单元

Vue 3 的核心是组件化开发。一个最简单的组件示例如下：

<template>  
  <div class="greeting">  
    Hello, {{ name }}!  
  </div>  
</template>  

<script setup>  
const name = "Vue 3";  
</script>

此组件包含三部分：

模板（Template）：定义界面结构，使用双花括号 {{ }} 插入动态数据。
脚本（Script）：通过 <script setup> 语法声明响应式数据。
样式（Style）：可选局部样式，使用 scoped 属性限制作用域。

1.3 模板语法：指令与条件渲染

Vue 3 提供了丰富的指令（Directives）简化模板逻辑：

条件渲染：v-if、v-else、v-show 控制元素是否显示。
循环渲染：v-for 遍历数组或对象。
事件绑定：v-on 监听用户操作，如 @click="handleClick"。

例如，以下代码展示了一个动态列表：

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

<script setup>  
import { ref } from "vue";  
const items = ref([  
  { id: 1, name: "Apple" },  
  { id: 2, name: "Banana" },  
]);  
</script>

二、响应式系统与Proxy机制

2.1 响应式原理：Vue3的核心魔法

Vue 3 的响应式系统基于 Proxy 对象（取代 Vue 2 的 Object.defineProperty），其核心思想是：当数据变化时，自动更新依赖它的视图。

想象一个仪表盘：

数据如同仪表盘的指针，当指针转动（数据变化），
视图如同仪表盘的显示区域，会自动跟随指针的位置刷新。

Vue 3 通过 Proxy 捕获对象的读写操作，建立数据与视图的双向关联。

2.2 Ref与Reactive：两种响应式数据声明方式

ref：适用于单个值（如数字、字符串）的响应式封装。

import { ref } from "vue";  
const count = ref(0);  
count.value++; // 数据变化会触发视图更新

reactive：适用于对象或数组的深层响应式。

import { reactive } from "vue";  
const state = reactive({  
  name: "Alice",  
  age: 25,  
});  
state.age += 1; // 对象属性变化自动触发更新

2.3 案例：响应式计数器

以下代码通过 ref 实现一个简单的计数器：

<template>  
  <div>  
    <p>当前计数：{{ count }}</p>  
    <button @click="increment">+1</button>  
  </div>  
</template>  

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

三、组件化开发实战

3.1 组件通信：父子组件的协作

组件间通信是 Vue 开发的关键。父子组件可通过以下方式交互：

父传子：通过 props 传递数据。
子传父：通过 $emit 触发事件。

示例：购物车组件

父组件 App.vue：

<template>  
  <Cart :items="cartItems" @remove-item="handleRemove" />  
</template>  

<script setup>  
import { ref } from "vue";  
import Cart from "./components/Cart.vue";  

const cartItems = ref([  
  { id: 1, name: "Book", quantity: 1 },  
]);  

const handleRemove = (itemId) => {  
  // 处理删除逻辑  
};  
</script>

子组件 Cart.vue：

<template>  
  <ul>  
    <li v-for="item in items" :key="item.id">  
      {{ item.name }}  
      <button @click="$emit('remove-item', item.id)">Remove</button>  
    </li>  
  </ul>  
</template>  

<script setup>  
const props = defineProps({  
  items: {  
    type: Array,  
    required: true,  
  },  
});  
</script>

3.2 自定义组件：封装可复用的UI模块

通过组件化，开发者可以将复杂功能封装为独立模块。例如，以下代码创建一个可复用的按钮组件：

<!-- Button.vue -->  
<template>  
  <button  
    :class="['custom-btn', type]"  
    @click="$emit('click')"  
  >  
    {{ label }}  
  </button>  
</template>  

<script setup>  
const props = defineProps({  
  label: {  
    type: String,  
    required: true,  
  },  
  type: {  
    type: String,  
    default: "primary",  
  },  
});  
</script>  

<style scoped>  
.custom-btn.primary {  
  background-color: #4CAF50;  
}  
</style>

四、Composition API深度解析

4.1 Setup函数与逻辑复用

Vue 3 的 Composition API 通过 <script setup> 语法简化了代码组织。setup 函数允许开发者集中管理组件的逻辑：

<script setup>  
import { ref, onMounted } from "vue";  

const count = ref(0);  

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

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

4.2 生命周期钩子与组合式函数

Vue 3 将生命周期钩子封装为组合式函数，如 onMounted、onUnmounted。以下是一个结合 setTimeout 的倒计时案例：

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

const timer = ref(10);  
let intervalId = null;  

const startTimer = () => {  
  intervalId = setInterval(() => {  
    if (timer.value > 0) {  
      timer.value--;  
    } else {  
      clearInterval(intervalId);  
    }  
  }, 1000);  
};  

onMounted(() => {  
  startTimer();  
});  

onUnmounted(() => {  
  clearInterval(intervalId);  
});  
</script>

五、实用工具与进阶技巧

5.1 计算属性与侦听器：优化复杂逻辑

计算属性（Computed） 适用于依赖响应式数据的复杂计算：

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

const firstName = ref("John");  
const lastName = ref("Doe");  

const fullName = computed(() => {  
  return `${firstName.value} ${lastName.value}`;  
});  
</script>

侦听器（Watch） 可监听数据变化并执行副作用：

import { watch } from "vue";  

watch(  
  () => fullName.value,  
  (newVal) => {  
    console.log("全名已更新为:", newVal);  
  }  
);

5.2 自定义指令：扩展Vue的功能边界

自定义指令允许开发者封装 DOM 操作逻辑。例如，一个输入框的自动聚焦指令：

<script setup>  
import { onMounted } from "vue";  

const vAutoFocus = {  
  mounted(el) {  
    el.focus();  
  },  
};  
</script>  

<template>  
  <input v-auto-focus placeholder="点击我" />  
</template>

六、性能优化与生态扩展

6.1 缓存与懒加载：提升应用性能

KeepAlive：缓存非活动组件，避免重复渲染。

<template>  
  <keep-alive>  
    <component :is="currentTab" />  
  </keep-alive>  
</template>

异步组件：通过 defineAsyncComponent 按需加载模块。

const AsyncComponent = defineAsyncComponent(() =>  
  import("./components/HeavyComponent.vue")  
);

6.2 插件与生态：扩展Vue的功能

Vue 3 支持通过插件扩展功能。例如，安装 Vue Router 实现路由跳转：

// main.js  
import { createApp } from "vue";  
import App from "./App.vue";  
import router from "./router";  

createApp(App).use(router).mount("#app");

结论

通过本文的 vue3教程 ，读者已逐步掌握了从基础语法到组件化开发的核心能力。Vue 3 的响应式系统、Composition API 和丰富的生态工具，为开发者提供了高效构建现代应用的基石。建议读者通过实际项目深化理解，并关注官方文档和社区资源，持续探索框架的更多可能性。无论是构建个人作品集，还是企业级应用，Vue 3 都将是你值得信赖的技术伙伴。

vue3教程（长文解析）

一、Vue3基础语法与环境搭建

1.1 项目初始化与开发环境配置

1.2 组件基础：Vue3的最小运行单元

1.3 模板语法：指令与条件渲染

二、响应式系统与Proxy机制

2.1 响应式原理：Vue3的核心魔法

2.2 Ref与Reactive：两种响应式数据声明方式

2.3 案例：响应式计数器

三、组件化开发实战

3.1 组件通信：父子组件的协作

示例：购物车组件

3.2 自定义组件：封装可复用的UI模块

四、Composition API深度解析

4.1 Setup函数与逻辑复用

4.2 生命周期钩子与组合式函数

五、实用工具与进阶技巧

5.1 计算属性与侦听器：优化复杂逻辑

5.2 自定义指令：扩展Vue的功能边界

六、性能优化与生态扩展

6.1 缓存与懒加载：提升应用性能

6.2 插件与生态：扩展Vue的功能

结论

最新发布

Vue3 app.config.errorHandler 属性（保姆级教程）

Vue3 app.config.warnHandler 属性（长文讲解）

Vue3 app.config.performance 属性（超详细）

Vue3 app.config.compilerOptions 属性（千字长文）

Vue3 app.config.globalProperties 属性（保姆级教程）

Vue3 app.config.optionMergeStrategies 属性（千字长文）

Vue3 app.config.idPrefix 属性（保姆级教程）

Vue3 app.config.throwUnhandledErrorInProduction 属性（保姆级教程）

Vue3 Vue.version 属性（一文讲透）

Vue3 nextTick() 函数（超详细）