Vue2/Vue3的响应式原理是什么

//
defineReactive(data,key,val){
Object.defineProperty(data,key,{
enumerable:true,
configurable:true,
get:function(){
console.log(`对象属性:${key}访问defineReactive的get！`)
returnval;
},
set:function(newVal){
if(val===newVal){
return;
}
val=newVal;
console.log(`对象属性:${key}访问defineReactive的get！`)
}
})
}

letobj={};
this.defineReactive(obj,'name','sapper');
//修改obj的name属性
obj.name='工兵';
console.log('obj',obj.name);
//为obj添加age属性
obj.age=12;
console.log('obj',obj);
console.log('obj.age',obj.age);
//为obj添加数组属性
obj.hobby=['游戏','原神'];
obj.hobby[0]='王者';
console.log('obj.hobby',obj.hobby);

//为obj添加对象属性
obj.student={school:'大学'};
obj.student.school='学院';
console.log('obj.student.school',obj.student.school);

letobj={};
//初始化就添加hobby
this.defineReactive(obj,'hobby',['游戏','原神']);
//改变数组下标0的值
obj.hobby[0]='王者';
console.log('obj.hobby',obj.hobby);

//proxy实现
lettargetProxy={name:'sapper'};
letobjProxy=newProxy(targetProxy,{
get(target,key){
console.log(`对象属性:${key}访问Proxy的get！`)
returntarget[key];
},
set(target,key,newVal){
if(target[key]===newVal){
return;
}
console.log(`对象属性:${key}访问Proxy的set！`)
target[key]=newVal;
returntarget[key];
}
})
//修改objProxy的name属性
objProxy.name='工兵';
console.log('objProxy.name',objProxy.name);
//为objProxy添加age属性
objProxy.age=12;
console.log('objProxy.age',objProxy.age);
//为objProxy添加hobby属性
objProxy.hobby=['游戏','原神'];
objProxy.hobby[0]='王者';
console.log('objProxy.hobby',objProxy.hobby);
//为objProxy添加对象属性
objProxy.student={school:'大学'};
objProxy.student.school='学院';
console.log('objProxy.student.school',objProxy.student.school);

data(){
return{
name:'Sapper',
hobby:['游戏','原神'],
obj:{
name:'张三',
student:{
major:'软件工程',
class:'1班',
}
}
}
}

functioninitData(vm:Component){
//获取组件中声明的data属性
letdata:any=vm.$options.data
//对newVue实例下声明、组件中声明两种情况的处理
data=vm._data=isFunction(data)?getData(data,vm):data||{}
...
//observedata
constob=observe(data)//为data属性创建Observer实例
ob&&ob.vmCount++
}

vm.$watch('a.b.c',function(newVal,oldVal)){....}

exportfunctionparsePath(path){
constsegment=path.split('.');
returnfunction(obj){
...
for(leti=0;i

exportdefaultclassWatcherimplementsDepTarget{
vm?:Component|null
cb:Function
deps:Array
...
constructor(vm:Component|null,expOrFn:string|(()=>any),cb:Function,...){
...
this.getter=parsePath(expOrFn)//解析嵌套对象
...
}
get(){//读取数据
...
returnvalue
}

addDep(dep:Dep){
...
dep.addSub(this)//添加依赖
...
}
cleanupDeps(){//删除依赖
...
dep.removeSub(this)
...
}
update(){//通知依赖更新
this.run()
...
}

run(){
...
this.cb.call(this.vm,value,oldValue)
}
...
depend(){//收集依赖
leti=this.deps.length
while(i--){
this.deps[i].depend()
}
}
...
}

//源码Observer类中对数组处理的部分代码
if(Array.isArray(value)){
if(hasProto){
protoAugment(value,arrayMethods)
}else{
copyAugment(value,arrayMethods,arrayKeys)
}
this.observeArray(value)
}

consthouse={status:'未出租',price:1200,type:'一房一厅'};
constobj=newProxy(house,{
get(target,key){
returntarget[key];
},
set(target,key,newVal){
target[key]=newVal;
returntrue;
}
})
functioneffect(){
console.log('房子状态：'+obj.status);
}

effect()//触发了proxy对象的get方法
obj.status='已出租！';
effect()

constobjSet=newSet();
constobj=newProxy(house,{
//拦截读取操作
get(target,key){
objSet.add(effect)//收集effect
returntarget[key];
},
set(target,key,newVal){
target[key]=newVal;
objSet.forEach(fn=>fn())//遍历effect
returntrue;
}
})

effect(()=>console.log('房子状态：'+obj.status))//上面的例子会直接报notdefine

//添加一个全局变量activeEffect存储依赖函数，这样effect就不会依赖函数的名字了
letactiveEffect;
functioneffect(fn){
activeEffect=fn;
//执行副作用函数
fn()
}

setTimeout(()=>{
obj.notExit='不存在的属性';
},1000)

constweakMap=newWeakMap();
letactiveEffect;
consttrack=((target,key)=>{
if(!activeEffect){
return;
}
//从weakMap中获取当前target对象
letdepsMap=weakMap.get(target);
if(!depsMap){
weakMap.set(target,(depsMap=newMap()))
}
//从Map中属性key获取当前对象指定属性
letdeps=depsMap.get(key)
if(!deps){
//副作用函数存储
depsMap.set(target,(deps=newSet()))
}
deps.add(activeEffect)
})
consttrigger=((target,key)=>{
//从weakMap中获取当前target对象
constdepsMap=weakMap.get(target);
if(!depsMap)return;
//从Map中获取指定key对象属性的副作用函数集合
consteffects=depsMap.get(key);
effects&&effects.forEach(fn=>fn())
})

constmap=newMap();
constweakMap=newWeakMap();
(function(){
constfoo={foo:1};
constbar={bar:2};
map.set(foo,1);
weakMap.set(bar,2);
})()//函数执行完，weakMap内的所有属性都被垃圾回收器回收了
setTimeout(()=>{
console.log(weakMap);//刷新页面发现weakMap里面没有属性了
},2000)

consteffectFn=(()=>{
conststr=obj.status?'':obj.type;
})
constobj=newProxy(house,{
get(target,key){
console.log('getrun!');//打印了两次
...
},
set(target,key,newVal){
...
}
})

//清空副作用函数依赖的集合
functioncleanupEffect(effect:ReactiveEffect){
const{deps}=effect
if(deps.length){
for(leti=0;i

//target:响应式代理对象,type:订阅类型(get、hase、iterate),key:要获取的target的键值
exportfunctiontrack(target:object,type:TrackOpTypes,key:unknown){
//如果允许追踪,并且当前有正在运行的副作用
if(shouldTrack&&activeEffect){
//获取当前target订阅的副作用集合,如果不存在,则新建一个
letdepsMap=targetMap.get(target)
if(!depsMap){
//获取对应属性key订阅的副作用,如果不存在,则新建一个
targetMap.set(target,(depsMap=newMap()))
}
letdep=depsMap.get(key)
if(!dep){
depsMap.set(key,(dep=createDep()))
}
...
//处理订阅副作用
trackEffects(dep,eventInfo)
}
}

exportfunctiontrackEffects(dep:Dep,debuggerEventExtraInfo?:DebuggerEventExtraInfo){
letshouldTrack=false
if(effectTrackDepth

//根据不同的type从depsMap取出，放入effects，随后通过run方法将当前的`effect`执行
exportfunctiontrigger(target:object,type:TriggerOpTypes,key?:unknown,newValue?:unknown,oldValue?:unknown,oldTarget?:Map|Set){
constdepsMap=targetMap.get(target)//获取响应式对象的副作用Map,如果不存在说明未被追踪,则不需要处理
if(!depsMap){
return
}
letdeps:(Dep|undefined)[]=[]
//如果是清除操作，那就要执行依赖原始数据的所有监听方法。因为所有项都被清除了。
if(type===TriggerOpTypes.CLEAR){//clear
//如果是调用了集合的clear方法,则要对其所有的副作用进行处理
deps=[...depsMap.values()]
}elseif(key==='length'&&isArray(target)){
constnewLength=Number(newValue)
depsMap.forEach((dep,key)=>{
if(key==='length'||key>=newLength){
deps.push(dep)
}
})
}else{//setadddelete
//key不为void0，则说明肯定是SET|ADD|DELETE这三种操作
//然后将依赖这个key的所有监听函数推到相应队列中
if(key!==void0){
deps.push(depsMap.get(key))
}
switch(type){//根据不同type取出并存入deps
caseTriggerOpTypes.ADD:
//如果原始数据是数组，则key为length，否则为迭代行为标识符
if(!isArray(target)){
deps.push(depsMap.get(ITERATE_KEY))
if(isMap(target)){
deps.push(depsMap.get(MAP_KEY_ITERATE_KEY))
}
}elseif(isIntegerKey(key)){
deps.push(depsMap.get('length'))
}
break
caseTriggerOpTypes.DELETE:
//如果原始数据是数组，则key为length，否则为迭代行为标识符
if(!isArray(target)){
deps.push(depsMap.get(ITERATE_KEY))
if(isMap(target)){
deps.push(depsMap.get(MAP_KEY_ITERATE_KEY))
}
}
break
caseTriggerOpTypes.SET:
if(isMap(target)){
deps.push(depsMap.get(ITERATE_KEY))
}
break
}
}
...
consteffects:ReactiveEffect[]=[]
for(constdepofdeps){
if(dep){
effects.push(...dep)
}
}
//遍历effects元素执行run函数
triggerEffects(createDep(effects))
}
}