/*
*原理：当触发数据读取操作时，执行副作用函数并存储到桶中
*当设置数据操作时，再将副作用函数从桶中取出并执行
*/
//用一个全局变量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()
/*
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)
//封装代理对象
//isShallow浅响应，isReadonly，浅只读
function createReactive(obj,isShallow=false,isReadonly=false){
return new Proxy(obj,{
//对原始数据的代理
//拦截读取操作
get(target,key,receiver){
//代理对象可以通过raw属性访问原始数据
if(key==='raw'){
return target
}
/*
*因为数组的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)<target.length?'SET':'ADD'
:Object.prototype.hasOwnProperty.call(target,key) ? 'SET':'ADD'
//设置属性值
target[key]=newvalue
//设置属性值
const res=Reflect.set(target,key,newvalue,receiver)
//只有旧值与新值不同才会触发更新
//因为NaN===NaN为false,而NaN!==NaN为true
//判断target是否是recever的代理对象
if(target===receiver.raw){
if(oldval!==newvalue && (oldval===oldval || newvalue===newvalue)){
trigger(target,key,type,newvalue)
}
}
return res
},
//使用内部方法拦截删除对象属性操作
deleteProperty(target,key){
//数据是只读的，则打印错误并返回
if(isReadonly){
console.warn(`属性${key}是只读的`)
return true
}
//检查属性是否存在对象身上
const hadkey=Object.prototype.hasOwnProperty.call(target,key)
//使用Reflect.deleteProperty(target,key)完成属性删除
const res=Reflect.deleteProperty(target,key)
if(res && hadkey){
//只有熟悉存在并且成功删除时才出发更新
trigger(target,key,'DELETE')
}
return res
}
})
}
function track(target,key){
//console.dir(target)
if(!activeEffect) return target[key]
let depsMap=bucket.get(target)
if(!depsMap){
bucket.set(target,(depsMap=new Map()))
}
let deps=depsMap.get(key)
if(!deps){
depsMap.set(key,(deps=new Set()))
}
deps.add(activeEffect)
activeEffect.deps.push(deps)
}
//通过type来区分操作类型，避免性能开销
function trigger(target,key,type,newValue){
const depsMap=bucket.get(target)
if(!depsMap) return
const effects=depsMap.get(key)
const effectsToRun=new Set(effects)
/*
*当操作为ADD并且是数组时
*取出与length相关联的副作用函数
*将副作用函数添加到待执行集合中
*/
if(type==='ADD' && Array.isArray(target)){
const lengthEffects=depsMap.get('length')
lengthEffects && lengthEffects.forEach(fn=>{
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'){
interateEffects && interateEffects.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)
}
//深响应
function reactive(obj){
return createReactive(obj)
}
//实现浅响应
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<effectFn.length;++i){
const deps=effectFn.deps[i]
//从依赖集合删除
deps.delete(effectFn)
}
effectFn.deps.length=0
}
//微任务队列
//何时执行？在options的调度函数中执行，例如
/*
effect(()=>{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
})
*/
VUE3响应式设计原理（对象和数组响应方案） 
