一篇由简到难的 Vue 面试题+详解答案

计算属性原理详解 传送门[1]

侦听属性原理详解 传送门[2]

9 v-if 与 v-for 为什么不建议一起使用

v-for 和 v-if 不要在同一个标签中使用,因为解析时先解析 v-for 再解析 v-if。如果遇到需要同时使用时可以考虑写成计算属性的方式。

---

中等

10 Vue2.0 响应式数据的原理

整体思路是数据劫持+观察者模式

对象内部通过 defineReactive 方法，使用 Object.defineProperty 将属性进行劫持（只会劫持已经存在的属性），数组则是通过重写数组方法来实现。当页面使用对应属性时，每个属性都拥有自己的 dep 属性，存放他所依赖的 watcher（依赖收集），当属性变化后会通知自己对应的 watcher 去更新(派发更新)。

相关代码如下

class Observer {

// 观测值

constructor(value) {

this.walk(value);

}

walk(data) {

// 对象上的所有属性依次进行观测

let keys = Object.keys(data);

for (let i = 0; i < keys.length; i++) {

let key = keys[i];

let value = data[key];

defineReactive(data, key, value);

}

}

}

// Object.defineProperty数据劫持核心 兼容性在ie9以及以上

function defineReactive(data, key, value) {

observe(value); // 递归关键

// --如果value还是一个对象会继续走一遍odefineReactive 层层遍历一直到value不是对象才停止

//   思考？如果Vue数据嵌套层级过深 >>性能会受影响

Object.defineProperty(data, key, {

get() {

console.log(“获取值”);

//需要做依赖收集过程 这里代码没写出来

return value;

},

set(newValue) {

if (newValue === value) return;

console.log(“设置值”);

//需要做派发更新过程 这里代码没写出来

value = newValue;

},

});

}

export function observe(value) {

// 如果传过来的是对象或者数组 进行属性劫持

if (

Object.prototype.toString.call(value) === “[object Object]” ||

Array.isArray(value)

) {

return new Observer(value);

}

}

复制代码

响应式数据原理详解 传送门[3]

11 Vue 如何检测数组变化

数组考虑性能原因没有用 defineProperty 对数组的每一项进行拦截，而是选择对 7 种数组（push,shift,pop,splice,unshift,sort,reverse）方法进行重写(AOP 切片思想)

所以在 Vue 中修改数组的索引和长度是无法监控到的。需要通过以上 7 种变异方法修改数组才会触发数组对应的 watcher 进行更新

相关代码如下

// src/obserber/array.js

// 先保留数组原型

const arrayProto = Array.prototype;

// 然后将arrayMethods继承自数组原型

// 这里是面向切片编程思想（AOP）–不破坏封装的前提下，动态的扩展功能

export const arrayMethods = Object.create(arrayProto);

let methodsToPatch = [

“push”,

“pop”,

“shift”,

“unshift”,

“splice”,

“reverse”,

“sort”,

];

methodsToPatch.forEach((method) => {

arrayMethods[method] = function (…args) {

//   这里保留原型方法的执行结果

const result = arrayProto[method].apply(this, args);

// 这句话是关键

// this代表的就是数据本身 比如数据是{a:[1,2,3]} 那么我们使用a.push(4)  this就是a  ob就是a.ob 这个属性就是上段代码增加的 代表的是该数据已经被响应式观察过了指向Observer实例

const ob = this.ob;

// 这里的标志就是代表数组有新增操作

let inserted;

switch (method) {

case “push”:

case “unshift”:

inserted = args;

break;

case “splice”:

inserted = args.slice(2);

default:

break;

}

// 如果有新增的元素 inserted是一个数组 调用Observer实例的observeArray对数组每一项进行观测

if (inserted) ob.observeArray(inserted);

// 之后咱们还可以在这里检测到数组改变了之后从而触发视图更新的操作–后续源码会揭晓

return result;

};

});

复制代码

数组的观测原理详解 传送门[4]

12 vue3.0 用过吗 了解多少

• 响应式原理的改变 Vue3.x 使用 Proxy 取代 Vue2.x 版本的 Object.defineProperty

• 组件选项声明方式 Vue3.x 使用 Composition API setup 是 Vue3.x 新增的一个选项， 他是组件内使用 Composition API 的入口。

• 模板语法变化 slot 具名插槽语法 自定义指令 v-model 升级

• 其它方面的更改 Suspense 支持 Fragment（多个根节点）和 Protal（在 dom 其他部分渲染组建内容）组件，针对一些特殊的场景做了处理。基于 treeshaking 优化，提供了更多的内置功能。

Vue3.0 新特性以及使用经验总结 传送门[5]

13 Vue3.0 和 2.0 的响应式原理区别

Vue3.x 改用 Proxy 替代 Object.defineProperty。因为 Proxy 可以直接监听对象和数组的变化，并且有多达 13 种拦截方法。

相关代码如下

import { mutableHandlers } from “./baseHandlers”; // 代理相关逻辑

import { isObject } from “./util”; // 工具方法

export function reactive(target) {

// 根据不同参数创建不同响应式对象

return createReactiveObject(target, mutableHandlers);

}

function createReactiveObject(target, baseHandler) {

if (!isObject(target)) {

return target;

}

const observed = new Proxy(target, baseHandler);

return observed;

}

const get = createGetter();

const set = createSetter();

function createGetter() {

return function get(target, key, receiver) {

// 对获取的值进行放射

const res = Reflect.get(target, key, receiver);

console.log(“属性获取”, key);

if (isObject(res)) {

// 如果获取的值是对象类型，则返回当前对象的代理对象

return reactive(res);

}

return res;

};

}

function createSetter() {

return function set(target, key, value, receiver) {

const oldValue = target[key];

const hadKey = hasOwn(target, key);

const result = Reflect.set(target, key, value, receiver);

if (!hadKey) {

console.log(“属性新增”, key, value);

} else if (hasChanged(value, oldValue)) {

console.log(“属性值被修改”, key, value);

}

return result;

};

}

export const mutableHandlers = {

get, // 当获取属性时调用此方法

set, // 当修改属性时调用此方法

};

复制代码

14 Vue 的父子组件生命周期钩子函数执行顺序

• 加载渲染过程

父 beforeCreate->父 created->父 beforeMount->子 beforeCreate->子 created->子 beforeMount->子 mounted->父 mounted

• 子组件更新过程

父 beforeUpdate->子 beforeUpdate->子 updated->父 updated

• 父组件更新过程