Vue3 知识点总结 · 2026-03-23从项目代码中自动提取的 Vue3 / Electron 知识点，含实际代码

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

👨‍💻

嘿！大家好 👋

前后端开发工程师 · 日更 CSDN & 掘金

我是一名对代码狂热的 IT 工作者，目前在一家公司任职前后端开发工程师。以后每天都会更新 CSDN 和稀土掘金的文章——工作中写了什么代码都会在平台上展示 🚀 不会公布公司秘密，只是从中提取 IT 语言的知识点，提供给大家学习使用。

我也希望自己一直不忘初心，帖子为证，只要我一天在工位上，都会定时给大家分享开发收获和经验！！！ 💪

🏢 前后端开发工程师 📅 每日更新 🎯 从项目代码提炼知识点 🤝 欢迎点赞收藏

本次共识别 13 个知识点，覆盖 7 个分类。

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

文件路径	识别到的知识点
`src/views/commentAnalysis/components/right_content/index.vue`	`script setup`, `defineProps()`, `defineEmits()`, `v-if / v-else`, `v-for`
`src/views/commentAnalysis/index.vue`	`script setup`, `v-model`, `v-slot / #slot`, `ref()`, `computed()`, `watch()`, `onMounted()`, `useRoute()`
`src/views/generateResult/components/period_detail/index.vue`	`script setup`, `defineProps()`, `v-if / v-else`, `v-for`, `v-model`, `v-slot / #slot`, `ref()`, `computed()`
`src/views/workbench/index.vue`	`script setup`, `ref()`, `useRouter()`

🚀 Vue3 基础

`script setup`

项目中的用法：

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

src/views/commentAnalysis/components/right_content/index.vue
src/views/commentAnalysis/index.vue
src/views/generateResult/components/period_detail/index.vue
src/views/workbench/index.vue

</template>

// ← 重点：script setup
<script setup>
import handler from "@/views/commentAnalysis/handler"

defineProps({
  activeTask: { type: Object, default: null },
  reportReady: { type: Boolean, default: false },
  polling: { type: Boolean, default: false }
})

是什么： 组合式 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>` 是编译器语法糖，顶层声明自动暴露，代码更简洁，性能略优（编译阶段优化）。

📡 组件通信

`defineProps()`

项目中的用法：

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

src/views/commentAnalysis/components/right_content/index.vue
src/views/generateResult/components/period_detail/index.vue

import handler from "@/views/commentAnalysis/handler"

// ← 重点：defineProps
defineProps({
  activeTask: { type: Object, default: null },
  reportReady: { type: Boolean, default: false },
  polling: { type: Boolean, default: false }
})

const formatDate = handler.formatTaskDate
const formatTime = handler.formatTaskTime

是什么： 声明组件接收的 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")
</script>

<style lang="less" scoped src="./index.less"></style>

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

面试 Q&A：

❓ emit 和 v-model 的关系？

💡 v-model 本质是 `:modelValue + @update:modelValue` 的语法糖。子组件用 defineEmits(['update:modelValue'])，然后 emit('update:modelValue', newVal) 即可实现双向绑定。

🎯 模板指令

`v-if / v-else`

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

src/views/commentAnalysis/components/right_content/index.vue
src/views/generateResult/components/period_detail/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 过滤数据。

`v-for`

项目中的用法：

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

src/views/commentAnalysis/components/right_content/index.vue
src/views/generateResult/components/period_detail/index.vue

    </div>
    <div v-if="false" class="pic_list">
// ← 重点：v-for
      <div v-for="i in 4" :key="i" class="pic_item">
        <img src="@/assets/commentAnalysis/pic.png" alt="" />
      </div>
    </div>
    <div v-if="false" class="btn_row">
      <div class="btn_edit">
        <div class="btn_icon">
          <img src="@/assets/commentAnalysis/edit.png" alt="" />

是什么： 列表渲染，必须加 :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-model`

项目中的用法：

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

src/views/commentAnalysis/index.vue
src/views/generateResult/components/period_detail/index.vue

  <div class="member">
    <div class="member_layout">
// ← 重点：v-model
      <LeftContent v-model="activeId" :task-list="taskList" />
      <div class="member_content">
        <div class="content_title">{{ activeTitle }}</div>
        <RightContent
          :active-task="activeTask"
          :report-ready="!!reportReadyTaskNo"
          :polling="polling"
          @view-report="reportDrawerVisible = true"

是什么： 双向绑定语法糖，等价于 :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-slot / #slot`

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

src/views/commentAnalysis/index.vue
src/views/generateResult/components/period_detail/index.vue

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

面试 Q&A：

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

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

⚡ 响应式 API

`ref()`

项目中的用法：

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

src/views/commentAnalysis/index.vue
src/views/generateResult/components/period_detail/index.vue
src/views/workbench/index.vue


const route = useRoute()
// ← 重点：ref
const taskList = ref([{ id: "265654563", taskNo: "265654563", title: "评价分析-265654563", createTime: new Date().toISOString(), fileName: "评论数据.md" }])
// ← 重点：ref
const activeId = ref("")
// ← 重点：ref
const reportDrawerVisible = ref(false)
// ← 重点：ref
const reportReadyTaskNo = ref("")
// ← 重点：ref
const polling = ref(false)

const activeTask = computed(() => taskList.value.find((t) => t.id === activeId.value) ?? null)
const activeTitle = computed(() => activeTask.value?.title ?? "")

是什么： 将基本类型包装为响应式对象，JS 中访问要加 .value，模板中自动解包。

面试 Q&A：

❓ ref 和 reactive 的区别？

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

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

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

`computed()`

项目中的用法：

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

src/views/commentAnalysis/index.vue
src/views/generateResult/components/period_detail/index.vue

const polling = ref(false)

// ← 重点：computed
const activeTask = computed(() => taskList.value.find((t) => t.id === activeId.value) ?? null)
// ← 重点：computed
const activeTitle = computed(() => activeTask.value?.title ?? "")

function markTaskReady(taskNo) {
  const t = taskList.value.find((item) => item.taskNo === taskNo)
  if (t) t.isPending = false
}

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

面试 Q&A：

❓ computed 和 methods 的区别？

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

❓ 如何实现可写的 computed？

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

👁️ 侦听器

`watch()`

项目中的用法：

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

src/views/commentAnalysis/index.vue

}

// ← 重点：watch
watch(
  activeTask,
  async (task) => {
    reportReadyTaskNo.value = ""
    if (!task?.isPending) {
      reportReadyTaskNo.value = task?.taskNo ?? ""
      return
    }

是什么： 侦听指定数据源，变化时执行回调，可获取新旧值，支持 deep/immediate。

面试 Q&A：

❓ watch 和 watchEffect 的核心区别？

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

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

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

❓ 如何停止侦听？

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

🔌 生命周期

`onMounted()`

项目中的用法：

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

src/views/commentAnalysis/index.vue

)

// ← 重点：onMounted
onMounted(async () => {
  const list = await handler.FetchRecentTasks()
  if (list.length) {
    taskList.value = list
    const targetNo = route.query.taskNo
    const target = targetNo ? list.find((t) => t.taskNo === targetNo) : null
    activeId.value = target?.id ?? list[0].id
  } else {

是什么： 组件挂载到真实 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，此时模板已渲染完毕。

🗺️ Vue Router

`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([{ id: "265654563", taskNo: "265654563", title: "评价分析-265654563", createTime: new Date().toISOString(), fileName: "评论数据.md" }])

是什么： 获取当前路由对象：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' 强制重建。

`useRouter()`

项目中的用法：

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

src/views/workbench/index.vue

import { message } from "ant-design-vue"
import { InfoCircleOutlined } from "@ant-design/icons-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 fileUrl = ref("")
const fileName = 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 中标记需要认证的页面，守卫中统一拦截。

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