vue面试题(一)

1. 谈一下你对 MVVM 原理的理解

传统 MVC：用户操作请求服务端路由，路由调用控制器处理数据，最终返回前端重新渲染页面（需手动关联数据与视图）。
MVVM：无需手动操作 DOM，通过 ViewModel 层自动绑定数据与视图：
- 数据变化时，ViewModel 通知视图更新；
- 视图变化时（如用户输入），ViewModel 同步更新数据。
核心：ViewModel 作为桥梁，实现数据与视图的双向绑定，减少 DOM 操作冗余。

2. 响应式数据的原理是什么？

核心技术：Object.defineProperty（Vue 2.x）。
实现流程：
1. 初始化数据时（initData），通过new Observer对data中的属性进行处理；
2. 调用walk方法遍历属性，通过defineReactive函数重定义属性；
3. 重定义时设置getter和setter：
  - getter：触发时进行依赖收集（将当前组件的watcher存入dep）；
  - setter：数据变化时，通知所有依赖的watcher更新视图（dep.notify()）。

代码核心片段：

javascript
 
运行
 
 
 
 

Object.defineProperty(obj, key, {
  get() {
    if (Dep.target) dep.depend(); // 收集依赖
    return value;
  },
  set(newVal) {
    if (newVal === value) return;
    value = newVal;
    dep.notify(); // 通知更新
  }
});

 

3. Vue 中如何检测数组变化？

原理：通过函数劫持重写数组原型方法，监听数组操作。
实现步骤：
1. 对data中的数组，重写其原型链，指向自定义的arrayMethods（基于Array.prototype创建）；
2. 重写 7 个会改变数组的方法：push、pop、shift、unshift、splice、sort、reverse；
3. 重写后的方法执行时：
  - 先调用原数组方法（保证功能正常）；
  - 对新增元素（如push、unshift、splice添加的元素）通过observeArray进行深度监控；
  - 手动触发dep.notify()，通知视图更新。

4. 为何 Vue 采用异步渲染？

原因：避免频繁更新导致的性能损耗。若同步渲染，每次数据变化都会立即重新渲染组件，多次修改数据会触发多次渲染。
实现原理：
1. 数据变化时，将关联的watcher放入队列（queueWatcher），并过滤重复watcher；
2. 通过nextTick异步执行队列中的watcher（flushSchedulerQueue），实现批量更新。

5. nextTick 的实现原理？

核心：基于宏任务与微任务的异步机制，批量执行回调。
优先级：
1. 优先使用微任务：Promise.then（浏览器支持时）、MutationObserver；
2. 其次使用宏任务：setImmediate（IE 支持）、setTimeout(fn, 0)。
流程：
1. 多次调用nextTick时，回调函数存入callbacks队列；
2. 通过上述异步方法触发flushCallbacks，依次执行队列中的回调。

6. Vue 中 Computed 的特点

核心特点：缓存机制，依赖不变则复用上次计算结果。
原理：
1. computed属性对应一个特殊watcher（computedWatcher），默认lazy: true；
2. 首次取值时触发watcher.evaluate()计算结果，并标记dirty: false；
3. 依赖属性变化时，标记dirty: true，下次取值重新计算。

7. Watch 中 deep: true 是如何实现的？

作用：监控对象 / 数组的深层变化。
原理：
1. 当deep: true时，watch会通过traverse函数递归遍历对象 / 数组的所有属性；
2. 遍历过程中触发每个属性的getter，将当前watcher存入其依赖（dep）；
3. 深层属性变化时，会通知watcher执行更新。

8. Vue 组件的生命周期

生命周期钩子	触发时机	常见用途
`beforeCreate`	实例初始化后，数据观测前	无（无法访问`data`、`methods`）
`created`	实例创建完成，数据观测完成	数据请求、初始化操作（无 DOM）
`beforeMount`	挂载开始前，`render`首次调用	预处理数据
`mounted`	实例挂载完成，`vm.$el`替换 DOM	DOM 操作（如初始化插件）
`beforeUpdate`	数据更新后，虚拟 DOM 渲染前	进一步修改数据（不触发额外渲染）
`updated`	虚拟 DOM 渲染与打补丁后	依赖 DOM 的操作（避免在此修改数据）
`beforeDestroy`	实例销毁前	清理定时器、解绑事件（`$off`）
`destroyed`	实例销毁后	最终资源释放

9. ajax 请求放在哪个生命周期中？

一般场景：放在mounted，此时 DOM 已渲染，可配合 DOM 操作处理请求结果。
服务端渲染（SSR）：放在created，因mounted在 SSR 中不执行。
原因：生命周期同步执行，而 ajax 异步执行，两者不冲突；created中 DOM 未就绪，不适合 DOM 操作。

10. 何时需要使用 beforeDestroy？

清理组件内的副作用操作，避免内存泄漏：
- 清除自定义定时器（setInterval）；
- 解绑全局事件（如window.scroll、document.mousemove）；
- 取消未完成的 ajax 请求。

11. Vue 中模板编译原理

流程：template → AST（抽象语法树） → 优化 AST → 生成render函数。
1. 解析（parse）：通过正则匹配标签、属性、文本，生成 AST；
2. 优化（optimize）：标记静态节点（不随数据变化的节点），避免重复渲染；
3. 生成（generate）：将 AST 转换为render函数（如_c('div', {attrs: {id: 'app'}}, [_v('text')])）。

12. v-if 和 v-show 的区别

维度	`v-if`	`v-show`
渲染逻辑	条件不成立时，不生成 DOM 节点	始终生成 DOM，通过`display`样式控制显示 / 隐藏
性能消耗	切换时销毁 / 重建节点（初始渲染成本低，切换成本高）	仅切换样式（初始渲染成本高，切换成本低）
适用场景	条件少变（如权限判断）	条件频繁切换（如 tab 切换）

13. 为什么 v-for 和 v-if 不能连用？

原因：v-for优先级高于v-if，连用会导致每次循环都执行v-if判断，即使部分元素无需渲染，仍会遍历整个列表，造成性能浪费。
示例：编译后代码为_l(列表, (item) => (条件 ? 渲染 : 不渲染))，循环不会因v-if提前终止。

14. 用 vnode 描述一个 DOM 结构

虚拟节点（vnode）：用 JavaScript 对象描述真实 DOM 的结构，包含以下核心属性：

javascript
 
运行
 
function vnode(tag, data, key, children, text) {
  return {
    tag: 'div',       // 标签名（如'div'、'span'）
    data: { id: 'app' }, // 属性（如id、class、事件）
    key: 'unique-key', // 唯一标识（优化diff）
    children: [/* 子vnode */], // 子节点
    text: 'hello'     // 文本内容（若为文本节点）
  };
}

15. diff 算法的时间复杂度

传统树的 diff 算法时间复杂度为O(n³)（n 为节点数）；
Vue 优化后为O(n)，通过限制 “仅比较同级节点”（前端极少跨层级移动 DOM），降低复杂度。

16. Vue 中 diff 算法原理

核心策略：同级比较，复用可复用节点，减少 DOM 操作。
步骤：
1. 比较新旧虚拟节点的子节点（oldCh与newCh）；
2. 处理边界情况：
  - 新有子节点、老无：新增节点（addVnodes）；
  - 老有子节点、新无：删除节点（removeVnodes）；
3. 双方都有子节点时，用双指针法对比：
  - 指针分别指向新旧子节点的首尾（oldStartIdx、oldEndIdx、newStartIdx、newEndIdx）；
  - 优先对比首尾节点（sameVnode判断是否可复用），命中则移动指针并更新；
  - 未命中则通过key查找可复用节点，移动或新增节点；
4. 递归处理子节点。