简介一份面向Web开发初学者的Vue.js入门笔记系统梳理前端框架中的核心概念与落地路径。内容从Vue.js的历史和设计哲学入手逐步讲解组件化、虚拟DOM、双向数据绑定等关键特性并配合安装配置、使用CDN与npm引入、Vue CLI创建项目等步骤以及Vue实例中data、methods、computed、watch选项的代码示例帮助读者理解数据驱动视图的实现方式适合零基础或希望快速切入Vue的前端新人及在校学生。资源为单个docx文档大小约39KB内容精炼、结构完整便于按章节阅读与随手查阅。目前已有90人浏览学习。文档采用渐进式讲解知识点前后衔接既有框架原理说明也有可直接上手的示例代码读者可按步骤动手验证学完后能独立搭建基础Vue应用为后续深入组件通信、路由与状态管理打下清晰基础。1. 从第一行 JavaScript 到框架思维很多人在学 Vue 之前都会卡在一个问题上我已经会写 JavaScript 了为什么还要学一个框架这个问题的答案可以用一句话概括——框架不是在帮你写代码而是在帮你约束代码的写法。Vue 的核心价值不是让你少写几行代码而是让「数据和页面」之间的关系变得可预测。你不再需要手动去 DOM 里翻找某个节点然后改它的内容你只需要告诉 Vue「数据变了」页面自动跟着变。这个思维转变才是 Vue 入门真正的门槛。这篇文章不打算从安装开始一步步讲而是把 Vue 里最基础的几个概念拆开揉碎响应式数据、模板语法、条件与列表渲染、组件通信。这些是 Vue 的骨架也是面试里被问得最频繁的部分。文章里的代码全部是 Vue 3 的组合式 API 写法因为这是当前的主流用法。如果你用的是 Vue 2 的选项式先把思路看懂再对照官方文档迁移也不迟。前端框架入门这件事学的是思维方式不是背 API。2. Vue 响应式系统与单项数据流先搞懂 v-model 到底做了什么2.1 从原生 JavaScript 到 Vue 的响应式模型在原生 JavaScript 里如果页面上有一个输入框你要实现「输入内容同步显示在另一个元素上」通常是这样写的const input document.querySelector(#input); const output document.querySelector(#output); input.addEventListener(input, (e) { output.textContent e.target.value; });这段代码本身没有错但问题在于数据、监听器、DOM 操作全都散落在不同的位置。如果页面里有十个这样的关联关系代码就会开始变得难以维护。Vue 对这个问题的解法是引入「响应式数据」的概念——声明一个变量让页面上的某些部分和它绑定当变量变化时绑定的部分自动更新。Vue 3 里实现响应式的核心是reactive和ref这两个函数。reactive接收一个对象返回这个对象的响应式代理ref则更灵活它可以包裹任意类型的值包括原始类型。import { ref } from vue; const count ref(0); count.value 1;注意这里访问ref创建的值必须通过.value。这是因为 JavaScript 没有办法对原始类型做代理只能用一个对象包一层。这个设计经常让新手困惑但理解了原理之后就顺理成章了ref的返回值是一个Ref对象它的value属性才是真正的值。2.2 v-model 是语法糖拆开看 v-bind 和 v-onv-model是 Vue 入门第一个让人「哇」的功能但也是一直被人误解的功能。它看起来像是在做「双向绑定」实际上 Vue 的响应式数据流是单向的数据变化驱动视图更新视图变化通过事件通知数据。先看一个最简单的例子script setup import { ref } from vue; const message ref(); /script template input v-modelmessage / p{{ message }}/p /template这段代码等价于下面这种写法template input :valuemessage inputmessage $event.target.value / p{{ message }}/p /templatev-model的本质是v-bind:value加v-on:input的语法糖。v-bind把数据传给组件的value属性v-on监听输入事件在回调里更新 JavaScript 侧的数据。说它是「双向绑定」是因为你观察到的现象是双向的但数据流向仍然是「数据 → 视图」和「视图 → 数据」两个方向都有明确的触发时机。2.3 v-model 的修饰符与参数细节v-model还支持修饰符常用的是.trim、.number和.lazy。template !-- 自动去除首尾空格 -- input v-model.trimusername / !-- 自动转数字注意如果输入无法解析为数字会保留原字符串 -- input v-model.numberage / !-- 从 input 事件改为 change 事件触发适合开销较大的输入场景 -- input v-model.lazydescription / /template.lazy修饰符值得单独说一句。默认v-model在input事件触发时同步更新数据改为.lazy后只在change事件输入框失焦或回车时同步。如果你需要做输入过程中的实时搜索不要用.lazy如果你只是提交表单时取值.lazy可以减少更新次数。2.4 v-model 在自定义组件上的使用很多初学者第一次在自定义组件上用v-model会踩坑因为默认的value属性和input事件约定在自定义组件上并不成立。Vue 3 的默认约定是modelValue属性和update:modelValue事件。!-- 子组件 Child.vue -- script setup const props defineProps({ modelValue: { type: String, default: } }); const emit defineEmits([update:modelValue]); function handleInput(event) { emit(update:modelValue, event.target.value); } /script template input :valuemodelValue inputhandleInput / /template父组件这样使用template Child v-modelsearchText / /template关键点在于子组件不能直接修改props.modelValue必须通过emit通知父组件更新。这是 Vue 单向数据流的核心约束——props 是只读的。违反这个约束的代码也许能跑但会让数据的来源和修改路径变得混乱项目一复杂就变成「找 bug 地狱」。3. 条件渲染与列表渲染v-if、v-show、v-for 的真实差异与常见坑3.1 v-if 和 v-show渲染 vs 切换不只是性能问题前端框架入门离不开「页面上这块内容什么时候显示」的问题。Vue 提供了两个指令v-if和v-show。表面上看它们都能控制元素的显示与隐藏但实现机制完全不同。v-if是「真正的条件渲染」。条件为假时Vue 根本不会把元素渲染到 DOM 里。条件从假变为真时Vue 会重新创建这个元素及其所有子组件。v-show则是单纯地切换 CSS 的display: none属性元素始终在 DOM 里存在。这个差异直接决定了适用的场景切换频率低用v-if因为它的开销是一次性的懒渲染而且可以配合else分支切换频率高用v-show因为display切换的性能开销远小于 DOM 的创建和销毁template div v-ifisAdmin管理员菜单/div div v-else普通用户菜单/div div v-showisVisible这个元素始终在 DOM 中/div /template另外一个容易忽略的点v-if和v-for同时出现在同一个元素上时Vue 3 中v-if的优先级高于v-for。这意味着v-if无法访问v-for循环中的变量如果写了这种代码eslint 也会给出vue/no-use-v-if-with-v-for警告。规范的写法是把v-if放到循环体的内部template div v-foritem in items :keyitem.id span v-ifitem.active{{ item.name }}/span /div /template3.2 v-for 的 :key 为什么重要为什么不要用 index 当 keyv-for用来渲染列表:key是它的必填伴侣。key 的作用是让 Vue 在更新列表时能识别哪些元素被改动、哪些被新增、哪些被删除。没有 keyVue 只能靠「位置」来对比新旧节点这会导致状态错乱。看一个具体场景列表项本身带有输入状态比如一个待办事项列表每项前面有复选框。template div v-for(item, index) in todos :keyitem.id input typecheckbox v-modelitem.done / span :class{ completed: item.done }{{ item.text }}/span /div /template如果这里用:keyindex当列表中间插入一条数据时Vue 从中间开始的所有节点都会复用旧数据对应的 DOM复选框的勾选状态就会整个错位。用item.id作 keyVue 才能精确地知道哪一项是新增的。规则只有一条key 必须是列表项中「稳定且唯一」的值通常来自后端返回的 id。3.3 列表渲染的过滤器遍历对象与范围数字除了遍历数组v-for还可以遍历对象和数字范围。遍历对象时第二个参数是键名第三个参数是索引template div v-for(value, key, index) in userInfo :keykey {{ index }}. {{ key }}: {{ value }} /div /template遍历数字范围时注意 Vue 从 1 开始template li v-forpage in totalPages :keypage{{ page }}/li /template这个写法常见于分页器的实现。totalPages指向一个数字Vue 会循环 1 到 totalPages 次从 1 开始计数。如果你习惯了 JavaScript 中数组下标从 0 开始的约定这里要特别留意。3.4 过滤列表的正确姿势computed 而不是方法「过滤后的列表」是列表渲染里最常见的需求。新手容易直接在模板里写一个方法调用template div v-foritem in filterList(searchText) :keyitem.id {{ item.name }} /div /template这个写法能跑但每次组件重新渲染时filterList都会被重新执行一次哪怕searchText根本没变。更好的做法是用computed缓存计算结果script setup import { ref, computed } from vue; const searchText ref(); const allItems ref([ { id: 1, name: JavaScript 基础 }, { id: 2, name: Vue 响应式原理 }, { id: 3, name: 组件通信思路 } ]); const filteredItems computed(() { if (!searchText.value) return allItems.value; return allItems.value.filter((item) item.name.includes(searchText.value) ); }); /script template input v-modelsearchText / ul li v-foritem in filteredItems :keyitem.id{{ item.name }}/li /ul /templatecomputed会基于它内部读取的响应式数据做依赖追踪只有依赖变化时才会重新计算。这是 Vue 响应式系统设计中最优雅的部分之一也是区分「会写 Vue」和「还在用 Vue 写 jQuery」的分水岭。4. 组件通信props、emits、provide/inject 和插槽的适用边界4.1 props 单向数据流与命名规范组件是 Vue 应用的构建单位。父组件向子组件传递数据最常见的方式是 props。props 是只读的这个约束前面已经提过但这里要强调的是为什么要这么做双向绑定的组件通信会让数据变更的来源变得难以追踪调试时不知道是哪个组件改了数据。单向数据流强制数据变更必须经过明确的出口这也就是子组件里的emit。props 的命名是一个容易踩的小坑。在模板里多单词 props 用 kebab-case 写法在传递时你需要保证传给组件的属性名和子组件声明的 props 名一致!-- 父组件中 -- Child :post-titletitle :post-contentcontent / !-- 子组件中 -- script setup const props defineProps({ postTitle: String, postContent: { type: String, default: } }); /scriptprops 的类型声明不仅仅是为了文档化它还承担运行时校验的功能。在开发模式下如果传入的类型不匹配Vue 会在控制台抛出警告。这能帮你提前发现很多隐性问题。4.2 emits把事件「申明」出来不只是调用子组件要修改数据或者通知父组件做某件事通过emit发送事件。defineEmits不只是声明这个组件能触发哪些事件更重要的是明确了组件的对外接口。script setup const emit defineEmits([delete, update]); function handleDelete() { emit(delete, itemId.value); } /script父组件这样监听template TodoItem deletehandleDeleteItem / /template注意事件名的大小写约定。在模板中监听自定义事件时推荐使用 kebab-case而在子组件定义 emit 时可以使用 camelCase。Vue 会自动做转换但这个转换有时候会让人困惑建议团队内统一写法。4.3 隔层传值provide/inject 的使用边界如果组件层级很深比如 5 层嵌套中间的层级又不关心数据本身逐层传 props 会非常繁琐。Vue 提供了provide和inject来处理这种情况。!-- 根组件 -- script setup import { provide, ref } from vue; const theme ref(dark); provide(theme, theme); /script !-- 深层子组件 -- script setup import { inject } from vue; const theme inject(theme, light); /scriptinject的第二个参数是默认值。如果祖先组件没有提供对应的数据默认值就会生效。这个特性看起来很美好但有代价数据来源变得隐式组件不再能直观地从 props 中看出来它依赖什么。建议只在「跨多层且不需要中间层感知」的场景使用比如主题、用户登录态这类全局共享的状态。4.4 插槽结构复用的利器插槽处理的是「组件内部有部分内容需要父组件塞进来」的场景。最典型的就是弹窗组件弹窗的骨架、遮罩、关闭逻辑都是通用的但弹窗内容每个页面都不一样。!-- BaseDialog.vue -- script setup const visible defineModel(visible, { type: Boolean, default: false }); /script template div v-ifvisible classdialog-mask div classdialog-body slot nameheader默认标题/slot slot默认内容/slot slot namefooter button clickvisible false关闭/button /slot /div /div /template父组件这样填充template BaseDialog v-model:visibleshowDialog template #header删除确认/template p删除后无法恢复确定继续吗/p template #footer button clickshowDialog false取消/button button clickconfirmDelete确认删除/button /template /BaseDialog /template具名插槽用#name语法默认插槽不需要指定名称。一段内容可能同时出现在两个插槽里的情况很罕见但需要时可以给插槽绑定 props实现「作用域插槽」让父组件能拿到子组件内部的数据。这属于进阶用法入门阶段掌握具名插槽就足够应付大多数弹窗类需求了。4.5 组件通信方式的选择参考场景推荐方案说明父子组件直接传值props 向下emits 向上最常见数据流清晰兄弟组件共享状态提升到共同父组件Vue 官方推荐的层级管理深层嵌套组件传值provide / inject避免逐层透传子组件插入内容插槽 slot结构与逻辑分离跨页面共享状态Pinia 等状态库页面级状态后续进阶组件通信没有银弹选择的标准只有一个数据在组件树中传的层级越少代码越好维护。表格里「提升到共同父组件」是很多初学者容易忽略的思路多考虑这一层往往就不需要引入状态管理库了。5. 模板调试与三个必会的性能优化技巧调试 Vue 应用的第一件事是安装 Vue Devtools 浏览器扩展。它会自动识别页面上的 Vue 实例显示组件树和每个组件的数据。配合ref的展开检查定位「数据对不对、数据在哪个组件里变了」会非常高效。5.1 性能优化一能用 computed 就不用方法前面已经讲过computed的缓存机制这里补充一个对比数据。模板里每调用一次方法不管依赖的数据变没变方法都会执行。十个列表项就是十次执行如果这个方法是document.querySelectorAll查询 DOM那开销就更大了。:key原则保持不变但computed的价值被很多人低估。5.2 性能优化二v-once 标记静态内容如果某个节点渲染一次后就不再变化给它加上v-once指令。Vue 会跳过这个节点的后续更新检查template div v-once h1{{ title }}/h1 p这段内容在数据变化时不做更新检查/p /div /template新闻标题、固定文案这类内容适合用v-once但如果是频繁受数据驱动的区域加v-once可能反而造成数据不更新属于双刃剑。5.3 性能优化三v-memo 缓存长列表子元素Vue 3.2 之后提供了v-memo它接收一个数组数组里的值不变时跳过对应子树的更新。长列表场景下这个指令的价值很大template TodoItem v-fortodo in todos :keytodo.id :todotodo v-memo[todo.done, todo.title] / /template用todo.done和todo.title两个字段做 memo 键只有这两项变化时才会更新这个子元素。注意v-memo只有在列表渲染时才有明显收益且它使用的变量必须来自所渲染的元素自身否则缓存命中会出错。最后说一个调试技巧在模板里打断点不方便时可以在 script 里用watchEffect观察数据变化import { watchEffect } from vue; watchEffect(() { console.log(当前标题是, props.title); });watchEffect会在依赖变化时自动执行回调打印出最新的值。定位「哪个数据先变、哪个组件后变」这类问题时比逐级 console.log 高效得多。本文还有配套的精品资源点击获取
Vue 3 入门核心：响应式数据、v-model、组件通信与性能优化
简介一份面向Web开发初学者的Vue.js入门笔记系统梳理前端框架中的核心概念与落地路径。内容从Vue.js的历史和设计哲学入手逐步讲解组件化、虚拟DOM、双向数据绑定等关键特性并配合安装配置、使用CDN与npm引入、Vue CLI创建项目等步骤以及Vue实例中data、methods、computed、watch选项的代码示例帮助读者理解数据驱动视图的实现方式适合零基础或希望快速切入Vue的前端新人及在校学生。资源为单个docx文档大小约39KB内容精炼、结构完整便于按章节阅读与随手查阅。目前已有90人浏览学习。文档采用渐进式讲解知识点前后衔接既有框架原理说明也有可直接上手的示例代码读者可按步骤动手验证学完后能独立搭建基础Vue应用为后续深入组件通信、路由与状态管理打下清晰基础。1. 从第一行 JavaScript 到框架思维很多人在学 Vue 之前都会卡在一个问题上我已经会写 JavaScript 了为什么还要学一个框架这个问题的答案可以用一句话概括——框架不是在帮你写代码而是在帮你约束代码的写法。Vue 的核心价值不是让你少写几行代码而是让「数据和页面」之间的关系变得可预测。你不再需要手动去 DOM 里翻找某个节点然后改它的内容你只需要告诉 Vue「数据变了」页面自动跟着变。这个思维转变才是 Vue 入门真正的门槛。这篇文章不打算从安装开始一步步讲而是把 Vue 里最基础的几个概念拆开揉碎响应式数据、模板语法、条件与列表渲染、组件通信。这些是 Vue 的骨架也是面试里被问得最频繁的部分。文章里的代码全部是 Vue 3 的组合式 API 写法因为这是当前的主流用法。如果你用的是 Vue 2 的选项式先把思路看懂再对照官方文档迁移也不迟。前端框架入门这件事学的是思维方式不是背 API。2. Vue 响应式系统与单项数据流先搞懂 v-model 到底做了什么2.1 从原生 JavaScript 到 Vue 的响应式模型在原生 JavaScript 里如果页面上有一个输入框你要实现「输入内容同步显示在另一个元素上」通常是这样写的const input document.querySelector(#input); const output document.querySelector(#output); input.addEventListener(input, (e) { output.textContent e.target.value; });这段代码本身没有错但问题在于数据、监听器、DOM 操作全都散落在不同的位置。如果页面里有十个这样的关联关系代码就会开始变得难以维护。Vue 对这个问题的解法是引入「响应式数据」的概念——声明一个变量让页面上的某些部分和它绑定当变量变化时绑定的部分自动更新。Vue 3 里实现响应式的核心是reactive和ref这两个函数。reactive接收一个对象返回这个对象的响应式代理ref则更灵活它可以包裹任意类型的值包括原始类型。import { ref } from vue; const count ref(0); count.value 1;注意这里访问ref创建的值必须通过.value。这是因为 JavaScript 没有办法对原始类型做代理只能用一个对象包一层。这个设计经常让新手困惑但理解了原理之后就顺理成章了ref的返回值是一个Ref对象它的value属性才是真正的值。2.2 v-model 是语法糖拆开看 v-bind 和 v-onv-model是 Vue 入门第一个让人「哇」的功能但也是一直被人误解的功能。它看起来像是在做「双向绑定」实际上 Vue 的响应式数据流是单向的数据变化驱动视图更新视图变化通过事件通知数据。先看一个最简单的例子script setup import { ref } from vue; const message ref(); /script template input v-modelmessage / p{{ message }}/p /template这段代码等价于下面这种写法template input :valuemessage inputmessage $event.target.value / p{{ message }}/p /templatev-model的本质是v-bind:value加v-on:input的语法糖。v-bind把数据传给组件的value属性v-on监听输入事件在回调里更新 JavaScript 侧的数据。说它是「双向绑定」是因为你观察到的现象是双向的但数据流向仍然是「数据 → 视图」和「视图 → 数据」两个方向都有明确的触发时机。2.3 v-model 的修饰符与参数细节v-model还支持修饰符常用的是.trim、.number和.lazy。template !-- 自动去除首尾空格 -- input v-model.trimusername / !-- 自动转数字注意如果输入无法解析为数字会保留原字符串 -- input v-model.numberage / !-- 从 input 事件改为 change 事件触发适合开销较大的输入场景 -- input v-model.lazydescription / /template.lazy修饰符值得单独说一句。默认v-model在input事件触发时同步更新数据改为.lazy后只在change事件输入框失焦或回车时同步。如果你需要做输入过程中的实时搜索不要用.lazy如果你只是提交表单时取值.lazy可以减少更新次数。2.4 v-model 在自定义组件上的使用很多初学者第一次在自定义组件上用v-model会踩坑因为默认的value属性和input事件约定在自定义组件上并不成立。Vue 3 的默认约定是modelValue属性和update:modelValue事件。!-- 子组件 Child.vue -- script setup const props defineProps({ modelValue: { type: String, default: } }); const emit defineEmits([update:modelValue]); function handleInput(event) { emit(update:modelValue, event.target.value); } /script template input :valuemodelValue inputhandleInput / /template父组件这样使用template Child v-modelsearchText / /template关键点在于子组件不能直接修改props.modelValue必须通过emit通知父组件更新。这是 Vue 单向数据流的核心约束——props 是只读的。违反这个约束的代码也许能跑但会让数据的来源和修改路径变得混乱项目一复杂就变成「找 bug 地狱」。3. 条件渲染与列表渲染v-if、v-show、v-for 的真实差异与常见坑3.1 v-if 和 v-show渲染 vs 切换不只是性能问题前端框架入门离不开「页面上这块内容什么时候显示」的问题。Vue 提供了两个指令v-if和v-show。表面上看它们都能控制元素的显示与隐藏但实现机制完全不同。v-if是「真正的条件渲染」。条件为假时Vue 根本不会把元素渲染到 DOM 里。条件从假变为真时Vue 会重新创建这个元素及其所有子组件。v-show则是单纯地切换 CSS 的display: none属性元素始终在 DOM 里存在。这个差异直接决定了适用的场景切换频率低用v-if因为它的开销是一次性的懒渲染而且可以配合else分支切换频率高用v-show因为display切换的性能开销远小于 DOM 的创建和销毁template div v-ifisAdmin管理员菜单/div div v-else普通用户菜单/div div v-showisVisible这个元素始终在 DOM 中/div /template另外一个容易忽略的点v-if和v-for同时出现在同一个元素上时Vue 3 中v-if的优先级高于v-for。这意味着v-if无法访问v-for循环中的变量如果写了这种代码eslint 也会给出vue/no-use-v-if-with-v-for警告。规范的写法是把v-if放到循环体的内部template div v-foritem in items :keyitem.id span v-ifitem.active{{ item.name }}/span /div /template3.2 v-for 的 :key 为什么重要为什么不要用 index 当 keyv-for用来渲染列表:key是它的必填伴侣。key 的作用是让 Vue 在更新列表时能识别哪些元素被改动、哪些被新增、哪些被删除。没有 keyVue 只能靠「位置」来对比新旧节点这会导致状态错乱。看一个具体场景列表项本身带有输入状态比如一个待办事项列表每项前面有复选框。template div v-for(item, index) in todos :keyitem.id input typecheckbox v-modelitem.done / span :class{ completed: item.done }{{ item.text }}/span /div /template如果这里用:keyindex当列表中间插入一条数据时Vue 从中间开始的所有节点都会复用旧数据对应的 DOM复选框的勾选状态就会整个错位。用item.id作 keyVue 才能精确地知道哪一项是新增的。规则只有一条key 必须是列表项中「稳定且唯一」的值通常来自后端返回的 id。3.3 列表渲染的过滤器遍历对象与范围数字除了遍历数组v-for还可以遍历对象和数字范围。遍历对象时第二个参数是键名第三个参数是索引template div v-for(value, key, index) in userInfo :keykey {{ index }}. {{ key }}: {{ value }} /div /template遍历数字范围时注意 Vue 从 1 开始template li v-forpage in totalPages :keypage{{ page }}/li /template这个写法常见于分页器的实现。totalPages指向一个数字Vue 会循环 1 到 totalPages 次从 1 开始计数。如果你习惯了 JavaScript 中数组下标从 0 开始的约定这里要特别留意。3.4 过滤列表的正确姿势computed 而不是方法「过滤后的列表」是列表渲染里最常见的需求。新手容易直接在模板里写一个方法调用template div v-foritem in filterList(searchText) :keyitem.id {{ item.name }} /div /template这个写法能跑但每次组件重新渲染时filterList都会被重新执行一次哪怕searchText根本没变。更好的做法是用computed缓存计算结果script setup import { ref, computed } from vue; const searchText ref(); const allItems ref([ { id: 1, name: JavaScript 基础 }, { id: 2, name: Vue 响应式原理 }, { id: 3, name: 组件通信思路 } ]); const filteredItems computed(() { if (!searchText.value) return allItems.value; return allItems.value.filter((item) item.name.includes(searchText.value) ); }); /script template input v-modelsearchText / ul li v-foritem in filteredItems :keyitem.id{{ item.name }}/li /ul /templatecomputed会基于它内部读取的响应式数据做依赖追踪只有依赖变化时才会重新计算。这是 Vue 响应式系统设计中最优雅的部分之一也是区分「会写 Vue」和「还在用 Vue 写 jQuery」的分水岭。4. 组件通信props、emits、provide/inject 和插槽的适用边界4.1 props 单向数据流与命名规范组件是 Vue 应用的构建单位。父组件向子组件传递数据最常见的方式是 props。props 是只读的这个约束前面已经提过但这里要强调的是为什么要这么做双向绑定的组件通信会让数据变更的来源变得难以追踪调试时不知道是哪个组件改了数据。单向数据流强制数据变更必须经过明确的出口这也就是子组件里的emit。props 的命名是一个容易踩的小坑。在模板里多单词 props 用 kebab-case 写法在传递时你需要保证传给组件的属性名和子组件声明的 props 名一致!-- 父组件中 -- Child :post-titletitle :post-contentcontent / !-- 子组件中 -- script setup const props defineProps({ postTitle: String, postContent: { type: String, default: } }); /scriptprops 的类型声明不仅仅是为了文档化它还承担运行时校验的功能。在开发模式下如果传入的类型不匹配Vue 会在控制台抛出警告。这能帮你提前发现很多隐性问题。4.2 emits把事件「申明」出来不只是调用子组件要修改数据或者通知父组件做某件事通过emit发送事件。defineEmits不只是声明这个组件能触发哪些事件更重要的是明确了组件的对外接口。script setup const emit defineEmits([delete, update]); function handleDelete() { emit(delete, itemId.value); } /script父组件这样监听template TodoItem deletehandleDeleteItem / /template注意事件名的大小写约定。在模板中监听自定义事件时推荐使用 kebab-case而在子组件定义 emit 时可以使用 camelCase。Vue 会自动做转换但这个转换有时候会让人困惑建议团队内统一写法。4.3 隔层传值provide/inject 的使用边界如果组件层级很深比如 5 层嵌套中间的层级又不关心数据本身逐层传 props 会非常繁琐。Vue 提供了provide和inject来处理这种情况。!-- 根组件 -- script setup import { provide, ref } from vue; const theme ref(dark); provide(theme, theme); /script !-- 深层子组件 -- script setup import { inject } from vue; const theme inject(theme, light); /scriptinject的第二个参数是默认值。如果祖先组件没有提供对应的数据默认值就会生效。这个特性看起来很美好但有代价数据来源变得隐式组件不再能直观地从 props 中看出来它依赖什么。建议只在「跨多层且不需要中间层感知」的场景使用比如主题、用户登录态这类全局共享的状态。4.4 插槽结构复用的利器插槽处理的是「组件内部有部分内容需要父组件塞进来」的场景。最典型的就是弹窗组件弹窗的骨架、遮罩、关闭逻辑都是通用的但弹窗内容每个页面都不一样。!-- BaseDialog.vue -- script setup const visible defineModel(visible, { type: Boolean, default: false }); /script template div v-ifvisible classdialog-mask div classdialog-body slot nameheader默认标题/slot slot默认内容/slot slot namefooter button clickvisible false关闭/button /slot /div /div /template父组件这样填充template BaseDialog v-model:visibleshowDialog template #header删除确认/template p删除后无法恢复确定继续吗/p template #footer button clickshowDialog false取消/button button clickconfirmDelete确认删除/button /template /BaseDialog /template具名插槽用#name语法默认插槽不需要指定名称。一段内容可能同时出现在两个插槽里的情况很罕见但需要时可以给插槽绑定 props实现「作用域插槽」让父组件能拿到子组件内部的数据。这属于进阶用法入门阶段掌握具名插槽就足够应付大多数弹窗类需求了。4.5 组件通信方式的选择参考场景推荐方案说明父子组件直接传值props 向下emits 向上最常见数据流清晰兄弟组件共享状态提升到共同父组件Vue 官方推荐的层级管理深层嵌套组件传值provide / inject避免逐层透传子组件插入内容插槽 slot结构与逻辑分离跨页面共享状态Pinia 等状态库页面级状态后续进阶组件通信没有银弹选择的标准只有一个数据在组件树中传的层级越少代码越好维护。表格里「提升到共同父组件」是很多初学者容易忽略的思路多考虑这一层往往就不需要引入状态管理库了。5. 模板调试与三个必会的性能优化技巧调试 Vue 应用的第一件事是安装 Vue Devtools 浏览器扩展。它会自动识别页面上的 Vue 实例显示组件树和每个组件的数据。配合ref的展开检查定位「数据对不对、数据在哪个组件里变了」会非常高效。5.1 性能优化一能用 computed 就不用方法前面已经讲过computed的缓存机制这里补充一个对比数据。模板里每调用一次方法不管依赖的数据变没变方法都会执行。十个列表项就是十次执行如果这个方法是document.querySelectorAll查询 DOM那开销就更大了。:key原则保持不变但computed的价值被很多人低估。5.2 性能优化二v-once 标记静态内容如果某个节点渲染一次后就不再变化给它加上v-once指令。Vue 会跳过这个节点的后续更新检查template div v-once h1{{ title }}/h1 p这段内容在数据变化时不做更新检查/p /div /template新闻标题、固定文案这类内容适合用v-once但如果是频繁受数据驱动的区域加v-once可能反而造成数据不更新属于双刃剑。5.3 性能优化三v-memo 缓存长列表子元素Vue 3.2 之后提供了v-memo它接收一个数组数组里的值不变时跳过对应子树的更新。长列表场景下这个指令的价值很大template TodoItem v-fortodo in todos :keytodo.id :todotodo v-memo[todo.done, todo.title] / /template用todo.done和todo.title两个字段做 memo 键只有这两项变化时才会更新这个子元素。注意v-memo只有在列表渲染时才有明显收益且它使用的变量必须来自所渲染的元素自身否则缓存命中会出错。最后说一个调试技巧在模板里打断点不方便时可以在 script 里用watchEffect观察数据变化import { watchEffect } from vue; watchEffect(() { console.log(当前标题是, props.title); });watchEffect会在依赖变化时自动执行回调打印出最新的值。定位「哪个数据先变、哪个组件后变」这类问题时比逐级 console.log 高效得多。本文还有配套的精品资源点击获取
