VUE3非原始值响应方案完整代码，所有类型对象的完整方案

　　/* *原理：当触发数据读取操作时，执行副作用函数并存储到桶中 *当设置数据操作时，再将副作用函数从桶中取出并执行 */ //用一个全局变量activeEffect存储被注册过的副作用函数 let activeEffect //const buket=new Set() /* *weakMap为弱引用，不影响垃圾回收机制工作，当用户代码对一个 *对象没有引用关系时，垃圾会收器会回收该对象，避免引起栈堆的溢出 */ const bucket=new WeakMap() const effectStack=[] //定义一个宏任务队列 const jobQueue=new Set() //定义一个Promose，将一个任务添加到微任务队列 const p=Promise.resolve() //是否正在刷新队列 let isFlushing=false //Symbol唯一，可以作为对象属性标识符使用 const ITERATE_KEY=Symbol() //map的键使用 const MAP_ITERATE_KEY=Symbol() //定义一个map实例，存储原始对象到代理对象的映射 const reactiveMap=new Map() //代表是否追踪 let shouldTrack=true //定义一个对象，将自定义add方法添加到下面 const mutableInstrumentations={ 	add(key){ 		//this指向代理对象，通过raw获取原始数据对象 		const target=this.raw 		//是否元素已经存在集合中 		const hadkey=target.has(key) 		//直接使用原始数据对象的方法 		const res=target.add(key) 		if(!hadkey){ 			trigger(target,key,＂ADD＂) 		} 		return res 	}, 	delete(key){ 		//this指向代理对象，通过raw获取原始数据对象 		const target=this.raw 		//是否元素已经存在集合中 		const hadkey=target.has(key) 		const res=target.delete(key) 		if(hadkey){ 			trigger(target,key,＂DELETE＂) 		} 		return res 	}, 	//map数据类型拥有get和set两个方法，所以需要添加这两个方法 	get(key){ 		//this指向代理对象，通过raw获取原始数据对象 		const target=this.raw 		//是否元素已经存在集合中 		const had=target.has(key) 		//追踪依赖建立响应 		track(target,key) 		//直接使用原始数据对象的方法 		const res=target.get(key) 		//如果存在，返回结果，递归使用reactive返回最终的原始数据而非对象 		if(!had){ 			return typeof res===＂object＂? reactive(res):res 		} 		return res 	}, 	set(key,value){ 		//this指向代理对象，通过raw获取原始数据对象 		const target=this.raw 		//是否元素已经存在集合中 		const had=target.has(key) 		//获取旧值 		const oldValue=target.get(key) 		//此处为避免污染原始数据，value必须是数据，而不能是代理对象 		const rawValue=value.raw || value 		//设置新值 		target.set(key,rawValue) 		//如果不存在，说明时add 		//只有旧值与新值不同才会触发更新 		//因为NaN===NaN为false,而NaN!==NaN为true 		if(!had){ 			trigger(target,key,＂ADD＂) 		}else if(oldValue!==value && (oldValue===oldValue || value===value)){ 			trigger(target,key,＂SET＂) 		} 	}, 	forEach(callback,thisArg){ 		const wrap=(val)=>typeof val===＂object＂ ? reactive(val) : val 		const target=this.raw 		//建立响应 		track(target,ITERATE_KEY) 		//通过原始对象调用传递过去的函数 		target.forEach((v,k)=>{ 			//手动实现深响应 			callback.call(thisArg,wrap(v),wrap(k),this) 		}) 	}, 	[Symbol.iterator]:iterationMethod, 	entries:iterationMethod, 	values:valuesIterationMethod, 	keys:keysIterationMethod, } //抽离独立函数 function iterationMethod(){ 	const wrap=(val)=>typeof val===＂object＂ && val!==null ? reactive(val) : val 	const target=this.raw 	//获取原始迭代器方法 	const itr=target[Symbol.iterator]() 	//建立响应 	track(target,ITERATE_KEY) 	return { 		//对象的next方法是迭代协议 		//调用原始迭代器的next方法获取value和done 		next(){ 			const {value,done}=itr.next() 			return { 				//如果value不是undifined，进行包裹 				value:value?[wrap(value[0]),wrap(value[1])]:value, 				done 			} 		}, 		//实现可迭代协议 		[Symbol.iterator](){ 			return this 		} 	} } //抽离独立函数 function valuesIterationMethod(){ 	const wrap=(val)=>typeof val===＂object＂ && val!==null ? reactive(val) : val 	const target=this.raw 	//获取原始迭代器方法 	const itr=target.values() 	//建立响应 	track(target,ITERATE_KEY) 	return { 		//对象的next方法是迭代协议 		//调用原始迭代器的next方法获取value和done 		next(){ 			const {value,done}=itr.next() 			return { 				value:wrap(value), 				done 			} 		}, 		//实现可迭代协议 		[Symbol.iterator](){ 			return this 		} 	} } function keysIterationMethod(){ 	const wrap=(val)=>typeof val===＂object＂ && val!==null ? reactive(val) : val 	const target=this.raw 	//获取原始迭代器方法 	const itr=target.keys() 	//建立响应 	track(target,MAP_ITERATE_KEY) 	return { 		//对象的next方法是迭代协议 		//调用原始迭代器的next方法获取value和done 		next(){ 			const {value,done}=itr.next() 			return { 				value:wrap(value), 				done 			} 		}, 		//实现可迭代协议 		[Symbol.iterator](){ 			return this 		} 	} } //重写arr.includes,indexOf,lastIndexOf方法 const arrayInstumentations={} ;[＂includes＂,＂indexof＂,＂lastIndexof＂].forEach(method=>{ 	const originMethod=Array.prototype[method] 	arrayInstumentations[method]=function(...args){ 		//先在代理对象中查找，this是代理对象，将结果保存到res中 		let res=originMethod.apply(this,args) 		//如果res不存在，说明this.raw拿到了原始数组,再去其中查找,并跟新res的值 		if(res===false){ 			res=originMethod.apply(this.raw,args) 		} 		return res 	} })  //重写push方法 ;[＂push＂,＂pop＂,＂shift＂,＂unshift＂,＂splice＂].forEach(method=>{ 	const originMethod=Array.prototype[method] 	arrayInstumentations[method]=function(...args){ 		//在调用原始方法之前,禁止追踪 		shouldTrack=false 		//调用原始防范 		let res=originMethod.apply(this,args) 		//调用原始方法之后,允许追踪 		shouldTrack=true 		return res 	} })  /* const data={ 	foo:1,bar:2, 	get tep(){ 		return this.foo 	} } */ /* const obj={} const proto={bar:1} const child=reactive(obj) const parent=reactive(proto) //使用parent作为child的原型 Object.setPrototypeOf(child,parent)  //此处打印true，因为代理对象可以通过raw属性读取原始数据 console.dir(child.raw===obj) console.dir(parent.raw===proto)  effect(()=>{ 	//会执行两次 	console.log(child.bar) }) */ /* let arr=[1,2,3] //const obj=readonly(arr) const obj=reactive(arr)  //重新建立副作用函数 effect( 	()=>{ 		for(const key of obj){ 			console.log(key) 			document.getElementById(＂test＂).innerHTML=key 		} 	} ) setTimeout(()=>obj[3]=10,1000) */ /* //map 测试 const key={key:1} const value=new Set([1,2,3]) let map=new Map([[key,value]]) //const obj=readonly(arr) const pa=reactive(map)  //重新建立副作用函数 effect( 	()=>{ 		pa.forEach(function (value,key){ 			console.log(value) 			console.log(value.size) 			document.getElementById(＂test＂).innerHTML=value 		}) 	} ) setTimeout(()=>pa.set({key:1},1),1000) */  /* //如果使用pa.get(key)获取的是原始数据，并不能实现响应，所以这里也要用forEach setTimeout(()=>pa.forEach((v,k)=>{ 	v.add(4) }),1000) */  const pa=reactive(new Map([ 	[＂key1＂,＂value1＂], 	[＂key2＂,＂value2＂], ])) effect(()=>{ 	for(const [key,value] of pa.entries()){ 		console.log(key,value) 	} }) setTimeout(()=>{pa.set(＂key3＂,＂value3＂)},1000)  //封装代理对象, //isShallow浅响,应，isReadonly，浅只读 function createReactive(obj,isShallow=false,isReadonly=false){ 	return new Proxy(obj,{ 		//对原始数据的代理 		//拦截读取操作 		get(target,key,receiver){ 			//代理对象可以通过raw属性访问原始数据 			if(key===＂raw＂){ 				return target 			} 			if(key===＂size＂){ 				track(target,ITERATE_KEY) 				return Reflect.get(target,key,target) 			} 			//返回定义在对象mutableInstrumentations下的方法 			return mutableInstrumentations[key] 			/* 			//1.为解决set的this指向问题，Set.prototype.size是访问器属性 			//对于代理对象来说，this指向了代理对象，所以当调用代理对象.size的时候，就会出错 			//因为代理对象不存在内部槽，而set存在 			//为解决这个问题，需要将Reflect.get的第三个参数指定为原始对象 			//2.当执行p.delete时，delete为方法，所以会报错因为this始终指向p代理对象。 			//所以需要把delete方法与原始数据对象绑定 			if(key===＂size＂){ 				track(target,ITERATE_KEY) 				return Reflect.get(target,key,target) 			} 			if(key===＂delete＂){ 				return target[key].bind(target) 			} 			 			//重写arr.includes方法-= 			//如果定义的目标是数组，并且key存在于arrayInstrumentations上 			//那么返回定义再arrayInstrumentations上的值 			//执行函数时，实际执行的是定义再arrayInstrumentations上的includes方法 			//bind函数将this指向原始数据对象 			 			if(Array.isArray(target) && arrayInstumentations.hasOwnProperty(key)){ 				return Reflect.get(arrayInstumentations,key,receiver) 			} 			 			//因为数组的for of会读取symbol.iterator属性 			//为避免错误和性能开销，要避免副作用函数与之建立响应 			//如果key的类型是symbol则不进行追踪 			 			if(!isReadonly && typeof key!==＂symbol＂){ 				track(target,key) 			} 			//返回属性值 			//如果对象自身不存在该属性，会从对象原型寻找对应属性，并调用原型get方法得到最终结果 			const res=Reflect.get(target,key,receiver) 			if(isShallow){ 				return res 			} 			//深响应 			 			//对于obj.foo.bar来说，当修改obj.foo.bar的值时，并不能触发响应 			//为了解决这个问题，需要递归地调用reactive函数，直到能返回深响应地数据 			 			if(typeof res===＂object＂  && res!==null){ 				 				//实现深只读 				//如果是只读对象，则调用readyonly对数据，返回只读对象 				 				return isReadonly?readonly(res):reactive(res) 			} 			return res 			*/ 		}, 		//拦击in操作符读取属性值 		has(target,key){ 			track(target,key) 			return Reflect.has(target,key) 		}, 		//拦截for in 循环读取属性值 		ownKeys(target){ 			//将副作用函数和ITERATE_KEY关联 			//如果操作的是数组，则用length作为key并建立响应 			track(target,Array.isArray(target)?＂length＂:ITERATE_KEY) 			return Reflect.ownKeys(target) 		}, 		//拦截设置操作 		set(target,key,newvalue,receiver){ 			//数据是只读的，则打印错误并返回 			if(isReadonly){ 				console.warn(`属性${key}是只读的`) 				return true 			} 			//获取旧值 			const oldval=target[key] 			 			//如果属性不存在，说明是添加新属性，否则是设置已有属性 			//Object.prototype.hasOwnProperty检查当前操作的属性是否已经存在对象身上 			 			//如果代理目标是数组，检测被设置的索引是否小于数组长度 			//如果是，为SET操作，否则ADD操作 			 			const type=Array.isArray(target) 				?Number(key){ 			if(fn!==activeEffect){ 				effectsToRun.add(fn) 			} 		}) 	} 	/* 	*当直接设置了数组的length属性时，只需要对大于新length的元组进行操作即可 	*如果操作的是数组的length属性 	*那么取出大于新length的所有元素对应的副作用函数执行 	*/ 	if(Array.isArray(target) && key===＂length＂){ 		depsMap.forEach((effects,key)=>{ 			if(key>=newValue){ 				effects.forEach(fn=>{ 					if(fn!==activeEffect){ 						effectsToRun.add(fn) 					} 				}) 			} 		}) 	} 	 	//取得与INTERATE_KEY相关的副作用函数 	const interateEffects=depsMap.get(ITERATE_KEY) 	//避免自增导致无限循环 	//ECMA规范：再调用foreach遍历set集合时，如果一个值已经被访问过 	//但这个值被删除并重新添加到集合，如果遍历没有结束，那么这个值 	//又会重新被访问，解决办法是建立一个新的Set来遍历 	effects && effects.forEach(f=>{ 		if(f!=effectsToRun){ 			effectsToRun.add(f) 		} 	}) 	//将ITERATE_KEY相关联的副作用函数6添加到effectsToRun 	//删除属性会导致ITERATE_KEY减少，所以需要重新触发 	if(type===＂ADD＂ || type===＂DELETE＂ || 		//如果操作的是map，并且是set操作，也应当触发副作用函数执行 		//虽然set不改变键的数量，但是set需要设置值 		(type===＂SET＂ && 			Object.prototype.toString.call(target)===＂[object Map]＂ 		) 	){ 		interateEffects && interateEffects.forEach(effect=>{ 			if(effect!==activeEffect){ 				effectsToRun.add(effect) 			} 		}) 	} 	if((type===＂ADD＂ || type===＂DELETE＂) && 		Object.prototype.toString.call(target)===＂[object Map]＂ 	){ 		const iterateEffects=depsMap.get(MAP_ITERATE_KEY) 		iterateEffects && iterateEffects.forEach(effect=>{ 			if(effect!==activeEffect){ 				effectsToRun.add(effect) 			} 		}) 	} 	effectsToRun.forEach(fn=>{ 		//如果副作用函数存在调度函数，那么执行调度函数，否则执行原函数 		if(fn.options.scheduler){ 			fn.options.scheduler(fn) 		}else{ 			fn() 		} 	}) }  //通过修改第二个参数来实现只读深浅，此处浅只读 function readonly(obj){ 	return createReactive(obj,false,true) } //此处深只读 function shallowReadonly(obg){ 	return createReactive(obj,true,true) }    //当如下代码运行时，因为reactive是深响应，所以会返回false //这是重复创建了代理对象的问题 //并且使用了map之后，includes(obj)还是false //因为includes内部的this指向的是代理对象arr  /* //arr测试 const obj={} const arr=reactive([obj]) console.log(arr.includes(arr[0]))  //false console.log(arr.includes(obj))  //false */ /* //obj.size测试 const set=new Set([1,2,3]) const obj=reactive(set) effect(()=>{ 	document.getElementById(＂test＂).innerHTML=obj.size }) setTimeout(()=>obj.add(4),1000) */ //深响应 function reactive(obj){ 	//从map中查找之前创建的代理对象。 	const existionProxy=reactiveMap.get(obj) 	if(existionProxy) return existionProxy 	//创建新的代理对象 	const proxy=createReactive(obj) 	//将代理对象存储到Map中 	reactiveMap.set(obj,proxy) 	return proxy } //实现浅响应 function shallowReactive(obj){ 	return createReactive(obj,true) }  //options对象动态调度副作用函数的执行时机 function effect(fn,options={}){ 	const effectFn=()=>{ 		//例如effet(function effectFn(){document.body.inntext=obj.ok?obj.text:＂not＂}) 		//清除工作 		cleanup(effectFn) 		//存储被注册过的副作用函数 		activeEffect=effectFn 		//嵌套的副作用函数 		//在调用副作用函数前将其压入栈中，首先压入的内层副作用函数 		effectStack.push(effectFn) 		let res=fn() 		//调用完之后，将其弹出栈，弹出内层的副作用函数 		effectStack.pop() 		activeEffect=effectStack[effectStack.length-1] 		//返回fn的结果 		return res 	} 	//存储与该副作用相关的依赖集合 	effectFn.deps=[] 	//将options挂在到副作用函数 	effectFn.options=options 	if(!options.lazy) effectFn() 	return effectFn }  function cleanup(effectFn){ 	//遍历副作用函数的deps数组 	for(let i=0;i{console.log(obj.foo)}, 	scheduler(fn){ 		//执行调度时，将其添加到微任务队列 		jobQueue.add(fn) 		//刷新队列 		flushJob() 	} ) obj.foo++ obj.foo++ *最终输出 1 3 *微任务队列最终执行的只有一次，而此时obj.foo的值已经是3. */ function flushJob(){ 	//如果正在刷新任务队列，什么都不做，否则isFlushing=true 	if(isFlushing) return 	isFlushing=true 	//将任务添加到微任务队列 	p.then(()=>{ 		jobQueue.forEach(job=>job()) 	}).finally(()=>{isFlushing=false}) }  /* *计算属性与懒执行 */  function computed(getter){ 	let value 	//是否需要重新计算值，true代表需要计算 	let dirty=true 	//只有调用value的时候才会执行 	const effectFn=effect(getter,{ 		//不执行 		lazy:true, 		//当值发生变化时，在跳读器中重新设置diarty。 		scheduler(){ 			if(!dirty){ 				dirty=true 				//当计算属性依赖的响应数据发生变化时，手动调用函数触发响应 				trigger(obj, ＂value＂) 			} 		} 	}) 	const obj={ 		get value(){ 			if(dirty){ 				//执行副作用函数 				value=effectFn() 				//设置为false，下次访问时，直接使用原来的值 				dirty=false 			} 			//当读取value时，手动调用track函数进行追踪 			track(obj, ＂value＂) 			//返回值为fn的值 			return value 		} 	} 	return obj }  /* *wach的实现原理 *当数据发生变化时，执行回调 */ function watch(source,cb,options={}){ 	let getter 	//如果source是函数，则执行函数，否则调用traverse函数递归地读取属性 	if(typeof source===＂function＂){ 		getter=source 	}else{ 		getter=()=>traverse(source) 	} 	//旧值与新值 	let oldValue,newValue  	let cleanup 	function onInvalidate(fn){ 		cleanup=fn 	}  	//对scheduler函数的封装 	const job=()=>{ 		newValue=effectFn()  		if(cleanup){ 			cleanup() 		} 		//返回旧值，新值，已经回调给用户使用 		cb(newValue,oldValue,onInvalidate) 		//已经触发了回调函数，所以这里重新赋值 		oldValue=newValue 	} 	 	//出发操作，建立回调 	const effectFn=effect( 		//调用函数递归地读取数据 		()=>getter() 	,{ 		lazy:true, 		//调度函数 		scheduler:()=>{ 			//创建微任务队列，再DOM加载完成后再执行 			if(options.flush===＂post＂){ 				const p=Promise.resolve() 				p.then(job) 			}else{ 				job() 			} 		} 	}) 	if(options.immediate){ 		job() 	}else{ 		//调用副作用函数，拿到旧值 		oldValue=effectFn() 	} }  function traverse(value,seen=new Set()){ 	//如果数据是原始值或者已经被读取过了，则什么都不做 	if(typeof value!==＂object＂ || value===null || seen.has(value)) return 	seen.add(value) 	//堆对象内部地属性，递归地读取数据 	for(const k in value){ 		traverse(value[k],seen) 	} 	return value }  /* watch(()=>obj.foo,(newValue,oldValue)=>alert(oldValue+＂:＂+newValue)) setTimeout(()=>obj.foo++,1000)  const sum=computed(()=>{ 	document.getElementById(＂test＂).innerHTML=obj.tep })  //重新建立副作用函数 effect(function effectFn(){ 	sum.value }) */