Vue3 + Electron 知识点总结 · 2026-03-25

Vue3 + Electron 知识点总结 · 2026-03-25

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

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

文件路径	识别到的知识点
electron/main/index.ts	ipcMain.handle(), contextIsolation, BrowserWindow, webContents, app 生命周期, session（会话管理）, dialog（系统对话框）
src/App.vue	script setup, v-slot / #slot
src/views/commentAnalysis/components/right_content/index.vue	script setup, ref(), computed(), v-model, v-if / v-else, v-for, useRouter(), useRoute(), defineProps(), defineEmits()
src/views/fyTest/index.vue	script setup, ref(), v-model, v-slot / #slot
src/views/home/components/content/index.vue	script setup, computed(), v-slot / #slot, v-for, watch(), useRouter()
src/views/home/components/handler_bar/index.vue	script setup, computed(), v-slot / #slot, v-if / v-else
src/views/home/index.vue	script setup, computed(), v-if / v-else, useRouter(), onMounted(), onUnmounted()
src/views/makeVideo/components/header/index.vue	script setup, ref(), computed(), v-model, v-slot / #slot, v-for, useRouter(), onMounted()
src/views/member/components/account_info/components/logout/index.vue	script setup, ref(), v-model, v-slot / #slot, defineExpose()
src/views/workbench/index.vue	script setup, ref(), v-model, v-if / v-else, watch(), useRouter(), nextTick()

---

目录

• 🔗 Electron 进程通信
• 🔒 Electron 安全
• 🪟 Electron 窗口
• ⚙️ Electron 应用
• 🖥️ Electron 系统集成
• 🚀 Vue3 基础
• ⚡ 响应式 API
• 🎯 模板指令
• 👁️ 侦听器
• 🗺️ Vue Router
• 🔧 工具函数
• 🔌 生命周期
• 📡 组件通信

---

🔗 Electron 进程通信

ipcMain.handle()

项目中的用法：

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

• electron/main/index.ts

}

// ← 重点：ipcMain.handle
ipcMain.handle("getMainWindowInfo", async (event, args) => {
  return {
    winId: mainWindow.id,
    winBounds: mainWindow.getBounds(),
    isMaximized: mainWindow.isMaximized(),
    isMinimized: mainWindow.isMinimized(),
    isFullScreen: mainWindow.isFullScreen(),
    isFocused: mainWindow.isFocused(),

是什么： 主进程注册 IPC 处理器，响应渲染进程的 invoke 调用，是主进程接收消息的核心方式。

面试 Q&A：

❓ Electron 进程间通信有哪几种方式？

💡 ① ipcMain.handle + ipcRenderer.invoke（推荐，Promise 形式，有返回值）② ipcMain.on + ipcRenderer.send（单向，无返回值）③ webContents.send + ipcRenderer.on（主进程推送到渲染进程）。

❓ ipcMain.handle 和 ipcMain.on 的区别？

💡 handle 用于双向通信，对应 invoke，支持 async/await 返回值；on 用于单向通信，对应 send，无返回值。现代开发推荐全部用 handle/invoke，语义更清晰。

---

🔒 Electron 安全

contextIsolation

项目中的用法：

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

• electron/main/index.ts

      //  disableDevToolsSecurityWarnings: true,
      nodeIntegration: true, // 禁用渲染进程中的 Node.js 集成
// ← 重点：contextIsolation
      contextIsolation: true, // 启用上下文隔离 contextBridge 是 Electron 提供的一个用于在预加载脚本和渲染进程之间安全通信的 API，它要求 contextIsolation 必须开启才能正常使用
    },
    icon: IconPath
  })
  // 设置全局主窗口引用
  global.mainWindow = mainWindow;

  process.env.VITE_DEV_SERVER_URL ? mainWindow.loadURL(process.env.VITE_DEV_SERVER_URL || '') :  mainWindow.loadURL(HomeIndexUrl)

是什么： 启用上下文隔离，渲染进程和 preload 运行在独立 JS 环境，必须配合 contextBridge 通信。

面试 Q&A：

❓ contextIsolation 和 nodeIntegration 如何配合？

💡 推荐配置：`contextIsolation: true, nodeIntegration: false`（默认值）。preload 脚本在隔离环境中可访问 Node.js，通过 contextBridge 只暴露安全 API 给渲染进程，这是 Electron 官方推荐的安全模型。

---

🪟 Electron 窗口

BrowserWindow

项目中的用法：

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

• electron/main/index.ts

// ← 重点：BrowserWindow
import { app, BrowserWindow, ipcMain, session, screen, Menu, dialog, Tray } from 'electron'
import path from 'node:path'
import './work-server/index';
import { IconPath, isWin, isMac, AppTitle, HomePreload, HomeIndexUrl } from './config'
import main_tray from './main_tray';
import { AddDevShortcuts } from './utils';

app.commandLine.appendSwitch('ignore-certificate-errors', 'true');

是什么： 创建并控制原生浏览器窗口，是 Electron 应用的核心 UI 容器。

面试 Q&A：

❓ BrowserWindow 常用配置有哪些？

💡 `frame:false`（无边框窗口）、`resizable`（是否可调整大小）、`webPreferences.preload`（预加载脚本路径）、`webPreferences.contextIsolation`（上下文隔离）、`icon`（窗口图标）、`transparent`（透明窗口）。

❓ 如何实现无边框窗口的拖拽？

💡 设置 `frame:false` 后标题栏消失，拖拽区域需在 CSS 中设置 `-webkit-app-region: drag`，按钮等可点击区域设置 `-webkit-app-region: no-drag`。

---

webContents

项目中的用法：

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

• electron/main/index.ts

  main_tray.CreateTray(mainWindow)
  AddDevShortcuts(mainWindow)
  // mainWindow.webContents.toggleDevTools();
}

ipcMain.handle("getMainWindowInfo", async (event, args) => {
  return {
    winId: mainWindow.id,
    winBounds: mainWindow.getBounds(),
    isMaximized: mainWindow.isMaximized(),

是什么： BrowserWindow 的核心属性，控制网页内容，可执行 JS、监听网络请求、注入脚本等。

面试 Q&A：

❓ webContents 常用的操作有哪些？

💡 `webContents.send()`（向渲染进程发消息）、`webContents.executeJavaScript()`（在页面执行 JS）、`webContents.openDevTools()`（打开开发者工具）、`webContents.on('did-finish-load', cb)`（页面加载完成）。

---

⚙️ Electron 应用

app 生命周期

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

• electron/main/index.ts

是什么： Electron app 模块控制应用生命周期，管理启动、窗口关闭、退出等核心事件。

面试 Q&A：

❓ Electron 应用的启动流程是什么？

💡 ① app.whenReady() 等待应用就绪 ② 创建 BrowserWindow ③ 加载页面（loadURL/loadFile）④ 监听 window-all-closed 事件处理退出（macOS 需特殊处理不退出进程）。

❓ app.whenReady 和 app.on('ready') 的区别？

💡 功能相同，都在应用初始化完成后触发。whenReady 返回 Promise，写法更现代；on('ready') 是回调风格。推荐用 whenReady().then(() => createWindow())。

---

🖥️ Electron 系统集成

session（会话管理）

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

• electron/main/index.ts

是什么： 管理浏览器会话，可设置代理、拦截请求、管理 Cookie、设置分区隔离多标签页。

面试 Q&A：

❓ Electron 中 partition 是什么？

💡 partition 是会话隔离机制，`partition: 'persist:name'` 创建持久化会话（Cookie/缓存保存到磁盘）；`partition: 'name'` 创建临时会话（关闭后清除）。项目中用于隔离不同账号的登录状态。

---

dialog（系统对话框）

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

• electron/main/index.ts

是什么： 调用系统原生对话框：文件选择、保存文件、消息提示框等。

面试 Q&A：

❓ dialog 必须在主进程调用吗？

💡 是的，dialog 属于主进程模块。渲染进程需要通过 ipcRenderer.invoke 调用主进程，由主进程调用 dialog 后返回结果。Electron 28+ 的 dialog.showOpenDialog 可直接传 BrowserWindow 实例。

---

🚀 Vue3 基础

script setup

项目中的用法：

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

• src/App.vue
• src/views/commentAnalysis/components/right_content/index.vue
• src/views/fyTest/index.vue
• src/views/home/components/content/index.vue
• src/views/home/components/handler_bar/index.vue
• src/views/home/index.vue
• src/views/makeVideo/components/header/index.vue
• src/views/member/components/account_info/components/logout/index.vue
• src/views/workbench/index.vue

  </template>
  
// ← 重点：script setup
  <script setup>
  import { ref } from 'vue';
  // 定义数据
  const url = ref('https://webtest2.zzbtool.com/fyToolApp/zhx/index.html?t='+new Date().getTime());
  // 定义方法
  const go = () => {
      window.client.reloadHomeUrl({url:url.value});
  };

是什么： 组合式 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()

项目中的用法：

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

• src/views/commentAnalysis/components/right_content/index.vue
• src/views/fyTest/index.vue
• src/views/makeVideo/components/header/index.vue
• src/views/member/components/account_info/components/logout/index.vue
• src/views/workbench/index.vue

  
  <script setup>
// ← 重点：ref
  import { ref } from 'vue';
  // 定义数据
// ← 重点：ref
  const url = ref('https://webtest2.zzbtool.com/fyToolApp/zhx/index.html?t='+new Date().getTime());
  // 定义方法
  const go = () => {
      window.client.reloadHomeUrl({url:url.value});
  };
  </script>

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

面试 Q&A：

❓ ref 和 reactive 的区别？

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

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

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

---

computed()

项目中的用法：

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

• src/views/commentAnalysis/components/right_content/index.vue
• src/views/home/components/content/index.vue
• src/views/home/components/handler_bar/index.vue
• src/views/home/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)

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

面试 Q&A：

❓ computed 和 methods 的区别？

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

❓ 如何实现可写的 computed？

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

---

🎯 模板指令

v-model

项目中的用法：

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

• src/views/commentAnalysis/components/right_content/index.vue
• src/views/fyTest/index.vue
• src/views/makeVideo/components/header/index.vue
• src/views/member/components/account_info/components/logout/index.vue
• src/views/workbench/index.vue

            <a-textarea
              :auto-size="{ minRows: 5, maxRows: 6 }"
// ← 重点：v-model
              v-model:value="url"
              placeholder="url"
            />
          </a-form-item>
          <!-- 进入按钮 -->
          <a-form-item>
            <a-button
              type="primary"

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

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

• src/App.vue
• src/views/fyTest/index.vue
• src/views/home/components/content/index.vue
• src/views/home/components/handler_bar/index.vue
• src/views/makeVideo/components/header/index.vue
• src/views/member/components/account_info/components/logout/index.vue

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

面试 Q&A：

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

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

---

v-if / v-else

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

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

项目中的用法：

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

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

---

👁️ 侦听器

watch()

项目中的用法：

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

• src/views/home/components/content/index.vue
• src/views/workbench/index.vue

// 监听商品名称输入
// ← 重点：watch
watch(productName, async () => {
  await nextTick()
  if (mirrorRef.value) productInputWidth.value = Math.max(120, mirrorRef.value.scrollWidth + 4)
})

const triggerUpload = () => fileInputRef.value?.click()

const isExcel = (name) => /\.(xlsx|xls)$/i.test(name || "")

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

面试 Q&A：

❓ watch 和 watchEffect 的核心区别？

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

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

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

❓ 如何停止侦听？

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

---

🗺️ Vue Router

useRouter()

项目中的用法：

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

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

import { message } from "ant-design-vue"
import { InfoCircleOutlined, UploadOutlined, FileTextOutlined } 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 中标记需要认证的页面，守卫中统一拦截。

---

useRoute()

项目中的用法：

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

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

import { message } from "ant-design-vue"
import { DownloadOutlined, ZoomInOutlined } from "@ant-design/icons-vue"
// ← 重点：useRoute
import { useRouter, useRoute } from "vue-router"
import imgPlaceholder from "@/assets/commentAnalysis/pic.png"
import handler from "@/views/commentAnalysis/handler"
import makeVideoHandler from "@/views/makeVideo/components/header/handler"

// ← 重点：useRoute
const router = useRouter()
// ← 重点：useRoute
const route = useRoute()
const initRatio = computed(() => route.query.ratio || "")

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

---

🔧 工具函数

nextTick()

项目中的用法：

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

• src/views/workbench/index.vue

// 监听商品名称输入
watch(productName, async () => {
// ← 重点：nextTick
  await nextTick()
  if (mirrorRef.value) productInputWidth.value = Math.max(120, mirrorRef.value.scrollWidth + 4)
})

const triggerUpload = () => fileInputRef.value?.click()

const isExcel = (name) => /\.(xlsx|xls)$/i.test(name || "")

是什么： 等待下一次 DOM 更新后执行，用于数据修改后立即操作更新后的 DOM。

面试 Q&A：

❓ nextTick 的原理？

💡 Vue 的 DOM 更新是异步批量的（微任务队列）。修改数据后 DOM 不会立即更新，nextTick 将回调推入同一微任务队列的末尾，等 DOM 更新完成后执行。底层用 Promise.then 实现。

❓ nextTick 和 setTimeout 的区别？

💡 nextTick 用微任务（Promise），在当前宏任务结束、下一个宏任务开始前执行，时机更早；setTimeout 是宏任务，会在所有微任务执行完后才运行，时机更晚，可能看到中间状态。

---

🔌 生命周期

onMounted()

项目中的用法：

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

• src/views/home/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，此时模板已渲染完毕。

---

onUnmounted()

项目中的用法：

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

• src/views/home/index.vue

});

// ← 重点：onUnmounted
onUnmounted(() => {
  window.removeEventListener("keydown", handleKeyDown);
});

</script>

<style lang="less" scoped> 
.home_page {

是什么： 组件销毁后执行，必须在此清除定时器、取消订阅，防止内存泄漏。

面试 Q&A：

❓ 不清除定时器会发生什么？

💡 组件销毁后定时器仍在运行，回调中访问已销毁组件的数据会报错，且定时器无法被 GC 回收，导致内存泄漏。每次重新挂载组件还会叠加创建新定时器。

---

📡 组件通信

defineProps()

项目中的用法：

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

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

const route = useRoute()
const initRatio = computed(() => route.query.ratio || "")
// ← 重点：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 imgPreviewOpen = ref(false)
const imgPreviewUrl = ref("")
const openImgPreview = (url) => {
  imgPreviewUrl.value = url
  imgPreviewOpen.value = true

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

面试 Q&A：

❓ emit 和 v-model 的关系？

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

---

defineExpose()

项目中的用法：

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

• src/views/member/components/account_info/components/logout/index.vue

const open = () => { visible.value = true }

// ← 重点：defineExpose
defineExpose({ open });
// 确认退出
const onConfirm = () => {
  visible.value = false
  userStore.$reset()
  localStorage.removeItem(USER_STATE_KEY)
  router.push("/home")
}

是什么： 显式暴露组件内部属性/方法，才能被父组件通过 ref 访问。

面试 Q&A：

❓ 为什么 script setup 组件用 ref 拿不到属性？

💡 script setup 默认是封闭的（closed），不像 Options API 组件自动暴露所有实例属性。必须用 defineExpose({ method, data }) 显式声明要暴露的内容。

---