Vue3 基础语法详解：从入门到实践

Vue3 作为目前主流的前端框架之一，相比 Vue2 在性能、API 设计和类型支持上都有显著提升。本文将围绕 Vue3 的核心基础语法展开，带大家快速上手 Vue3 开发，适合零基础或从 Vue2 迁移的开发者。

一、准备工作：创建 Vue3 项目

在学习语法前，我们先搭建一个 Vue3 项目。目前主流的创建方式有两种：Vue CLI 和 Vite（推荐，启动速度更快）。

1. 用 Vite 创建项目（推荐）​
   Vite 是 Vue 作者推出的构建工具，支持快速热更新，步骤如下：

# 1. 安装Node.js（需v14.18+版本，可通过node -v查看）
# 2. 创建项目
npm create vite@latest vue3-demo -- --template vue
# 3. 进入项目目录
cd vue3-demo
# 4. 安装依赖
npm install
# 5. 启动项目
npm run dev

启动后访问 http://localhost:5173，即可看到 Vue3 默认页面。

2. 项目目录结构（核心文件）

vue3-demo/
├─ src/
│  ├─ components/  # 组件文件夹
│  ├─ App.vue      # 根组件
│  └─ main.js      # 入口文件
└─ index.html      # 入口HTML

二、核心语法：从模板到逻辑

Vue3 的语法分为「模板语法」（视图层）和「逻辑语法」（脚本层），下面逐一讲解。​

1. 模板语法：构建视图​

模板语法是 Vue 特有的 HTML 扩展，用于将数据绑定到 DOM，核心包括文本插值和指令。​

（1）文本插值：{{变量}}​

最基础的数据绑定方式，用于渲染响应式变量的值：

<!-- App.vue 模板部分,相当于html -->
<template><h1>{{ message }}</h1><p>{{ 1 + 1 }}</p> <!-- 支持简单表达式 --><p>{{ isShow ? '显示内容' : '隐藏内容' }}</p> <!-- 三元表达式 -->
</template><script setup>
// 脚本部分：定义响应式变量，相当于js
const message = 'Hello Vue3!'
const isShow = true
</script>

注意：模板中只能写简单表达式（如加减、三元），不能写复杂逻辑（如 for 循环、if 语句块）。

（2）指令：v-xxx 系列​

指令是模板中的特殊属性，以 v- 开头，用于实现 DOM 操作逻辑。常用指令如下：示例：综合使用指令​

• v-bind 绑定属性（简写 :），重点掌握 class 和 style 的动态绑定。
• v-if 与 v-show 用于条件渲染，注意两者的性能差异。
• v-for 循环渲染列表，必须添加 key 且避免用 index。
• v-on 绑定事件（简写 @），灵活使用事件修饰符。
• v-model 实现双向绑定，适用于表单和自定义组件​

<template>​<!-- 1. v-bind：绑定图片属性 -->​<img :src="imgUrl" :alt="imgAlt" width="200">​
​<!-- 2. v-if：条件显示 -->​<div v-if="isLogin">欢迎回来，{{ username }}</div>​<div v-else>请<a @click="toLogin">登录</a></div>​
​<!-- 3. v-for：循环渲染列表 -->​<ul>​<li v-for="(fruit, index) in fruits" :key="index">​{{ index + 1 }}. {{ fruit }}​</li>​</ul>​
​<!-- 4. v-on：绑定点击事件 -->​<button @click="addFruit">添加水果</button>​
</template>​
​
<script setup>​
// 定义变量​
const imgUrl = 'https://v3.vuejs.org/logo.png'​
const imgAlt = 'Vue3 Logo'​
const isLogin = true​
const username = 'Vue开发者'​
const fruits = ['苹果', '香蕉', '橙子']​
​
// 定义事件方法​
const toLogin = () => {​alert('跳转到登录页')​
}​
​
const addFruit = () => {​fruits.push('葡萄') // 后续会讲响应式更新，此处暂用简单写法​
}​
</script>​

重要：v-for 必须加 :key，用于 Vue 识别列表项的唯一性，避免渲染错误（推荐用唯一 ID，而非 index）。

2. 响应式数据：让数据驱动视图​

Vue3 的核心特性是「响应式」—— 当数据变化时，视图会自动更新。Vue3 提供了两种创建响应式数据的 API：ref 和 reactive。​

（1）ref：用于基本类型（数字、字符串、布尔）​

• 定义：const 变量名 = ref(初始值)​
• 访问 / 修改：脚本中需加 .value，模板中直接用变量名​

示例：计数器（ref 实现）​
​

<template>​<h2>计数器：{{ count }}</h2>​<button @click="increase">+1</button>​<button @click="decrease">-1</button>​
</template>​
​
<script setup>​
// 1. 导入ref（Vue3需手动导入）​
import { ref } from 'vue'​
​
// 2. 创建响应式变量​
const count = ref(0)​
​
// 3. 定义方法修改数据​
const increase = () => {​count.value++ // 脚本中必须加 .value​
}​
​
const decrease = () => {​count.value--​
}​
</script>

​

（2）reactive：用于复杂类型（对象、数组）​

• 定义：const 变量名 = reactive(初始对象/数组)​
• 访问 / 修改：直接通过属性名操作，无需 .value​

示例：用户信息（reactive 实现）​
​

 <h4>爱好：</h4>​<ul>​<li v-for="hobby in user.hobbies" :key="hobby">{{ hobby }}</li>​</ul>​<button @click="addHobby">添加爱好</button>​</div>​
</template>​
​
<script setup>​
import { reactive } from 'vue'​
​
// 创建响应式对象​
const user = reactive({​name: '张三',​age: 20,​hobbies: ['篮球', '游戏']​
})​
​
// 修改对象属性​
const updateAge = () => {​user.age++ // 直接修改属性，无需 .value​
}​
​
// 修改数组​
const addHobby = () => {​user.hobbies.push('阅读') // 数组方法会自动触发响应式​
}​
</script>

​

3. 方法与事件：交互逻辑​

通过 v-on（简写 @）绑定事件，事件处理函数在

（1）事件传参​

如果需要给事件方法传参数，直接在模板中括号内传递：​

<template>​<button @click="sayHi('Vue3')">打招呼</button>​<button @click="deleteItem(index)">删除第{{ index }}项</button>​
</template>​
​
<script setup>​
const sayHi = (name) => {​alert(`Hi, ${name}!`)​
}​
​
const deleteItem = (index) => {​console.log(`删除索引：${index}`)​
}​
</script>

​

（2）事件修饰符​

Vue 提供了「事件修饰符」，用于简化常见的事件逻辑（如阻止默认行为、冒泡），常用修饰符：​

• .prevent：阻止默认行为（如表单提交、a 标签跳转）​
• .stop：阻止事件冒泡​
• .once：事件只触发一次​

示例：阻止表单提交​

<template>​<!-- 阻止表单默认提交行为 -->​<form @submit.prevent="handleSubmit">​<input type="text" v-model="inputValue">​<button type="submit">提交</button>​</form>​
</template>​
​
<script setup>​
import { ref } from 'vue'​
const inputValue = ref('')​
​
const handleSubmit = () => {​console.log('提交内容：', inputValue.value)​
}​
</script>

这里的 v-model 是双向绑定指令，会自动同步输入框值和变量，后续会详细讲。​

4. 计算属性与侦听器：处理数据逻辑​

（1）计算属性（computed）​

用于处理依赖响应式数据的复杂计算，具有「缓存特性」—— 只有依赖数据变化时才重新计算，比方法更高效。​

示例：计算购物车总价​

<template>​<div>​<p>商品1：{{ price1 }}元 × {{ count1 }}件</p>​<p>商品2：{{ price2 }}元 × {{ count2 }}件</p>​<p>总价：{{ totalPrice }}</p> <!-- 计算属性 -->​</div>​
</template>​
​
<script setup>​
import { ref, computed } from 'vue'​
​
// 基础数据​
const price1 = ref(100)​
const count1 = ref(2)​
const price2 = ref(50)​
const count2 = ref(3)​
​
// 计算属性：依赖price和count，自动更新​
const totalPrice = computed(() => {​return price1.value * count1.value + price2.value * count2.value​
})​
</script>

（2）侦听器（watch）​

用于监听响应式数据的变化，并执行副作用（如发送请求、打印日志）。​

示例：监听输入框值变化​

<template>​<input type="text" v-model="searchText" placeholder="输入搜索内容">​
</template>​
​
<script setup>​
import { ref, watch } from 'vue'​
​
const searchText = ref('')​
​
// 侦听searchText的变化​
watch(searchText, (newVal, oldVal) => {​console.log(`旧值：${oldVal}，新值：${newVal}`)​// 模拟发送搜索请求（仅示例）​if (newVal.length > 2) {​// axios.get(`/api/search?key=${newVal}`)​}​
})​
</script>

5. 组件基础：拆分页面​

Vue3 支持组件化开发，将页面拆分为多个可复用的组件。下面以「父子组件通信」为例，讲解基础用法。​

（1）创建子组件​

在 src/components 下新建 HelloWorld.vue：​

 <div>​<h3>{{ title }}</h3>​<p>{{ content }}</p>​<button @click="handleClick">向父组件传值</button>​</div>​
</template>​
​
<script setup>​
// 1. 接收父组件传递的参数（props）​
const props = defineProps({​title: {​type: String, // 类型约束​required: true // 必传​},​content: {​type: String,​default: '默认内容' // 默认值​}​
})​​
// 2. 向父组件发送事件（emit）​
const emit = defineEmits(['sendMsg']) // 声明可触发的事件​
​
const handleClick = () => {​// 触发事件并传值​emit('sendMsg', '我是子组件的消息')​
}​
</script>

（2）父组件使用子组件​

**在 App.vue 中引入并使用 HelloWorld**:​

<!-- App.vue（父组件） -->​
<template>​<div>​<h2>父组件</h2>​<!-- 使用子组件：传递props + 监听emit事件 -->​<HelloWorld ​title="欢迎使用Vue3" ​content="这是子组件的内容"​@sendMsg="getMsgFromChild"​/>​<p>子组件传来的消息：{{ childMsg }}</p>​</div>​
</template>​
​
<script setup>​
// 1. 导入子组件​
import HelloWorld from './components/HelloWorld.vue'​
import { ref } from 'vue'​
​
const childMsg = ref('')​
​
// 2. 接收子组件的事件​
const getMsgFromChild = (msg) => {​childMsg.value = msg​
}​
</script>​
​

三、总结​

本文讲解了 Vue3 的核心基础语法，包括：​

1. 项目创建（Vite）​
2. 模板语法（插值、指令）​
3. 响应式数据（ref、reactive）​
4. 方法与事件（传参、修饰符）​
5. 计算属性与侦听器（computed、watch）​
6. 组件基础（props、emit）​
   这些是 Vue3 开发的基石，建议大家结合代码示例实际运行调试，加深理解。后续可以进一步学习 Vue3 的进阶特性，如 Composition API、生命周期、Pinia 状态管理等。​
   如果在实践中遇到问题，欢迎在评论区交流～