/*
*原理:当触发数据读取操作时,执行副作用函数并存储到桶中
*当设置数据操作时,再将副作用函数从桶中取出并执行
*/
//用一个全局变量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),
VUE3所有类型对象的完整响应方案
最新推荐文章于 2024-06-17 20:38:01 发布