Vue3 知识点总结 · 2026-03-24

Vue3 知识点总结 · 2026-03-24‍嘿大家好 前后端开发工程师 · 日更 CSDN 掘金我是一名对代码狂热的 IT 工作者目前在一家公司任职前后端开发工程师。以后每天都会更新 CSDN 和稀土掘金的文章——工作中写了什么代码都会在平台上展示 不会公布公司秘密只是从中提取 IT 语言的知识点提供给大家学习使用。我也希望自己一直不忘初心帖子为证只要我一天在工位上都会定时给大家分享开发收获和经验 前后端开发工程师 每日更新 从项目代码提炼知识点 欢迎点赞收藏本次共识别17个知识点覆盖 8 个分类。 提取来源共 5 个文件点击展开文件路径识别到的知识点src/App.vuev-slot / #slotsrc/mock/makeVideo/index.jsMockAdapteraxios-mock-adapter,mock.onPost(),mock.onGet(),onNoMatch: passthroughsrc/views/commentAnalysis/components/right_content/index.vuescript setup,computed(),v-for,v-if / v-else,useRouter(),defineProps(),defineEmits()src/views/commentAnalysis/index.vuescript setup,ref(),computed(),onMounted(),v-model,v-slot / #slot,useRoute(),watch()src/views/makeVideo/components/header/index.vuescript setup,ref(),computed(),onMounted(),v-model,v-for,v-slot / #slot,useRouter()目录 Mock / 接口模拟 Vue3 基础⚡ 响应式 API 生命周期 模板指令️ Vue Router 组件通信️ 侦听器 Mock / 接口模拟MockAdapteraxios-mock-adapter 来自 1 个文件点击展开src/mock/makeVideo/index.js是什么拦截 axios 请求并返回模拟数据开发阶段无需真实后端即可联调前端逻辑。面试 QA❓ axios-mock-adapter 的核心原理是什么 MockAdapter 替换 axios 的底层适配器adapter在请求真正发出前拦截根据注册的 URL 规则直接返回预设响应。onNoMatch:passthrough 选项让未注册的接口正常发出只 mock 特定接口。❓ delayResponse 有什么用 模拟网络延迟毫秒让前端能测试 loading 状态、骨架屏等异步 UI避免接口瞬间返回掩盖真实体验问题。mock.onPost()项目中的用法 来自 1 个文件点击展开src/mock/makeVideo/index.js// /productAi/sceneImgGen 创建图生图任务返回 TaskNo // ← 重点mock.onPost mock.onPost(/\/productAi\/sceneImgGen/).reply(200, { code: 0, msg: 创建成功, result: { TaskNo: TC2026032314412140855335 }, success: true }) // /task/taskList 图生图仅带 taskNo 轮询时返回该任务否则返回空是什么拦截指定 POST 请求返回预设响应支持字符串、正则匹配 URL。面试 QA❓ mock.onPost 支持哪些匹配方式 ① 字符串精确匹配 /api/login ② 正则匹配 /\/api\/.*gen/ 覆盖多个接口 ③ 不传参则拦截所有 POST 请求。链式调用 .reply(200, data) 设置状态码和响应体。❓ 如何模拟接口报错 mock.onPost(/api/login).reply(500, { message: Server Error }) 或 .networkError() 模拟断网.timeout() 模拟超时用于测试前端的错误处理逻辑。mock.onGet()项目中的用法 来自 1 个文件点击展开src/mock/makeVideo/index.jsVersion: v1_test, } // ← 重点mock.onGet mock.onGet(/\/task\/taskList/).reply((config) { const taskNo config.params?.taskNo const datas taskNo ? [{ ...SCENE_IMG_TASK, TaskNo: taskNo, CreateTime: new Date().toISOString().slice(0, 19).replace(T, ) }] : [] return [200, { code: 0, msg: ok, result: { TotalNum: datas.length, Datas: datas }, success: true }] }) // /task/sceneImgGen/result // ← 重点mock.onGet mock.onGet(/\/task\/sceneImgGen\/result/).reply(200, {是什么拦截指定 GET 请求支持根据请求参数动态返回不同数据。面试 QA❓ 如何根据请求参数返回不同数据 reply 传入函数mock.onGet(/api/list).reply(config { return config.params.id 1 ? [200, dataA] : [200, dataB] })config 包含 params、headers 等完整请求信息可按需动态构造响应。onNoMatch: passthrough项目中的用法 来自 1 个文件点击展开src/mock/makeVideo/index.jsimport MockAdapter from axios-mock-adapter // ← 重点onNoMatch: passthrough const mock new MockAdapter(axios, { delayResponse: 400, onNoMatch: passthrough }) // /productAi/sceneImgGen 创建图生图任务返回 TaskNo mock.onPost(/\/productAi\/sceneImgGen/).reply(200, { code: 0, msg: 创建成功, result: { TaskNo: TC2026032314412140855335 }, success: true是什么未注册的接口正常发出真实请求只 mock 显式注册的接口实现精准局部 mock。面试 QA❓ 为什么推荐配置 onNoMatch:passthrough 不配置时未匹配接口会直接报错Network Error配置 passthrough 后 mock 层对未注册接口透明前端可以混合使用真实接口和 mock 接口逐步替换不影响已上线功能。 Vue3 基础script setup项目中的用法 来自 3 个文件点击展开src/views/commentAnalysis/components/right_content/index.vuesrc/views/commentAnalysis/index.vuesrc/views/makeVideo/components/header/index.vue/template // ← 重点script setup script setup import { message } from ant-design-vue import { useRouter } from vue-router import bosConfig from /util/bos_util/bos_config_hsy import handler from ./handler const router useRouter() const fileInputRef ref(null)是什么组合式 API 语法糖顶层变量/函数自动暴露给模板无需 return。面试 QA❓ Vue2 Options API 和 Vue3 Composition API 有什么区别 Options API 按选项类型组织代码data/methods/computed逻辑分散Composition API 按功能聚合逻辑复用靠 composable 函数更适合大型项目。❓ setup() 和 script setup 有什么不同 setup() 是函数需要手动 return 暴露给模板script setup 是编译器语法糖顶层声明自动暴露代码更简洁性能略优编译阶段优化。⚡ 响应式 APIref()项目中的用法 来自 2 个文件点击展开src/views/commentAnalysis/index.vuesrc/views/makeVideo/components/header/index.vuetemplate div classmake_video_header // ← 重点ref input reffileInputRef typefile acceptimage/* multiple classhidden_input changeonFileChange / img classpic_begin src/assets/makeVideo/pic_begin.png alt / div classcard_box div classrow_images img src/assets/makeVideo/cj1.png alt / img src/assets/makeVideo/cj2.png alt / img src/assets/makeVideo/cj2.png alt / /div是什么将基本类型包装为响应式对象JS 中访问要加 .value模板中自动解包。面试 QA❓ ref 和 reactive 的区别 ref 用于基本类型内部用 RefImpl 包装访问需 .valuereactive 用于对象/数组基于 Proxy直接访问属性。ref 也可包对象内部会自动调用 reactive。❓ 模板里为什么不用写 .value 模板编译时会自动对 ref 解包访问 ref.value 的操作由编译器插入开发者无感知。computed()项目中的用法 来自 3 个文件点击展开src/views/commentAnalysis/components/right_content/index.vuesrc/views/commentAnalysis/index.vuesrc/views/makeVideo/components/header/index.vueconst numVal ref(1) // ← 重点computed const formState computed(() ({ uploadedList: uploadedList.value, ratioVal: ratioVal.value, numVal: numVal.value, promptText: promptText.value })) // ← 重点computed const isFormValid computed(() uploadedList.value?.length promptText.value?.trim())是什么基于响应式数据派生的缓存值依赖不变时不重新计算。面试 QA❓ computed 和 methods 的区别 computed 有缓存依赖不变则直接返回缓存值适合计算量大的场景methods 每次调用都重新执行适合需要触发副作用的操作。❓ 如何实现可写的 computed 传入包含 get 和 set 的对象computed({ get: () x.value, set: v x.value v })set 中手动更新源数据。 生命周期onMounted()项目中的用法 来自 2 个文件点击展开src/views/commentAnalysis/index.vuesrc/views/makeVideo/components/header/index.vue} // ← 重点onMounted onMounted(() { const raw sessionStorage.getItem(handler.SCENE_IMG_EDIT_KEY) if (!raw) return sessionStorage.removeItem(handler.SCENE_IMG_EDIT_KEY) const data JSON.parse(raw) if (data.imgUrl?.length) uploadedList.value [...data.imgUrl] if (data.prompt ! null) promptText.value data.prompt if (data.ratio) ratioVal.value data.ratio是什么组件挂载到真实 DOM 后执行可安全操作 DOM、发起请求。面试 QA❓ Vue3 生命周期和 Vue2 的对应关系 beforeCreate/created → setup()beforeMount → onBeforeMountmounted → onMountedbeforeUpdate → onBeforeUpdateupdated → onUpdatedbeforeDestroy → onBeforeUnmountdestroyed → onUnmounted。❓ 为什么不在 setup 顶层直接操作 DOM setup 执行时组件还未挂载DOM 不存在。需要在 onMounted 里操作 DOM此时模板已渲染完毕。 模板指令v-model项目中的用法 来自 2 个文件点击展开src/views/commentAnalysis/index.vuesrc/views/makeVideo/components/header/index.vue/div div classright_input // ← 重点v-model textarea v-modelpromptText placeholder描述场景生成的提示词如……/textarea /div /div div classrow_options div classoption_item img classopt_icon src/assets/makeVideo/lan_icon.png alt / span classopt_text语言/span img classopt_arrow src/assets/makeVideo/soc_bottorm.png alt /是什么双向绑定语法糖等价于 :modelValue update:modelValue。面试 QA❓ v-model 的实现原理 编译器将 v-model 展开为 :modelValueval 和 update:modelValueval$event。组件内用 defineProps([modelValue]) defineEmits([update:modelValue]) 配合使用。❓ Vue3 和 Vue2 的 v-model 有什么变化 Vue2 用 :value input修改靠 .syncVue3 统一为 :modelValue update:modelValue支持多个 v-modelv-model:title、v-model:content去掉了 .sync。v-for项目中的用法 来自 2 个文件点击展开src/views/commentAnalysis/components/right_content/index.vuesrc/views/makeVideo/components/header/index.vuediv classrow_input div classleft_area // ← 重点v-for div v-forurl in uploadedList :keyurl classupload_preview_wrap img :srcurl classupload_preview / div classupload_delete clickuploadedList.splice(uploadedList.indexOf(url), 1)×/div /div img classupload_placeholder src/assets/makeVideo/cj_input.png alt clicktriggerUpload / /div div classright_input textarea v-modelpromptText placeholder描述场景生成的提示词如……/textarea是什么列表渲染必须加 :key唯一且稳定key 用于 Diff 算法复用节点。面试 QA❓ 为什么 v-for 必须加 keykey 用 index 有什么问题 key 让 Diff 算法识别节点身份复用 DOM 减少操作。用 index 做 key 在列表增删时会导致错误复用节点身份和数据不匹配造成状态错乱应用数据唯一 ID。❓ Vue3 的 Diff 算法有什么优化 Vue3 Diff 引入最长递增子序列LIS算法最小化节点移动次数同时增加静态标记patchFlag跳过静态节点对比比 Vue2 快 1.3~2 倍。v-slot / #slot 来自 3 个文件点击展开src/App.vuesrc/views/commentAnalysis/index.vuesrc/views/makeVideo/components/header/index.vue是什么插槽内容分发支持默认插槽、具名插槽、作用域插槽。面试 QA❓ 默认、具名、作用域插槽的区别 默认插槽slot 接收未命名内容具名插槽slot nameheader template #header 指定位置作用域插槽slot :dataitem template #default{ data } 让父组件拿到子组件数据。v-if / v-else 来自 1 个文件点击展开src/views/commentAnalysis/components/right_content/index.vue是什么条件渲染false 时节点从 DOM 移除并销毁组件适合不频繁切换的场景。面试 QA❓ v-if 和 v-show 如何选择 频繁切换用 v-show只改 display开销小初始条件为假且不常切换用 v-if减少初始渲染开销。v-if 切换时组件会销毁重建触发完整生命周期。❓ v-if 和 v-for 的优先级 Vue3 中 v-if 优先级高于 v-forVue2 相反。不建议同时使用应用 template 包裹 v-for在内部元素上用 v-if或用 computed 过滤数据。️ Vue RouteruseRouter()项目中的用法 来自 2 个文件点击展开src/views/commentAnalysis/components/right_content/index.vuesrc/views/makeVideo/components/header/index.vuescript setup import { message } from ant-design-vue // ← 重点useRouter import { useRouter } from vue-router import bosConfig from /util/bos_util/bos_config_hsy import handler from ./handler // ← 重点useRouter const router useRouter() const fileInputRef ref(null) const promptText ref() const uploadedList ref([])是什么获取路由实例用于编程式导航 push/replace/go/back。面试 QA❓ push 和 replace 的区别 push 往历史记录栈推入新记录可以后退replace 替换当前记录不增加历史栈无法后退到替换前的页面。登录后跳转首页通常用 replace避免用户后退回登录页。❓ 导航守卫如何做权限控制 router.beforeEach((to, from, next) { if (to.meta.requiresAuth !isLogin) next(/login); else next() })在路由 meta 中标记需要认证的页面守卫中统一拦截。useRoute()项目中的用法 来自 1 个文件点击展开src/views/commentAnalysis/index.vuescript setup // ← 重点useRoute import { useRoute } from vue-router import LeftContent from /views/commentAnalysis/components/left_content/index.vue import RightContent from /views/commentAnalysis/components/right_content/index.vue import GenerateResult from /views/generateResult/index.vue import handler from /views/commentAnalysis/handler // ← 重点useRoute const route useRoute() const taskList ref([])是什么获取当前路由对象params、query、path、meta、name 等。面试 QA❓ params 和 query 的区别 params 是路径参数/user/:id必须在路由定义中声明刷新后仍存在history 模式query 是查询字符串?id1无需声明URL 中可见刷新后仍存在。❓ 路由参数变化但组件不更新怎么解决 同一组件复用时不会重新挂载。解决① watch(() route.params, handler) ② 给 router-view 加 :keyroute.fullPath 强制重建。 组件通信defineProps()项目中的用法 来自 1 个文件点击展开src/views/commentAnalysis/components/right_content/index.vueconst router useRouter() // ← 重点defineProps const props defineProps({ activeTask: { type: Object, default: null }, reportReady: { type: Boolean, default: false }, polling: { type: Boolean, default: false }, imgGenResult: { type: Object, default: null } }) const imgGenParams computed(() props.imgGenResult?.Params ?? null)是什么声明组件接收的 props父传子的核心方式支持类型约束和默认值。面试 QA❓ Vue3 有哪些组件通信方式 ① props/emit父子② v-model双向③ ref defineExpose父调子方法④ provide/inject跨层级⑤ Pinia全局状态⑥ mitt 事件总线任意组件❓ props 是单向数据流子组件能直接修改吗 不能直接修改会报警告。正确做法① emit 通知父组件修改 ② 将 prop 赋值给本地 ref 再修改本地数据 ③ 使用 v-model。defineEmits()项目中的用法 来自 1 个文件点击展开src/views/commentAnalysis/components/right_content/index.vueconst truncateName (name) handler.truncateFileName(name, 20) // ← 重点defineEmits const emit defineEmits([viewReport]) const onViewReport () emit(viewReport) const onReEdit () { const p props.imgGenResult?.Params if (!p) return const imgUrls p.ImgUrl ? (typeof p.ImgUrl string ? p.ImgUrl.split(,).map((s) s.trim()).filter(Boolean) : []) : [] sessionStorage.setItem(是什么声明组件可触发的自定义事件子传父的核心方式。面试 QA❓ emit 和 v-model 的关系 v-model 本质是 :modelValue update:modelValue 的语法糖。子组件用 defineEmits([update:modelValue])然后 emit(update:modelValue, newVal) 即可实现双向绑定。️ 侦听器watch()项目中的用法 来自 1 个文件点击展开src/views/commentAnalysis/index.vue} // ← 重点watch watch( activeTask, async (task) { reportReadyTaskNo.value imgGenResult.value null if (!task) return if (!task.isPending) { reportReadyTaskNo.value task.taskNo ?? 是什么侦听指定数据源变化时执行回调可获取新旧值支持 deep/immediate。面试 QA❓ watch 和 watchEffect 的核心区别 watch 需要明确指定侦听源懒执行默认不立即执行可拿到新旧值watchEffect 自动收集依赖立即执行一次拿不到旧值。❓ watch 监听对象的某个属性怎么写 用 getter 函数watch(() obj.key, callback)。直接写 watch(obj.key, ...) 只是监听当时的值不是响应式的。❓ 如何停止侦听 const stop watch(...); stop() 调用返回值即可停止。组件卸载时会自动停止手动停止用于在卸载前提前结束侦听。