《Vue3 入门核心名词解释》
大家刚开始学 Vue3 的时候，经常会被一堆名词绕晕：
什么是 DOM？
什么是组件？
什么是响应式？
ref和reactive到底有什么区别？props、emit、slot又是干什么的？
看多了教程，反而更乱。
所以这篇文章我不讲太复杂的底层原理，而是站在初学者的角度，把 Vue3 里最常见的名词、专有术语、核心概念一次讲清楚。
这篇文章的目标很简单：
让你看完之后，至少能听懂 Vue3 教程里老师在说什么。
一、先理解：Vue 到底是什么？
Vue 是一个前端框架，主要用来开发网页界面。
你可以把它理解成一个“帮我们写页面、管理数据、更新界面”的工具。
以前我们写网页，可能要手动操作 HTML、CSS、JavaScript。
而 Vue 的作用就是：
帮你更方便地组织页面
帮你自动更新页面
帮你把复杂页面拆成一个个模块
一句话理解：
Vue 是用来开发现代网页界面的工具。
二、Vue3 学习前必须先懂的几个基础名词
1. DOM
DOM，全称Document Object Model，中文叫文档对象模型。
浏览器在加载 HTML 页面后，会把页面中的标签解析成一棵“树”。
比如这段 HTML：
<body> <h1>你好</h1> <p>欢迎学习 Vue3</p> </body>浏览器会把它理解成：
body是一个节点h1是一个节点p是一个节点
这整套可以被 JavaScript 操作的页面结构，就叫 DOM。
小白理解
你可以把 DOM 理解成：
浏览器眼中的网页结构。
我们以前用 JavaScript 改页面，本质上就是在操作 DOM。
例如：
document.getElementById('title').innerText = 'Hello Vue'这就是典型的 DOM 操作。
2. 虚拟 DOM
虚拟 DOM，英文叫Virtual DOM。
它不是真实出现在浏览器页面里的 DOM，而是 Vue 在内存中维护的一份“页面结构的副本”。
为什么要有虚拟 DOM？
因为真实 DOM 操作成本高、效率低。
Vue 不会每次数据一变就直接胡乱改页面，而是先：
在内存中生成新的虚拟 DOM
和旧的虚拟 DOM 对比
找出真正变化的地方
只更新需要改的那部分真实 DOM
小白理解
你可以把虚拟 DOM 理解成：
Vue 先打草稿，再决定真正改页面哪里。
3. 前端框架
前端框架就是帮助我们更高效开发网页的一套工具和规范。
常见前端框架有：
Vue
React
Angular
Vue 就是其中之一，而且它对初学者相对友好。
为什么要用框架？
因为网页项目一旦变大，就会遇到很多问题：
页面结构复杂
数据很多
功能很多
代码不好维护
框架就是为了解决这些问题的。
三、Vue 最核心的概念：组件
4. 组件（Component）
组件是 Vue 最核心、最重要的概念。
所谓组件，你可以理解成：
页面中的一个独立模块。
比如一个网页可以拆成：
顶部导航栏
左侧菜单
轮播图
商品列表
登录表单
页脚
这些都可以分别写成组件。
为什么要组件化？
因为这样做有很多好处：
页面结构更清晰
代码更容易复用
修改功能更方便
更适合大型项目开发
举例理解
比如登录页面里的输入框和按钮区域，你完全可以单独封装成一个“登录组件”。
5.单文件组件（SFC）
在 Vue 项目里，我们最常见的文件就是.vue文件，比如：
App.vueHome.vueLogin.vue
这种文件就叫单文件组件，英文是Single File Component，简称SFC。
一个.vue文件通常包含三部分：
<template> <!-- 页面结构 --> </template> <script setup> // 页面逻辑 </script> <style scoped> /* 页面样式 */ </style>三部分分别是什么？
template：写页面结构script：写逻辑代码style：写样式代码
小白理解
你可以把一个.vue文件理解成：
一个页面模块的完整包装盒，里面同时装着结构、逻辑和样式。
6. 根组件
根组件就是整个 Vue 应用最顶层的组件，通常就是：
App.vue所有其它组件，基本上都是从它开始一层层往下嵌套的。
小白理解
根组件相当于：
整个 Vue 项目的总入口页面。
四、Vue 页面是怎么写出来的？
7. 模板（Template）
模板就是 Vue 组件中写页面结构的地方，也就是：
<template> <h1>你好</h1> </template>Vue 的模板不是纯 HTML，它是：
HTML + Vue 的模板语法
你可以在模板中使用：
插值表达式
指令
事件绑定
条件渲染
列表渲染
8. 插值表达式
插值表达式就是模板里的双大括号：
{{ 变量名 }}例如：
<template> <h1>{{ msg }}</h1> </template>如果msg = '你好 Vue3'，页面就会显示：
你好 Vue3作用
它的作用就是：
把 JavaScript 中的数据显示到页面上。
9.指令（Directive）
指令是 Vue 提供的一种特殊语法，通常以v-开头。
常见指令有：
v-bindv-modelv-ifv-showv-forv-on
小白理解
指令可以理解成：
Vue给 HTML 增加的“特殊功能开关”。
五、Vue 最强大的地方：数据驱动页面
10. 数据绑定
数据绑定指的是：数据和页面建立联系。
当数据变化时，页面也会自动更新。
例如：
<script setup> const msg = 'Hello Vue' </script> <template> <h1>{{ msg }}</h1> </template>这里msg和页面内容就是绑定关系。
小白理解
Vue 不提倡你手动改 DOM，而是提倡你：
改数据，页面自动变。
这就叫数据驱动视图。
11. 视图
视图就是页面上展示给用户看的内容。
例如：
标题
列表
表单
图片
按钮
这些都属于视图的一部分。
小白理解
视图就是：
用户看见的页面。
12. 响应式（Reactivity）
响应式是 Vue3 的核心机制。
它的意思是：
当数据发生变化时，页面会自动响应并更新。
例如：
<script setup> import { ref } from 'vue' const count = ref(0) function add() { count.value++ } </script> <template> <button @click="add">点击</button> <p>{{ count }}</p> </template>每点击一次按钮，count变了，页面也跟着变。
小白理解
普通变量变化，页面不会自动更新。
响应式变量变化，页面会自动更新。
这就是响应式。
六、Vue3 里最常见的两个响应式 API
13. ref
ref是 Vue3 里最常用的响应式 API 之一。
它常用于定义：
数字
字符串
布尔值
例如：
import { ref } from 'vue' const count = ref(0) const title = ref('Vue3') const flag = ref(true)特点
在 JavaScript 中访问时，要写.value：
count.value++但是在模板中不用写.value：
<p>{{ count }}</p>小白记忆法
ref适合处理“单个值”。
14. reactive
reactive也是 Vue3 中创建响应式数据的方法。
它更适合处理：
对象
数组
例如：
import { reactive } from 'vue' const user = reactive({ name: '张三', age: 18 })然后可以直接写：
user.age++小白记忆法
reactive更适合处理“一组相关数据”。
15. ref 和 reactive 的区别
这是小白最容易混乱的地方。
ref
通常用来定义基本类型数据：
数字
字符串
布尔值
当然对象也能放进去，但不建议初学时乱用。
reactive
通常用来定义对象或数组。
最简单的记法
你先这样记就够了：
一个值，用
ref一个对象，用
reactive
七、Vue 模板里的高频专有术语
16. v-bind
v-bind用来动态绑定标签属性。
例如：
<img v-bind:src="imgUrl">它的简写形式是：
<img :src="imgUrl">常见用途
绑定图片地址
绑定链接地址
绑定 class
绑定 style
小白理解
v-bind的作用就是：
把数据绑定到 HTML 属性上。
17. v-model
v-model用于表单元素的双向绑定。
例如：
<input v-model="username">什么叫双向绑定？
输入框改了，数据会变
数据变了，输入框内容也会变
小白理解
v-model本质上就是：
让输入框和数据保持同步。
18. v-if
v-if用来做条件渲染。
<p v-if="flag">这段文字会显示</p>如果flag为true，显示。
如果flag为false，不显示。
小白理解
v-if是真的“创建/移除”元素。
19. v-show
v-show也能控制元素显示和隐藏。
<p v-show="flag">这段文字会显示</p>和v-if的区别
v-if：元素可能根本不存在v-show：元素还在，只是被隐藏了
简单记忆
不常切换：
v-if经常切换：
v-show
20. v-for
v-for用于循环渲染列表。
<li v-for="item in list" :key="item.id"> {{ item.name }} </li>作用
把数组中的每一项依次显示出来。
key 是什么？
key是每个元素的唯一标识，Vue 用它来更高效地更新列表。
小白理解
v-for就是：
用来重复生成一堆相似内容。
21. v-on
v-on用来绑定事件。
例如：
<button v-on:click="add">点我</button>简写形式是：
<button @click="add">点我</button>小白理解
它的作用就是：
给元素加事件，比如点击、输入、提交。
八、Vue3 组件之间怎么传值？
22. props
props是父组件传给子组件的数据。
父组件：
<Child :title="msg" />子组件：
defineProps(['title'])小白理解
props就是：
父亲给孩子传东西。
这是 Vue 里最基础的组件通信方式。
23. emit
emit是子组件向父组件发送消息的方式。
子组件：
const emit = defineEmits(['sendMsg']) emit('sendMsg', '你好父组件')父组件：
<Child @sendMsg="getMsg" />小白理解
emit就是：
子组件通知父组件：“我这里发生事了。”
24. 组件通信
组件通信就是：
组件与组件之间交换数据、传递信息。
常见形式有：
父传子：
props子传父：
emit
以后学深一点，还会接触：
兄弟组件通信
跨层组件通信
全局状态管理
但入门阶段先把props和emit搞懂最重要。
九、Vue3 中很重要但经常听不懂的术语
25. 生命周期
生命周期指的是一个组件从“出生”到“消失”经历的全过程。
比如：
创建
挂载
更新
卸载
Vue3 提供了很多生命周期钩子函数。
常见的有：
onMountedonUpdatedonUnmounted
26. 挂载（Mounted）
挂载的意思是：
组件已经真正出现在页面上了。
所以：
onMounted(() => { console.log('组件已经显示到页面了') })这个函数常用于：
页面初始化
发送请求
获取数据
做一些首次加载工作
27. 卸载（Unmounted）
卸载就是：
组件从页面中消失了，被移除了。
比如页面切换了，原来的组件不显示了，那它可能就会被卸载。
28. 钩子函数
钩子函数就是在某个特定阶段自动执行的函数。
例如：
组件挂载后执行
数据更新后执行
组件卸载后执行
小白理解
钩子函数相当于：
Vue 在某个时间点“帮你自动调用”的函数。
十、Vue3 里很常见的进阶名词
29. 计算属性（computed）
计算属性是根据已有数据“算出来”的一个新结果。
例如：
import { ref, computed } from 'vue' const firstName = ref('张') const lastName = ref('三') const fullName = computed(() => firstName.value + lastName.value)小白理解
computed适合那种：
由已有数据推导出来的新数据。
比如：
全名
总价
过滤结果
状态文字
30. 监听器（watch）
watch用来监听某个数据的变化。
例如：
watch(count, (newVal, oldVal) => { console.log('count 变化了') })作用
当某个数据变化时，执行一些额外操作。
例如：
输入变化时发请求
数据变化时做判断
监听路由变化
31. watchEffect
watchEffect也是监听，但它更自动。
watchEffect(() => { console.log(count.value) })只要这个函数里用到的响应式数据变了，它就会重新执行。
和watch的区别
watch：你明确告诉 Vue 监听谁watchEffect：函数里用到谁，就监听谁
32. 插槽（slot）
插槽是组件中预留的一块位置，让父组件可以向里面插入内容。
子组件：
<template> <div class="box"> <slot></slot> </div> </template>父组件：
<MyBox> <p>我是插进去的内容</p> </MyBox>小白理解
插槽就是：
组件给外界留的一个“填内容的位置”。
33. scoped
在样式中常见：
<style scoped> h1 { color: red; } </style>scoped表示这个样式只作用于当前组件，不会轻易影响其它组件。
小白理解
它的作用就是：
防止样式乱串。
十一、Vue3 项目结构相关术语
34. createApp
Vue3 创建应用时常见：
import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app')作用
这行代码做了三件事：
创建一个 Vue 应用
把
App.vue作为根组件挂载到页面中的
#app元素上
35. mount
mount的意思是挂载。
.mount('#app')意思是把 Vue 应用挂到 HTML 中 id 为app的元素上。
36. 入口文件
Vue 项目通常会有一个入口文件，比如：
main.js或者：
main.ts它的作用就是：
启动整个 Vue 项目。
十二、学 Vue3 一定会碰到的两个项目级名词
37. 路由（Router）
路由就是：
不同网址路径，对应不同页面组件。
比如：
/login对应登录页/home对应首页/about对应关于页
Vue3 一般配合vue-router使用。
小白理解
路由就是页面切换规则。
38. 单页应用（SPA）
SPA，全称Single Page Application，中文叫单页应用。
意思是整个网站通常只有一个 HTML 页面，切换页面时并不是整个网站重新刷新，而是动态切换内容。
小白理解
你可以把它理解成：
看起来像很多页面，其实底层经常只是一个页面在切换组件。
Vue 项目很多都是 SPA。
39. Vite
Vite 是现在 Vue3 项目很常用的构建工具。
我们创建 Vue3 项目时，经常会用到它。
它的作用
启动开发服务器
热更新
打包项目
提高开发效率
小白理解
Vite 就像是：
Vue 项目的启动器和打包器。
40. npm
npm 是 Node.js 自带的包管理工具。
我们经常会写：
npm install npm run dev作用
安装依赖
启动项目
管理第三方包
小白理解
npm 就是：
前端世界里的“应用商店 + 安装工具”。
十三、Vue3 中两个常听到的大词
41. Options API
这是 Vue2 中很常见的一种写法，在 Vue3 中也还能用。
例如：
export default { data() { return { count: 0 } }, methods: { add() { this.count++ } } }这种写法把代码分散到：
datamethodscomputedwatch
等不同区域。
42. Composition API
这是 Vue3 非常重要的思想。
它的核心思路是：
把相关逻辑写在一起，而不是按功能类型拆开。
例如：
import { ref } from 'vue' const count = ref(0) function add() { count.value++ }小白理解
Composition API 更适合大型项目，逻辑更集中，也更清晰。
43. script setup
这是 Vue3 中非常常用、也非常推荐的写法。
例如：
<script setup> import { ref } from 'vue' const count = ref(0) </script>小白理解
它就是 Vue3 为 Composition API 提供的一种更简洁、更舒服的写法。
你现在学 Vue3，大多数情况下接触到的都是它。
十四、给小白的最终总结
如果你是刚入门 Vue3，我建议你先把这些名词分成 5 组记忆。
第一组：页面基础
DOM：浏览器中的页面结构
虚拟 DOM：Vue 内存中的页面草稿
视图：用户看到的页面
第二组：Vue 核心思想
组件：页面模块
模板：页面结构
数据绑定：数据和页面建立联系
响应式：数据一变，页面自动更新
第三组：最常用语法
refreactivev-bindv-modelv-ifv-showv-forv-on
第四组：组件通信
props：父传子emit：子传父slot：插槽
第五组：项目级概念
App.vuecreateApp路由
SPA
Vite
npm
十五、结语
对于小白来说，学 Vue3 最难的不是代码，而是：
一上来全是新名词，听不懂就会越学越乱。
所以最好的办法不是急着背代码，而是先把这些高频术语弄明白。
当你知道老师嘴里的“组件、响应式、props、路由、插槽”分别是什么时，后面学起来就顺很多了。
如果你是刚开始学 Vue3，那么请先牢牢记住一句话：
Vue 的核心思想就是：把页面拆成组件，用数据驱动页面更新。
这句话一旦真正理解，Vue3 就算入门成功了一半。