Vue3 是目前主流的前端框架版本相较于 Vue2带来了组合式API、全新响应式系统、性能大幅提升、代码更优雅、TS友好等革命性升级。本文通过大量分类表格完整、系统、细致地梳理 Vue3 所有核心语法涵盖基础语法、组合式API、生命周期、响应式、通信、进阶语法、工程化特性适合零基础学习、面试背诵、项目复盘。一、Vue3 版本与语法模式区分Vue3 存在两种编码模式选项式API兼容Vue2、组合式APIVue3推荐目前企业项目全部以组合式API setup语法糖为标准。编码模式特点适用场景选项式 API基于 data、methods、watch、computed 选项编写结构分散、大型项目难以维护小型页面、老项目维护、Vue2 迁移项目组合式 APIsetup按功能逻辑聚合代码支持TS、逻辑复用、代码集中、可抽离hooks所有 Vue3 新项目、中大型项目、企业级开发script setup 语法糖组合式API的简化写法无需return、无需注册组件、代码极简目前 Vue3 项目标准写法二、Vue3 基础模板语法插值/指令2.1 基础插值与表达式语法作用示例{{ 变量 }}文本插值响应式显示数据{{ name }}{{ 表达式 }}支持单行JS表达式运算{{ count 1 }}v-text替换元素全部文本无闪烁div v-textmsg/divv-html解析渲染HTML内容div v-htmlhtmlStr/div2.2 Vue3 常用指令大全指令功能说明备注v-bind动态绑定属性简写:绑定class、style、src、title等v-on绑定事件简写click/input/change/keyup等v-model双向数据绑定Vue3支持组件v-model多绑定v-if / v-else / v-else-if条件渲染销毁/创建DOM适合频繁切换、权限渲染v-show显示隐藏控制CSS display适合频繁显示隐藏性能更高v-for列表循环渲染必须搭配keyv-once元素/组件只渲染一次不再更新优化静态内容性能v-pre跳过编译原样显示展示{{}}源码v-cloak解决插值闪烁问题配合CSS使用三、Vue3 核心响应式语法ref / reactiveVue3 采用 Proxy 实现响应式通过 ref、reactive 创建响应式数据是 Vue3 最核心的基础语法。API作用适用数据类型取值方式ref创建基础类型响应式数据String、Number、Boolean、Null、Undefined脚本中.value模板中直接使用reactive创建复杂对象响应式数据Object、Array直接属性点取无需.valueshallowRef浅层ref仅替换整个值更新复杂数据少量更新场景.valueshallowReactive浅层响应式仅第一层响应深层数据不需要响应场景直接取值readonly响应式数据只读保护所有响应式数据不可修改toRefs解构reactive对象保留响应式批量解构对象属性解构后属性为ref类型toRef单独取出对象某个属性转为ref单个属性导出.value修改四、Vue3 计算属性与侦听器4.1 computed 计算属性写法作用特点只读 computed根据依赖自动计算出新值有缓存、依赖不变不重新计算可写 computed支持 get 获取、set 修改双向联动计算4.2 watch / watchEffect 侦听语法API功能触发时机watch精准监听指定数据变化默认初始不执行数据变化执行watch immediate立即执行一次监听页面加载立即触发watch deep深度监听对象/数组深层属性变化可监听watchEffect自动收集依赖无需指定监听源默认立即执行依赖变化自动执行五、Vue3 完整生命周期组合式APIVue3 组合式API生命周期全部以onXXX开头比Vue2更直观可在setup中直接使用。生命周期函数执行时机常用场景onBeforeMount挂载前预处理数据onMountedDOM挂载完成发请求、操作DOM、初始化插件onBeforeUpdate数据更新前更新前状态保存onUpdated数据更新DOM完成更新后DOM操作onBeforeUnmount组件卸载前清除定时器、取消请求onUnmounted组件卸载完成销毁事件监听onActivatedkeep-alive组件激活缓存页面刷新数据onDeactivatedkeep-alive组件失活缓存页面状态保存六、Vue3 组件通信全套语法Vue3 废弃了 Vue2 的 bus 事件总线统一使用规范通信方式以下是全部组件通信方案表格汇总。通信方式适用场景核心API父传子父子组件传值defineProps子传父子组件向父组件触发事件defineEmits祖孙跨级传值多层级嵌套传值provide / inject组件实例获取父获取子DOM/方法ref / defineExpose全局状态通信任意组件全局共享数据PiniaVue3官方替代Vuex6.1 Props 父传子规范写法配置项作用type约束参数类型required是否必填default默认值validator自定义校验规则七、Vue3 插槽语法大全插槽类型作用使用场景默认插槽组件内部自定义主体内容通用卡片、弹窗内容自定义具名插槽指定位置分发内容头部、尾部、侧边自定义区域作用域插槽子组件向父组件传递数据表格单元格自定义、列表项自定义八、Vue3 高级内置特性语法8.1 内置组件组件功能component动态组件渲染keep-alive组件缓存避免重复渲染Teleport瞬移DOM到指定节点弹窗、浮层神器Suspense异步组件加载等待占位8.2 工具函数工具方法作用isRef判断是否为ref响应式isReactive判断是否为reactive响应式unref快速解包ref值watchOnce只监听一次九、Pinia 状态管理Vue3官方核心模块作用state全局状态数据getters全局计算属性actions全局方法同步/异步十、Vue3 与 Vue2 核心区别总结对比项Vue2Vue3响应式原理Object.definePropertyProxy支持数组、深层监听编码方式选项式API逻辑分散组合式API逻辑聚合支持TS状态管理VuexPinia简洁、无mutations根节点必须单根支持多根节点性能一般编译优化、虚拟DOM重写、更快十一、Vue3 语法整体总结1.语法更简洁script setup 语法糖大幅精简代码无需注册组件、无需return。2.响应式更强Proxy 全面解决 Vue2 数组、深层数据监听缺陷。3.逻辑更清晰组合式API按功能聚合代码适合大型项目维护。4.工程化更强全面适配TS、Vite、Pinia是目前企业唯一主流版本。5.新增大量高级特性Teleport、Suspense、多v-model、浅层响应等开发体验大幅提升。