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

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

本次共识别 17 个知识点，覆盖 8 个分类。

📂 提取来源（共 5 个文件，点击展开）

文件路径	识别到的知识点
src/App.vue	v-slot / #slot
src/mock/makeVideo/index.js	MockAdapter（axios-mock-adapter）, mock.onPost(), mock.onGet(), onNoMatch: 'passthrough'
src/views/commentAnalysis/components/right_content/index.vue	script setup, computed(), v-for, v-if / v-else, useRouter(), defineProps(), defineEmits()
src/views/commentAnalysis/index.vue	script setup, ref(), computed(), onMounted(), v-model, v-slot / #slot, useRoute(), watch()
src/views/makeVideo/components/header/index.vue	script setup, ref(), computed(), onMounted(), v-model, v-for, v-slot / #slot, useRouter()

---

目录

• 🎭 Mock / 接口模拟
• 🚀 Vue3 基础
• ⚡ 响应式 API
• 🔌 生命周期
• 🎯 模板指令
• 🗺️ Vue Router
• 📡 组件通信
• 👁️ 侦听器

---

🎭 Mock / 接口模拟

MockAdapter（axios-mock-adapter）

📂 来自 1 个文件（点击展开）

• src/mock/makeVideo/index.js

是什么： 拦截 axios 请求并返回模拟数据，开发阶段无需真实后端即可联调前端逻辑。

面试 Q&A：

❓ 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。

面试 Q&A：

❓ 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.js

  Version: '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 请求，支持根据请求参数动态返回不同数据。

面试 Q&A：

❓ 如何根据请求参数返回不同数据？

💡 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.js

import 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。

面试 Q&A：

❓ 为什么推荐配置 onNoMatch:'passthrough'？

💡 不配置时未匹配接口会直接报错（Network Error），配置 passthrough 后 mock 层对未注册接口透明，前端可以混合使用真实接口和 mock 接口，逐步替换，不影响已上线功能。

---

🚀 Vue3 基础

script setup

项目中的用法：

📂 来自 3 个文件（点击展开）

• src/views/commentAnalysis/components/right_content/index.vue
• src/views/commentAnalysis/index.vue
• src/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。

面试 Q&A：

❓ Vue2 Options API 和 Vue3 Composition API 有什么区别？

💡 Options API 按选项类型组织代码（data/methods/computed），逻辑分散；Composition API 按功能聚合，逻辑复用靠 composable 函数，更适合大型项目。

❓ setup() 和 `<script setup>` 有什么不同？

💡 setup() 是函数，需要手动 return 暴露给模板；`<script setup>` 是编译器语法糖，顶层声明自动暴露，代码更简洁，性能略优（编译阶段优化）。

---

⚡ 响应式 API

ref()

项目中的用法：

📂 来自 2 个文件（点击展开）

• src/views/commentAnalysis/index.vue
• src/views/makeVideo/components/header/index.vue

<template>
  <div class="make_video_header">
// ← 重点：ref
    <input ref="fileInputRef" type="file" accept="image/*" multiple class="hidden_input" @change="onFileChange" />
    <img class="pic_begin" src="@/assets/makeVideo/pic_begin.png" alt="" />
    <div class="card_box">
      <div class="row_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，模板中自动解包。

面试 Q&A：

❓ ref 和 reactive 的区别？

💡 ref 用于基本类型（内部用 RefImpl 包装），访问需 .value；reactive 用于对象/数组（基于 Proxy），直接访问属性。ref 也可包对象，内部会自动调用 reactive。

❓ 模板里为什么不用写 .value？

💡 模板编译时会自动对 ref 解包，访问 ref.value 的操作由编译器插入，开发者无感知。

---

computed()

项目中的用法：

📂 来自 3 个文件（点击展开）

• src/views/commentAnalysis/components/right_content/index.vue
• src/views/commentAnalysis/index.vue
• src/views/makeVideo/components/header/index.vue

const 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())

是什么： 基于响应式数据派生的缓存值，依赖不变时不重新计算。

面试 Q&A：

❓ computed 和 methods 的区别？

💡 computed 有缓存，依赖不变则直接返回缓存值，适合计算量大的场景；methods 每次调用都重新执行，适合需要触发副作用的操作。

❓ 如何实现可写的 computed？

💡 传入包含 get 和 set 的对象：`computed({ get: () => x.value, set: v => x.value = v })`，set 中手动更新源数据。

---

🔌 生命周期

onMounted()

项目中的用法：

📂 来自 2 个文件（点击展开）

• src/views/commentAnalysis/index.vue
• src/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、发起请求。

面试 Q&A：

❓ Vue3 生命周期和 Vue2 的对应关系？

💡 beforeCreate/created → setup()；beforeMount → onBeforeMount；mounted → onMounted；beforeUpdate → onBeforeUpdate；updated → onUpdated；beforeDestroy → onBeforeUnmount；destroyed → onUnmounted。

❓ 为什么不在 setup 顶层直接操作 DOM？

💡 setup 执行时组件还未挂载，DOM 不存在。需要在 onMounted 里操作 DOM，此时模板已渲染完毕。

---

🎯 模板指令

v-model

项目中的用法：

📂 来自 2 个文件（点击展开）

• src/views/commentAnalysis/index.vue
• src/views/makeVideo/components/header/index.vue

        </div>
        <div class="right_input">
// ← 重点：v-model
          <textarea v-model="promptText" placeholder="描述场景生成的提示词，如……"></textarea>
        </div>
      </div>
      <div class="row_options">
        <div class="option_item">
          <img class="opt_icon" src="@/assets/makeVideo/lan_icon.png" alt="" />
          <span class="opt_text">语言</span>
          <img class="opt_arrow" src="@/assets/makeVideo/soc_bottorm.png" alt="" />

是什么： 双向绑定语法糖，等价于 :modelValue + @update:modelValue。

面试 Q&A：

❓ v-model 的实现原理？

💡 编译器将 v-model 展开为 :modelValue='val' 和 @update:modelValue='val=$event'。组件内用 defineProps(['modelValue']) + defineEmits(['update:modelValue']) 配合使用。

❓ Vue3 和 Vue2 的 v-model 有什么变化？

💡 Vue2 用 :value + @input，修改靠 .sync；Vue3 统一为 :modelValue + @update:modelValue，支持多个 v-model（v-model:title、v-model:content），去掉了 .sync。

---

v-for

项目中的用法：

📂 来自 2 个文件（点击展开）

• src/views/commentAnalysis/components/right_content/index.vue
• src/views/makeVideo/components/header/index.vue

      <div class="row_input">
        <div class="left_area">
// ← 重点：v-for
          <div v-for="url in uploadedList" :key="url" class="upload_preview_wrap">
            <img :src="url" class="upload_preview" />
            <div class="upload_delete" @click="uploadedList.splice(uploadedList.indexOf(url), 1)">×</div>
          </div>
          <img class="upload_placeholder" src="@/assets/makeVideo/cj_input.png" alt="" @click="triggerUpload" />
        </div>
        <div class="right_input">
          <textarea v-model="promptText" placeholder="描述场景生成的提示词，如……"></textarea>

是什么： 列表渲染，必须加 :key（唯一且稳定），key 用于 Diff 算法复用节点。

面试 Q&A：

❓ 为什么 v-for 必须加 key？key 用 index 有什么问题？

💡 key 让 Diff 算法识别节点身份，复用 DOM 减少操作。用 index 做 key 在列表增删时会导致错误复用（节点身份和数据不匹配），造成状态错乱，应用数据唯一 ID。

❓ Vue3 的 Diff 算法有什么优化？

💡 Vue3 Diff 引入最长递增子序列（LIS）算法，最小化节点移动次数；同时增加静态标记（patchFlag）跳过静态节点对比，比 Vue2 快 1.3~2 倍。

---

v-slot / #slot

📂 来自 3 个文件（点击展开）

• src/App.vue
• src/views/commentAnalysis/index.vue
• src/views/makeVideo/components/header/index.vue

是什么： 插槽内容分发，支持默认插槽、具名插槽、作用域插槽。

面试 Q&A：

❓ 默认、具名、作用域插槽的区别？

💡 默认插槽：`<slot>` 接收未命名内容；具名插槽：`<slot name='header'>` + `<template #header>` 指定位置；作用域插槽：`<slot :data='item'>` + `<template #default='{ data }'>` 让父组件拿到子组件数据。

---

v-if / v-else

📂 来自 1 个文件（点击展开）

• src/views/commentAnalysis/components/right_content/index.vue

是什么： 条件渲染，false 时节点从 DOM 移除并销毁组件，适合不频繁切换的场景。

面试 Q&A：

❓ v-if 和 v-show 如何选择？

💡 频繁切换用 v-show（只改 display，开销小）；初始条件为假且不常切换用 v-if（减少初始渲染开销）。v-if 切换时组件会销毁重建，触发完整生命周期。

❓ v-if 和 v-for 的优先级？

💡 Vue3 中 v-if 优先级高于 v-for（Vue2 相反）。不建议同时使用，应用 template 包裹 v-for，在内部元素上用 v-if，或用 computed 过滤数据。

---

🗺️ Vue Router

useRouter()

项目中的用法：

📂 来自 2 个文件（点击展开）

• src/views/commentAnalysis/components/right_content/index.vue
• src/views/makeVideo/components/header/index.vue

<script 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。

面试 Q&A：

❓ 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.vue

<script 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 等。

面试 Q&A：

❓ params 和 query 的区别？

💡 params 是路径参数（/user/:id），必须在路由定义中声明，刷新后仍存在（history 模式）；query 是查询字符串（?id=1），无需声明，URL 中可见，刷新后仍存在。

❓ 路由参数变化但组件不更新怎么解决？

💡 同一组件复用时不会重新挂载。解决：① watch(() => route.params, handler) ② 给 router-view 加 :key='route.fullPath' 强制重建。

---

📡 组件通信

defineProps()

项目中的用法：

📂 来自 1 个文件（点击展开）

• src/views/commentAnalysis/components/right_content/index.vue

const 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，父传子的核心方式，支持类型约束和默认值。

面试 Q&A：

❓ 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.vue

const 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(

是什么： 声明组件可触发的自定义事件，子传父的核心方式。

面试 Q&A：

❓ 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。

面试 Q&A：

❓ watch 和 watchEffect 的核心区别？

💡 watch 需要明确指定侦听源，懒执行（默认不立即执行），可拿到新旧值；watchEffect 自动收集依赖，立即执行一次，拿不到旧值。

❓ watch 监听对象的某个属性怎么写？

💡 用 getter 函数：`watch(() => obj.key, callback)`。直接写 `watch(obj.key, ...)` 只是监听当时的值，不是响应式的。

❓ 如何停止侦听？

💡 `const stop = watch(...); stop()` 调用返回值即可停止。组件卸载时会自动停止，手动停止用于在卸载前提前结束侦听。

---