本文覆盖Vue 基础、组件核心、Vue2/Vue3 原理、全家桶、性能优化、高频拓展六大板块，包含面试高频题 + 手写题 + 原理题，区分「基础必背」「进阶拔高」「原理深挖」三个难度梯度，适配校招 / 社招 / 中高级前端面试，答案均为企业面试标准表述，可直接背诵、上手即用。
✅ 标注 = 面试最高频，必考优先级； ⭐ 标注 = 手写 / 原理类，中高级面试重点。
一、Vue 基础核心题（入门必背，100% 考）
✅ 1. Vue 的核心特性有哪些？
标准答案：
Vue 是一款渐进式 JavaScript 框架，核心特性围绕「易用、高效、组件化」设计，核心特性如下：
✅数据驱动视图（MVVM）：遵循 MVVM 架构，数据（Model）变化自动更新视图（View），无需手动操作 DOM，实现视图与数据解耦；
✅组件化开发：将页面拆分为独立、可复用的组件，支持组件嵌套 / 传参，降低代码耦合度，提升复用性和可维护性；
✅双向数据绑定：v-model指令实现表单元素「视图→数据、数据→视图」双向同步，底层是v-bind+v-on的语法糖；
✅指令系统：内置v-if/v-for/v-bind/v-on/v-show等指令，封装 DOM 操作逻辑，用声明式语法替代命令式 DOM 操作；
✅虚拟 DOM + Diff 算法：将真实 DOM 抽象为虚拟节点（VNode），数据更新时通过 Diff 对比新旧 VNode，只更新变化的 DOM 节点，提升渲染效率；
✅生命周期钩子：提供完整的组件生命周期函数，可在组件「创建、挂载、更新、销毁」各阶段执行自定义逻辑。
✅ 2. v-if 和 v-show 的区别？分别在什么场景下使用？
标准答案（面试满分表述，分「区别 + 场景」两层答）：
✅ 核心区别（3 点必答）
渲染原理不同✅
v-if：动态增删 DOM 元素，条件为 false 时，元素会从 DOM 树中移除，不占 DOM 节点；
v-show：控制元素 CSS 的 display 属性，条件为 false 时，元素仅被隐藏（display: none），始终存在于 DOM 树中。
编译性能不同
v-if：有编译切换开销，条件切换时会触发组件的「销毁→重建」，涉及生命周期执行；
v-show：只有初始渲染开销，条件切换仅修改样式，性能损耗极低。
使用限制不同
v-if可与v-else/v-else-if配合实现多条件分支，支持模板根节点使用；
v-show不支持分支语法，仅能单独控制单个元素的显示隐藏。
✅ 适用场景
✅ 用v-show：需要频繁切换显示 / 隐藏的场景（如 tab 切换、弹窗显隐），利用其切换无开销的优势；
✅ 用v-if：条件很少改变、甚至首次渲染后不变的场景（如权限控制、页面初始化的条件渲染），利用其节省 DOM 节点的优势。
✅ 3. v-for 为什么必须加 key？key 的作用是什么？
标准答案：
✅ 核心作用
key是 Vue 中虚拟 DOM Diff 算法的标识，用于精准识别列表中每个节点的唯一性，让 Vue 知道新旧列表中「哪个节点是同一个」。
✅ 不加 key 的问题
若列表无 key，Vue 会采用「就地更新」策略：通过节点位置对比新旧列表，可能导致节点复用错误，出现「数据错乱、表单值绑定异常、组件生命周期重复执行」等问题。
✅ key 的选型原则 ✅
优先用唯一标识：如后端返回的id、uid等唯一值（推荐，性能最优、无副作用）；
禁止用 index 作为 key：index 会随列表排序 / 增删而变化，本质还是「按位置匹配」，仍会触发错误的节点复用，违背 key 的设计初衷；
特殊场景用随机值：若无唯一标识，可临时用Math.random()，但会导致每次渲染都销毁重建节点，性能较差，仅应急使用。
✅ 4. Vue 中 data 为什么是一个函数（组件中），而不是对象？
标准答案：
核心原因是防止组件复用导致的数据污染。
组件是可复用的实例，如果 data 是对象，则所有组件实例会共享同一个 data 对象的引用：修改其中一个实例的 data，其他所有复用的实例 data 都会同步改变，造成数据混乱；
如果 data 是函数，组件每次被复用都会执行一次 data 函数，返回一个全新的独立对象，每个组件实例拥有专属的 data 数据，相互隔离、互不影响。
✔️ 补充：Vue 根实例（new Vue ({})）中，data 可以是对象，因为根实例只会被创建一次，不存在复用问题。
✅ 5. 简述 Vue 的生命周期，Vue2 和 Vue3 的生命周期有什么区别？
✅ ① Vue2 组件完整生命周期（8 个核心钩子，按执行顺序）
plaintext
创建阶段 → 挂载阶段 → 更新阶段 → 销毁阶段
beforeCreate → created → beforeMount → mounted → beforeUpdate → updated → beforeDestroy → destroyed
创建阶段：beforeCreate（数据 / 方法未初始化）、created（数据 / 方法初始化完成，可请求数据，DOM 未生成）；
挂载阶段：beforeMount（编译模板完成，即将挂载 DOM）、mounted（DOM 挂载完成，可操作 DOM，请求数据也常用）；
更新阶段：beforeUpdate（数据更新，DOM 未重新渲染）、updated（DOM 渲染完成，数据与视图同步）；
销毁阶段：beforeDestroy（组件即将销毁，可清除定时器 / 解绑事件）、destroyed（组件已销毁，所有实例资源释放）。
✅ ② Vue3 生命周期变化（3 个核心区别，必答）
Vue3 兼容 Vue2 选项式生命周期（可直接用），同时提供组合式 API 的生命周期钩子，核心变化：
命名变化：beforeDestroy→beforeUnmount、destroyed→unmounted（语义更精准）；
组合式 API 写法：在<script setup>中，需导入钩子函数使用，对应关系：
setup() → 替代 beforeCreate + created（setup执行时机更早）
onMounted → mounted
onUpdated → updated
onBeforeUnmount → beforeUnmount
onUnmounted → unmounted
执行时机：setup是组合式 API 的入口，执行时机早于 beforeCreate，此时this为undefined。
✅ ③ 面试高频追问：「请求数据写在哪个生命周期？为什么？」
答：优先写在 created /mounted/setup。
created：DOM 未生成，但数据已初始化，可提前发起请求，节省请求时间；
mounted：DOM 已挂载完成，若请求后需要操作 DOM，必须写在 mounted；
Vue3 setup：可直接在顶层写请求（无需嵌套钩子），最简、最推荐。
二、组件核心 & 通信题（高频必考，占比 40%）
组件通信是 Vue 面试重中之重，必须熟练掌握「所有通信方式 + 适用场景」，按「Vue2 专属、Vue3 专属、通用」分类记忆，答出方式 + 用法 + 场景才算满分。
✅ 1. Vue 组件之间有哪些通信方式？分别适用于什么场景？
✅ 一、父子组件通信（最常用，100% 考）【4 种】
✅ 方式 1：props / $emit（Vue2/Vue3 通用，首选）
✅适用场景：父传子（props）、子传父（$emit），父子单向通信的标准方案。
✔️ 父传子：父组件通过:属性名="数据"传值，子组件通过props接收（支持类型校验、默认值、必传校验）；
✔️ 子传父：子组件通过this.$emit('自定义事件名', 数据)触发事件，父组件通过@自定义事件名="回调"接收数据。
Vue3<script setup>：子组件用defineProps接收、defineEmits触发事件，无需 this。
✅ 方式 2：ref / $refs（Vue2）、ref + 模板引用（Vue3）
✅适用场景：父组件主动获取子组件的属性 / 调用子组件的方法（父子双向交互）。
Vue2：父组件给子组件加ref="xxx"，通过this.$refs.xxx访问子组件实例；
Vue3：父组件用const childRef = ref(null)，子组件加ref="childRef"，通过childRef.value访问实例。
✅ 方式 3：$parent / $children（Vue2 专属，Vue3 废弃）
✅适用场景：子组件获取父组件实例（）、父组件获取所有子组件实例数组（children）；
⚠️ 缺点：耦合度高，不推荐在大型项目使用，Vue3 已移除该 API。
✅ 方式 4：provide /inject（Vue2/Vue3 通用）
✅适用场景：隔代组件通信（父→孙、爷→孙），跨多层级的单向数据传递，Vue3 中优先级极高。
用法：父组件用provide('key', 数据)提供数据，子孙组件用inject('key')注入数据；
特点：无视组件层级，支持响应式数据传递（Vue3 中配合 ref/reactive，Vue2 中配合 Vue.observable）。
✅ 二、兄弟组件通信【3 种】
✅方式 1：父组件中转（最稳妥，推荐）
思路：兄弟 A → 父组件（$emit），父组件 → 兄弟 B（props），利用父子通信实现兄弟通信，无副作用、易维护。
✅方式 2：EventBus 事件总线（Vue2 常用，Vue3 替代）
思路：创建一个全局的 Vue 实例作为「事件中心」，兄弟组件通过$on监听事件、$emit触发事件；
⚠️ Vue3：移除 Vue 实例，可用mitt/tiny-emitter库实现事件总线。
✅方式 3：Pinia/Vuex（全局状态管理，推荐）
思路：将兄弟组件共享的数据存入全局仓库，组件按需读取 / 修改，是大型项目兄弟通信的标准方案。
✅ 三、任意组件通信（跨层级、跨兄弟）【2 种，必背】
✅ ✨ 方式 1：Pinia（Vue3 首选）/ Vuex（Vue2 首选）【核心方案】
✅适用场景：项目全局共享数据（如用户信息、主题配置、购物车数据），支持组件任意层级通信，是企业级项目的标配。
Vue2：用 Vuex（核心：State、Mutation、Action、Getter、Module）；
Vue3：用 Pinia（替代 Vuex，更轻量、支持 TS、无需模块化嵌套，语法更简洁）。
✅ 方式 2：全局变量 /localStorage/sessionStorage
✅适用场景：非响应式的全局数据（如用户 token、静态配置），简单场景应急使用；
⚠️ 缺点：数据非响应式，修改后视图不会自动更新，需手动处理。
✅ 面试总结（满分话术）
「父子通信用 props/$emit/ref；隔代通信用 provide/inject；兄弟通信用父组件中转或 Pinia；任意组件通信首选 Pinia，简单场景用 EventBus / 全局变量。」
✅ 2. Vue3 中 setup 的特性和优势是什么？
标准答案（Vue3 核心考点，必答 4 点优势）：
setup是 Vue3组合式 API（Composition API）的入口函数，也是<script setup>语法糖的底层，核心特性 & 优势：
✅更早的执行时机：执行时机早于 Vue2 的beforeCreate，此时组件实例未创建，this为undefined；
✅统一的代码组织：将「同一业务逻辑」的变量、方法、生命周期聚合在一起，解决 Vue2 选项式 API（Options API）「代码碎片化」的问题，大型组件可读性、可维护性翻倍；
✅更好的 TS 支持：天然兼容 TypeScript，变量 / 方法的类型推导更精准，无需额外绑定 this，解决 Vue2 中 TS 支持差的痛点；
✅语法更简洁：<script setup>语法糖可省略export default、defineProps/defineEmits自动注册，无需 return 暴露变量 / 方法，代码量大幅减少；
✅更强的复用性：配合「组合式函数（Composables）」，可将通用逻辑抽离为独立的 hooks 函数，实现跨组件逻辑复用，替代 Vue2 的 mixins（无命名冲突、可追溯）。
✅ 3. Vue2 的 mixins 有什么缺点？Vue3 是如何解决的？
标准答案（中高级面试高频题，对比答法）：
✅ 一、Vue2 mixins 的 3 个核心缺点（必答）
mixins 是 Vue2 中组件逻辑复用的方案，缺点非常明显，也是 Vue3 弃用它的原因：
✅命名冲突问题：mixins 中的变量、方法、生命周期，若与组件内同名，会被组件内的内容覆盖，且无任何报错，排查困难；
✅来源追溯困难：组件中引入多个 mixins 时，无法直观判断「某个变量 / 方法来自哪个 mixin」，大型项目中可读性极差；
✅逻辑耦合问题：mixins 与组件之间隐式共享数据，mixins 可修改组件内的数据，组件也可修改 mixins 的数据，耦合度高，易产生副作用。
✅ 二、Vue3 的解决方案（2 种，必答）
Vue3 用组合式函数（Composables，也叫 Vue3 Hooks）彻底替代 mixins，同时提供provide/inject增强方案，解决所有痛点：
✅组合式函数（核心）：将复用逻辑抽离为独立的函数，函数内部用 ref/reactive 定义响应式数据，return 暴露需要的变量 / 方法；组件通过导入函数、解构赋值使用，命名可控、来源清晰，无冲突、可追溯；
✅provide/inject 增强：配合 ref/reactive 实现响应式数据传递，数据流向清晰，且支持跨层级复用，无耦合问题。
三、Vue2/Vue3 原理深挖题（中高级必考，手写 + 原理）
该板块是拉开面试差距的核心，校招侧重「原理理解」，社招 / 中高级侧重「手写实现」，答案包含「原理表述 + 手写代码」，可直接背诵、手写。
⭐ ✅ 1. Vue2 的双向数据绑定原理是什么？手写简易版 Vue2 响应式？
✅ 一、原理表述（面试必背，3 句话讲清）
Vue2 的双向数据绑定基于「数据劫持（Object.defineProperty） + 发布 - 订阅模式」实现：
✅数据劫持：通过Object.defineProperty遍历 data 中的所有属性，为每个属性添加getter/setter；
✅依赖收集：组件渲染时，访问 data 属性会触发getter，将当前的Watcher（观察者）收集到「Dep（依赖管理器）」中；
✅派发更新：当 data 属性被修改时，触发setter，Dep 通知所有收集的 Watcher 执行更新，进而触发视图重新渲染。
✔️ 补充：v-model是双向绑定的语法糖，底层 =v-bind:value（数据→视图） +v-on:input（视图→数据）。
⭐ ✅ 2. Vue3 为什么用 Proxy 替代 Object.defineProperty？两者的区别是什么？
标准答案（Vue3 核心原理题，必答 4 点优势）：
Vue3 的响应式底层由Proxy（代理） + Reflect（反射）实现，彻底替代 Vue2 的Object.defineProperty，核心原因是后者存在致命缺陷，Proxy 优势更明显，两者核心区别：
✅ 一、Object.defineProperty 的 3 个核心缺陷（必答）
✅无法监听对象新增 / 删除的属性：只能劫持已存在的属性，对obj.newKey = xxx、delete obj.key无感知，Vue2 中需用Vue.set/this.$set手动处理；
✅无法监听数组的原生方法 / 下标修改：对数组push/pop/shift/unshift/splice/sort/reverse等方法、arr[0] = xxx无法劫持，Vue2 中需重写数组原型方法；
✅劫持粒度细，性能差：需要深度遍历对象，为每个属性单独添加 get/set，嵌套层级越深，性能损耗越大。
✅ 二、Proxy 的 4 个核心优势（必答）
✅监听整个对象，而非单个属性：直接代理整个对象，支持新增 / 删除属性的监听，无需手动处理；
✅完美支持数组监听：可监听数组的下标修改、原生方法调用，无需重写数组原型；
✅劫持粒度粗，性能更优：只代理顶层对象，惰性劫持（嵌套对象访问时才递归代理），大幅提升初始化性能；
✅支持更多数据类型：可代理 Map、Set、WeakMap、WeakSet 等集合类型，Object.defineProperty仅支持普通对象。
✅ 补充：Vue3 中 Reflect 的作用？
配合 Proxy 实现属性的默认行为（如Reflect.get(target, key)等价于target[key]）；
统一返回值类型，避免 Proxy 拦截时出现异常；
绑定 this 指向，确保操作的正确性。
✅ 3. Vue 的虚拟 DOM（VNode）和 Diff 算法原理是什么？
✅ 一、虚拟 DOM（VNode）原理
虚拟 DOM 是对真实 DOM 的抽象描述，本质是一个JavaScript 对象，包含tag（标签名）、props（属性）、children（子节点）、el（对应真实DOM）等属性。
✅ 核心作用：
避免直接操作真实 DOM，用 JS 对象描述 DOM 结构，提升操作效率；
为跨平台渲染提供基础（Vue 可通过 VNode 渲染到浏览器 DOM、小程序、原生应用）；
数据更新时，通过对比新旧 VNode，实现「精准 DOM 更新」。
✅ 二、Diff 算法原理（面试必背，核心流程）
Diff 算法是对比新旧两棵 VNode 树，找出差异节点，只更新差异部分的算法，Vue 的 Diff 遵循「同层比较、深度优先」原则，核心流程 3 步：
✅同级节点比较：只对比同一层级的 VNode，不跨层级比较（如根节点只对比根节点，子节点只对比子节点），时间复杂度从 O (n³) 降至 O (n)；
✅节点类型判断：
若新旧节点类型不同：直接销毁旧节点，创建并挂载新节点；
若新旧节点类型相同：对比节点的 props、children，更新差异属性，递归对比子节点；
✅列表 Diff 优化：针对 v-for 的列表节点，利用key建立节点映射关系，通过「移动、新增、删除」实现高效更新，避免全量重建。
四、Vue 全家桶题（项目必考，占比 30%）
Vue 全家桶（VueRouter + Pinia/Vuex）是企业项目标配，面试必考「使用方式 + 核心原理 + 常见问题」，答案适配 Vue2/Vue3 双版本。
✅ 1. VueRouter 的核心原理是什么？Vue2 和 Vue3 的使用区别？
✅ 一、VueRouter 核心原理（hash 模式 vs history 模式，必答）
VueRouter 是 Vue 的路由管理器，实现单页面应用（SPA）的核心，支持两种路由模式，底层原理不同：
✅ 模式 1：hash 模式（默认）
原理：基于 URL 的hash 值（#）实现，#后的内容不会发送到服务器，路由切换时 URL 变化但页面不刷新；
特点：无需后端配置，兼容性好（支持 IE），URL 带#，美观性差；
核心 API：监听window.onhashchange事件，获取 hash 值变化，匹配对应路由组件。
✅ 模式 2：history 模式（推荐）
原理：基于 HTML5 的History API（pushState/replaceState）实现，URL 无#，与原生路由一致；
特点：URL 美观，需后端配置（所有请求都重定向到 index.html），否则刷新页面会 404；
核心 API：监听window.onpopstate事件，监听浏览器前进 / 后退，匹配路由组件。
✅ 二、Vue2 vs Vue3 VueRouter 使用区别（3 点必答）
✅安装方式不同：
Vue2：安装vue-router@3.x，通过Vue.use(VueRouter)全局注册；
Vue3：安装vue-router@4.x，通过createRouter创建路由实例，配合 Vue3 的 createApp 挂载。
✅路由实例创建不同：
// Vue2constrouter=newVueRouter({routes,mode:'history'})newVue({router}).$mount('#app')// Vue3constrouter=createRouter({history:createWebHistory(),routes})createApp(App).use(router).mount('#app')
✅组件内使用不同：
Vue2：通过this.$router（路由实例）、this.$route（当前路由信息）访问；
Vue3：<script setup>中需导入useRouter/useRoute函数使用，无 this。
✅ 2. VueRouter 中导航守卫有哪些？分别适用于什么场景？
标准答案（按「全局、路由、组件」分类，答出类型 + 用法 + 场景）：
导航守卫是 VueRouter 的路由拦截器，用于控制路由的「跳转前 / 跳转后」行为，分为 3 类，优先级：全局前置 > 路由独享 > 组件内守卫。
✅ 1. 全局守卫（作用于所有路由，最常用）
✅router.beforeEach（全局前置守卫）：路由跳转前执行，核心场景：登录权限校验、路由拦截、页面跳转埋点；
✅router.afterEach（全局后置守卫）：路由跳转后执行，场景：页面标题修改、滚动条重置。
✅ 2. 路由独享守卫（作用于单个路由）
beforeEnter：在路由配置中定义，仅作用于当前路由，场景：单个路由的权限校验。
✅ 3. 组件内守卫（作用于当前组件）
beforeRouteEnter：组件进入前执行（组件实例未创建，无 this）；
beforeRouteUpdate：组件复用前执行（如动态路由/user/:id切换）；
beforeRouteLeave：组件离开前执行，核心场景：表单未提交时的离开确认、清除定时器。
✅ 面试高频追问：「登录权限校验怎么实现？」
答：在router.beforeEach中实现：
router.beforeEach((to,from,next)=>{consttoken=localStorage.getItem('token')// 需登录的路由，无token则跳登录页if(to.meta.requiresAuth){token?next():next('/login')}else{next()// 无需登录，直接放行}})
✅ 3. Pinia 和 Vuex 的区别？为什么 Vue3 推荐用 Pinia？
标准答案（Vue3 项目必考，必答 5 点核心区别）：
Pinia 是 Vue3 官方推荐的状态管理库，是 Vuex 的「升级版」，彻底替代 Vuex，两者核心区别（Pinia 优势）：
✅更轻量，语法更简洁：Pinia 体积仅 1KB，无需像 Vuex 那样嵌套State/Mutation/Action/Getter/Module，代码量减少 50%；
✅天然支持 TS：Pinia 的类型推导更精准，无需手动定义类型，Vuex 的 TS 支持繁琐、不友好；
✅无需模块化嵌套：Vuex 中需用 Module 拆分模块，Pinia 中每个 store 都是独立的模块，直接创建即可，无嵌套层级，更易维护；
✅支持直接修改 State：Pinia 中可在组件内直接修改 State（也可写 Action），Vuex 中必须通过 Mutation 修改 State，Action 只能异步；
✅更好的 DevTools 支持：Pinia 完美兼容 Vue3 DevTools，支持 store 的时间旅行、状态快照，调试更友好；
✅无命名空间问题：Vuex 的 Module 需手动开启命名空间，Pinia 的每个 store 都有独立的命名空间，无冲突风险。
五、Vue 性能优化题（项目拔高题，面试加分项）
性能优化是中高级面试必考，体现候选人的项目实战能力，按「编码阶段、打包阶段、运行阶段」分类，记忆「优化点 + 具体方案」，答出 3 点以上即可加分，答出 5 点以上满分。
✅ 面试高频问：「你在 Vue 项目中做过哪些性能优化？」（标准答案，分 3 类）
✅ 一、编码阶段优化（开发中可落地，最常用，必答）
✅合理使用 v-if /v-show：频繁切换用 v-show，少切换用 v-if，减少 DOM 操作；
✅v-for 加唯一 key，避免用 index：提升列表 Diff 效率，防止数据错乱；
✅避免 v-for 和 v-if 同用：两者同用时 v-for 优先级更高，会导致每次渲染都遍历列表，可将数据过滤后再渲染；
✅使用懒加载：组件懒加载（import()）、图片懒加载（v-lazy），减少首屏加载资源；
✅缓存高频使用的数据：用computed（缓存计算结果）、keep-alive（缓存组件实例），避免重复计算 / 重复渲染；
✅减少响应式数据：非响应式数据不用 ref/reactive，直接用普通变量，减少 Proxy 劫持开销。
✅ 二、打包阶段优化（工程化优化，必答）
✅路由懒加载：VueRouter 中用() => import('@/views/xxx.vue')，实现路由组件按需加载，拆分 chunk 包；
✅第三方库按需引入：如 ElementUI、AntD-Vue，只引入用到的组件，不引入全量库；
✅压缩资源：开启 Vite/Webpack 的代码压缩（JS/CSS/ 图片），去除 console、注释；
✅CDN 加速：将 Vue、VueRouter、Pinia 等第三方库通过 CDN 引入，不打包进项目，减小打包体积；
✅Tree Shaking：开启摇树优化，移除项目中未使用的代码，减小打包体积。
✅ 三、运行阶段优化（进阶优化，加分项）
✅使用虚拟列表：长列表（1000 + 数据）用vue-virtual-scroller，只渲染可视区域的 DOM 节点，解决长列表卡顿；
✅防抖 / 节流处理：对高频事件（resize、scroll、input）做防抖（debounce）/ 节流（throttle），减少事件触发次数；
✅优化 SSR / 预渲染：首屏加载慢的项目，用 SSR（服务端渲染）/ 预渲染，提升首屏加载速度和 SEO。
六、Vue 高频拓展题（查漏补缺，覆盖所有考点）
✅ 1. computed 和 watch 的区别？分别适用于什么场景？
标准答案（高频基础题，分「区别 + 场景」）：
✅ 核心区别
✅功能定位不同：
computed：计算属性，依赖其他数据推导新值，是「多对一」的映射关系；
watch：监听器，监听单个数据的变化，执行自定义逻辑，是「一对多」的触发关系。
✅缓存机制不同✅：
computed：有缓存，依赖数据不变时，多次访问会直接返回缓存结果，不重复计算；
watch：无缓存，监听的数据变化一次，就执行一次回调函数。
✅使用场景不同✅：
computed：数据推导、值转换场景（如拼接姓名、计算总价、过滤列表）；
watch：数据变化后的异步操作、复杂逻辑处理场景（如监听搜索关键词变化发起请求、监听路由变化执行埋点）。
✅ 2. keep-alive 的作用是什么？有哪些生命周期钩子？
标准答案：
✅ 核心作用
keep-alive是 Vue 的内置组件，用于缓存组件实例，避免组件的「销毁→重建」，提升组件切换效率，常用在路由切换、tab 切换场景。
✅ 专属生命周期钩子（2 个，必答）
被 keep-alive 缓存的组件，会新增两个生命周期钩子：
✅activated：组件被激活时执行（进入组件）；
✅deactivated：组件被失活时执行（离开组件）。
✔️ 补充：组件首次渲染仍会执行mounted，后续切换只执行activated/deactivated。
✅ 3. Vue3 相比 Vue2 有哪些核心升级？
标准答案（面试必背，5 点核心升级）：
✅组合式 API（Composition API）：替代选项式 API，解决代码碎片化问题，提升大型组件的可维护性和复用性；
✅响应式系统重构：用 Proxy 替代 Object.defineProperty，解决 Vue2 响应式的缺陷，支持对象新增 / 删除属性、数组监听；
✅更轻量、更快：体积减少 40%，初始化性能提升 55%，更新性能提升 133%；
✅天然支持 TS：源码用 TS 重构，TS 类型推导更精准，开发体验更好；
✅其他优化：支持多根节点组件、Teleport 传送门、Suspense 异步组件，生态更完善（Pinia 替代 Vuex）。
