首页
/ 正文

Vue3 基础语法（长文讲解）

更新时间: 2025-04-14 20:55:57

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

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

新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;

《从零手撸：仿小红书（微服务架构）》 已完结，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;

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

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

前言：为什么选择 Vue3？

在前端框架领域，Vue.js 一直以简洁易学、高效灵活的特点受到开发者青睐。Vue3 作为重大版本升级，不仅优化了核心性能，还引入了 Composition API 等新特性，使得代码结构更加清晰。无论是编程初学者还是中级开发者，掌握 Vue3 基础语法都是构建现代化单页应用（SPA）的关键一步。本文将通过 循序渐进的方式，结合 实际案例与代码示例，带读者系统理解 Vue3 核心概念。

一、环境搭建与基本结构

1.1 快速启动项目

Vue3 项目可通过 Vue CLI 或 CDN 方式快速搭建。对于初学者，推荐使用 CDN 方式体验基础语法：

<!DOCTYPE html>  
<html>  
<head>  
  <title>Vue3 基础示例</title>  
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>  
</head>  
<body>  
  <div id="app">  
    {{ message }}  
  </div>  
  <script>  
    const { createApp } = Vue;  
    createApp({  
      data() {  
        return {  
          message: "Hello Vue3!"  
        };  
      }  
    }).mount("#app");  
  </script>  
</body>  
</html>

1.2 核心概念解析

响应式数据：Vue3 通过 Proxy 替代 Vue2 的 Object.defineProperty，实现更高效的数据追踪。
组件化开发：Vue3 遵循“单文件组件”（SFC）规范，将 HTML、CSS、JavaScript 封装在 .vue 文件中。
Composition API：通过 setup() 函数组织代码逻辑，提升代码复用性和可维护性。

二、数据绑定与指令

2.1 双向绑定与事件处理

Vue3 的数据绑定分为 插值表达式（{{ }}）和指令（如 v-text、v-model）。以表单为例：

<template>  
  <input v-model="username" placeholder="请输入用户名">  
  <p>欢迎，{{ username }}</p>  
</template>  

<script setup>  
import { ref } from "vue";  
const username = ref("");  
</script>

比喻：v-model 好比“双向传送门”，输入框和显示区域的数据会实时同步。

2.2 条件渲染与循环

条件渲染

通过 v-if、v-else-if、v-else 实现动态显示：

<template>  
  <div v-if="isLogin">登录成功！</div>  
  <div v-else>请先登录</div>  
</template>  

<script setup>  
import { ref } from "vue";  
const isLogin = ref(false);  
</script>

列表渲染

使用 v-for 遍历数组：

<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: "苹果" },  
  { id: 2, name: "香蕉" }  
]);  
</script>

注意事项：key 属性是 Vue 识别列表项变化的唯一标识，类似身份证编号。

三、计算属性与侦听器

3.1 计算属性（Computed Properties）

用于声明依赖响应式数据的复杂逻辑，自动缓存计算结果。例如：

<template>  
  <p>原价：{{ price }}</p>  
  <p>折扣价：{{ discountedPrice }}</p>  
</template>  

<script setup>  
import { ref, computed } from "vue";  
const price = ref(100);  
const discountRate = 0.8;  

const discountedPrice = computed(() => price.value * discountRate);  
</script>

比喻：计算属性如同“自动更新的计算器”，当 price 变化时，discountedPrice 会立即重新计算。

3.2 侦听器（Watchers）

用于监听数据变化并执行副作用操作。例如：

import { ref, watch } from "vue";  
const count = ref(0);  

watch(count, (newVal, oldVal) => {  
  console.log(`计数器从 ${oldVal} 变为 ${newVal}`);  
});

对比：计算属性适合“读取值”，侦听器适合“执行操作”，两者如同“监控器”与“警报器”的关系。

四、组件化开发与通信

4.1 组件定义与注册

创建组件文件 MyComponent.vue：

<template>  
  <div class="my-component">  
    <h3>{{ title }}</h3>  
    <slot>默认内容</slot>  
  </div>  
</template>  

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

在父组件中使用：

<template>  
  <MyComponent title="我的组件">  
    这里是插槽内容！  
  </MyComponent>  
</template>

比喻：组件如同乐高积木，props 是预设的连接口，slot 是可替换的“插槽”。

4.2 父子组件通信

Props 向下传递

父组件通过 props 向子组件传递数据：

<!-- 父组件 -->  
<MyChild :message="parentMessage" />  

<script setup>  
const parentMessage = ref("来自父组件的消息");  
</script>

事件向上传递

子组件通过 $emit 触发事件：

<!-- 子组件 -->  
<template>  
  <button @click="handleClick">点击我</button>  
</template>  

<script setup>  
const emit = defineEmits(["child-event"]);  
const handleClick = () => {  
  emit("child-event", "子组件触发的事件");  
};  
</script>

父组件监听事件：

<MyChild @child-event="handleEvent" />  

<script setup>  
const handleEvent = (payload) => {  
  console.log(payload); // 输出："子组件触发的事件"  
};  
</script>

五、生命周期与响应式系统

5.1 生命周期钩子

Vue3 组件的生命周期钩子与 Vue2 类似，但命名更直观：

钩子名称	触发时机
`onMounted`	组件挂载到 DOM 后
`onUpdated`	组件更新后
`onBeforeUnmount`	组件卸载前

示例：

import { onMounted } from "vue";  

onMounted(() => {  
  console.log("组件已挂载，可以执行 DOM 操作");  
});

5.2 响应式系统原理

Vue3 使用 Proxy 对象包裹数据，任何属性的读写操作都会触发依赖收集和更新。例如：

const state = reactive({ count: 0 });  
state.count++; // 自动触发视图更新

比喻：响应式系统如同“智能管家”，默默观察数据变化并通知视图“刷新房间”。

六、Composition API 实战

6.1 setup() 函数与逻辑复用

setup() 是 Composition API 的核心入口，用于组织组件逻辑：

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

const count = ref(0);  

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

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

6.2 自定义组合式函数

通过提取公共逻辑提升复用性：

// useCounter.js  
import { ref } from "vue";  

export function useCounter() {  
  const count = ref(0);  
  const increment = () => count.value++;  
  return { count, increment };  
}

在组件中使用：

<script setup>  
import { useCounter } from "./useCounter";  

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

结论：Vue3 基础语法的实践路径

通过本文的讲解，读者已掌握 Vue3 的核心概念、数据绑定、组件化开发及 Composition API 的使用。建议按照以下步骤深入学习：

动手实践：通过官方文档的 CodeSandbox 示例验证代码逻辑；
项目驱动：尝试用 Vue3 开发一个待办事项列表（Todo List）；
进阶学习：探索路由（Vue Router）、状态管理（Pinia）等生态工具。

Vue3 的语法体系如同一座精心设计的“桥梁”，连接着静态 HTML 与动态交互世界。掌握其基础语法后，开发者可以更高效地构建高性能、易维护的现代 Web 应用。

本文内容覆盖 Vue3 基础语法 的关键知识点，结合代码示例与比喻解释，旨在帮助读者建立清晰的认知框架。如需进一步探讨具体场景或进阶技巧，欢迎在评论区留言交流！