前端vue面试题

下面这些题是昨天去面试的小伙伴分享的，还是新鲜的，快来看~

1.Vue 响应式原理？

• vue2：
  • 在 Vue2 中注意使用 Object.defineProperty() 方法来实现响应式，它为对象中的每一个属性都定义了一个 getter 和 setter，当数据发生变化时，会触发相应的更新操作，从而让视图也随之更新。
  • 在 Vue2 中，数据对象通过 new Vue 中的 data 对象进行实例化，在实例化的过程中，Vue 会遍历这个数据对象使用 Object.defineProperty() 把他们转化为 getter/setter，当 getter/setter 接收到访问或修改时，会通过对应的 Watcher 及所依赖的 Watcher 进行更新。
• vue3：
  • 在 vue3 中主要使用了 Reactive API 和 Proxy 来实现响应式
  • reactive() 函数会讲一个普通对象转换成响应式对象，这个函数内部使用了 ES6 的 proxy 对象，讲的对象的 getter/setter, 并使用依赖收集，派发更新等机制。
  • 同时增加了 ref 和 computed 这两个响应式 API，让我们可更灵活的管理组件内的数据状态。

2.Vue是如何监听数组的变化的？

• Vue 通过把数组的原生方法重写了
  1. 获取原生数组的原型方法，因为拦截后才能对数组添加拦截操作
  2. 对数组的原型方法使用 Object.defineProperty() 做一些拦截操作
  3. 把需要被拦截的数组类型的数据原型指向改造后的原型方法

const arrayProto = Array.prototype // 获取Array的原型

function def (obj, key) {
    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        value: function(...args) {
            console.log(key); // 控制台输出 push
            console.log(args); // 控制台输出 [Array(2), 7, "hello!"]

            // 获取原生的方法
            let original = arrayProto[key];
            // 将开发者的参数传给原生的方法，保证数组按照开发者的想法被改变
            const result = original.apply(this, args);

            // do something 比如通知Vue视图进行更新
            console.log('我的数据被改变了，视图该更新啦');
            this.text = 'hello Vue';
            return result;
        }
    });
}

// 新的原型
let obj = {
    push() {}
}

// 重写赋值
def(obj, 'push');

let arr = [0];

// 原型的指向重写
arr.__proto__ = obj;

// 执行push
arr.push([1, 2], 7, 'hello!');
console.log(arr);

3.vue 为什么不能检测数组变动？

• 通常情况下，vue 通过对每一个键设置 getter/setter 来实现响应式，没有对数组的每个键设置响应式，而是直接对值递归设置响应式。主要考虑到性能问题。

4.canvas 生成图片模糊问题？

• 没有使用整数坐标：可使用 Math.floor 将坐标强制转换为整数。
• 线条宽度设置的太小，可将 lineWidth 设置为整数值

5.vue 的数据劫持？

• Vue2:
  • 使用 Object.defineProperty() 的 getter/setter

    
        
        
        
    
    
        

    
            
{{ message }}
            Change Message
        
        
    

• Vue3：
  • 使用 proxy 来实现数据劫持
    1. proxy 可直接监听数组的修改
    2. proxy 可直接监听属性的新增和删除
    3. 在实现深层次监听的时候，不是一次性递归所有的属性为其添加监听，而是只有在数据对象属性被访问的时候才会添加

    
        
        
        
    
    
        


            
{{ message }}
            Change Message
        
        
    

6.给定一个对象数组，如何根据另一个对象数组对另一个去重？

• 可使用 filter 方法结合 map 和 includes 方法来实现根据另一个对象数组去重操作

let originalArr = [{name: 'John', age: 26}, {name: 'Mary', age: 22}, {name: 'Peter', age: 28}];
let filterArr = [{name: 'John', age: 26}, {name: 'Bob', age: 25}];

let filteredOriginalArr = originalArr.filter((obj) => {
  return !filterArr.map((item) => item.name).includes(obj.name);
});

console.log(filteredOriginalArr); // Output: [{name: 'Mary', age: 22}, {name: 'Peter', age: 28}]
// originalArr 表示要被筛选的对象数组
// filterArr 则是用来进行筛选的参照数组
// filter 方法将会按条件对 originalArr 进行筛选，并返回结果存储在 filteredOriginalArr 中。

特殊字符描述：

1. 问题标注 Q:(question)
2. 答案标注 R:(result)
3. 注意事项标准：A:(attention matters)
4. 详情描述标注：D:(detail info)
5. 总结标注：S:(summary)
6. 分析标注：Ana:(analysis)
7. 提示标注：T:(tips)