2025年前端Vue最常用的面试题总结(含详细代码解析)以下及答案.docxVIP

2025年前端Vue最常用的面试题总结(含详细代码解析)以下及答案

Vue响应式原理（Vue2与Vue3对比）

Vue2通过`Object.defineProperty`对数据的`getter`和`setter`进行拦截，实现响应式。当访问数据时触发`getter`收集依赖（Watcher），修改数据时触发`setter`通知依赖更新。但该方案存在两个主要缺陷：无法检测对象新增/删除属性（需手动调用`Vue.set`/`Vue.delete`），无法监听数组长度变化或通过索引修改数组（需重写数组原型方法如`push`/`splice`）。

示例代码（模拟Vue2响应式）：

```javascript

functiondefineReactive(obj,key,val){

constdep=newDep();//依赖收集器

Object.defineProperty(obj,key,{

get(){

if(Dep.target)dep.addSub(Dep.target);//收集当前活动的Watcher

returnval;

},

set(newVal){

if(val===newVal)return;

val=newVal;

dep.notify();//通知所有Watcher更新

}

});

}

classDep{

constructor(){

this.subs=[];

}

addSub(sub){this.subs.push(sub);}

notify(){this.subs.forEach(sub=sub.update());}

}

Dep.target=null;//当前活动的Watcher

```

Vue3改用`Proxy`代理整个对象，能监听对象的所有操作（包括属性新增/删除、数组索引修改及长度变化），且无需重写数组方法。`Proxy`返回的是新对象，因此Vue3推荐使用`reactive`定义响应式对象，`ref`定义基本类型或对象的响应式（内部通过`reactive`包装成对象）。

示例代码（模拟Vue3响应式）：

```javascript

functionreactive(target){

returnnewProxy(target,{

get(target,key,receiver){

track(target,key);//收集依赖

returnReflect.get(target,key,receiver);

},

set(target,key,value,receiver){

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

trigger(target,key);//触发更新

returnresult;

},

deleteProperty(target,key){

constresult=Reflect.deleteProperty(target,key);

trigger(target,key);//删除属性时触发更新

returnresult;

}

});

}

consttargetMap=newWeakMap();//存储目标对象的依赖

functiontrack(target,key){

if(!activeEffect)return;//无当前副作用则不收集

letdepsMap=targetMap.get(target);

if(!depsMap)targetMap.set(target,(depsMap=newMap()));

letdep=depsMap.get(key);

if(!dep)depsMap.set(key,(dep=newSet()));

dep.add(activeEffect);//将副作用加入依赖集合

}

functiontrigger(target,key){

constdepsMap=targetMap.get(target);

if(!depsMap)return;

constdep=depsMap.get(key