跳到主要内容

Vue 面经

核心考点​

1. 响应式原理​

  • Vue 2：Object.defineProperty 劫持属性 getter/setter；无法检测属性新增/删除，需用 Vue.set
  • Vue 3：Proxy 代理整个对象，天然支持新增/删除属性，性能更好

2. Composition API vs Options API​

对比项Options APIComposition API
逻辑组织按选项分散按功能聚合
逻辑复用Mixins（易冲突）Composables（清晰）
TypeScript较弱完整支持
适合场景简单组件复杂/大型项目

3. Vue 3 重要新特性​

  • Proxy 响应式：性能提升，支持 Map/Set/Array
  • Teleport：将组件渲染到 DOM 指定位置（如 Modal 挂到 body）
  • Fragments：组件可有多个根节点
  • setup() / script setup：更简洁的组合式写法
  • Suspense：异步组件加载的内置支持

4. 生命周期对比​

Vue 2             Vue 3 (Composition)
beforeCreate   →  setup()
created        →  setup()
beforeMount    →  onBeforeMount
mounted        →  onMounted
beforeUpdate   →  onBeforeUpdate
updated        →  onUpdated
beforeDestroy  →  onBeforeUnmount
destroyed      →  onUnmounted

5. computed vs watch vs watchEffect​

  • computed：依赖缓存，有返回值，用于派生状态
  • watch：明确监听某个源，可获取新旧值，支持异步操作
  • watchEffect：自动收集依赖，立即执行，适合副作用同步

6. 高频面试题​

  • v-model 原理：语法糖，绑定 :modelValue + @update:modelValue
  • nextTick 原理：异步队列（Promise → MutationObserver → setTimeout），DOM 更新后回调
  • keep-alive：缓存组件实例，触发 activated / deactivated 生命周期
  • diff 算法：Vue3 采用最长递增子序列优化移动操作
  • 为什么 data 是函数：防止组件实例间共享同一引用

💡 推荐阅读 Vue 3 官方文档 深入理解设计思路