中等难度Vue 面试题+详解答案，满满干货指导

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

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);

}

}

2 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;

};

});

3 vue3.0 用过吗 了解多少

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

• 组件选项声明方式 Vue3.x 使用 Composition API setup 是 Vue3.x 新增的一个选项&