vue3响应式模拟实现(reactive/effect/track/trigger)

reactive.js实现

// 是否object
const isObject = obj => typeof obj === 'object' && obj !== null

// 使用es6的Proxy模拟vue3响应式
function reactive(obj){
  if(!isObject(obj)) return obj

  return new Proxy(obj,{
    get(target,key,receiver){
      const res = Reflect.get(target,key,receiver)
      console.log('get',res)
      
      // 依赖收集
      track(target,key)
      // 递归
      return isObject(res)?reactive(res):res
    },
    set(target,key,value,receiver){
      const res = Reflect.set(target,key,value,receiver)
      console.log('set',key)
      // 触发副作用
      trigger(target,key)
      return res
    },
    deleteProperty(target,key){
      const res = Reflect.deleteProperty(target,key)
      // 触发副作用
      trigger(target,key)
      console.log('deleteProperty',key)
      return res
    }
  })
}

//临时存储副作用函数
const effectStack = []

// 副作用函数：建立传入fn和其内部的依赖之间映射关系
function effect(fn){
  //  执行依赖的get的方法
  const e = createReactiveEffect(fn)

  // 立即执行
  e()
  return e
}

function createReactiveEffect(fn){
  //处理错误 保存到stack
  const effect = function(...args){
    try {
      // 入栈
      effectStack.push(effect)
      //执行
      return fn(...args)
    } finally{
      // 出栈
      effectStack.pop()
    }
  }

  return effect
}

// 依赖管家
const targetMap = new WeakMap()

// 依赖收集
function track(target,key){
  //获取副作用函数
  const effect = effectStack[effectStack.length-1]
  if(effect){
    // 初始化
    let depMap = targetMap.get(target)
    if(!depMap){
      depMap = new Map()
      targetMap.set(target,depMap)
    }

    // 从depMap中获取副作用函数集合
    let deps = depMap.get(key)
    // 初始化的deps不存在
    if(!deps){
      deps = new Set()
      depMap.set(key,deps)
    }

    // 放入新传入的副作用
    // 使用Set可以去重
    deps.add(effect)
  }
}

// 出触发副作用
function trigger(target,key){
  // 获取 target对应的set
  const depMap = targetMap.get(target)
  
  if(!depMap){
    return
  }

  const deps = depMap.get(key)
  if(deps){
    //循环执行内部所有副作用函数
    deps.forEach(dep => dep())
  }
}

/*
// 测试effect
const state = reactive({foo:'哈哈哈',nb:{a:'你好'},arr:[112]})
effect(()=>{
  console.log('effect',state.foo,state.nb.a)
})

state.foo = '测试1'
*/


//响应式reactive测试
/**
 *
const state = reactive({foo:'哈哈哈',nb:{a:'你好'},arr:[112]})
state.foo
state.foo = '呵呵'
state.hi = 'jja'
delete state.hi

state.arr.push(33,888)
state.arr
state.arr.pop()
state.arr

state.nb.a
state.nb.a = '是他'
state.nb.a

state.nb = {b:'换一个他'}
state.nb.b
 */

html测试视图更新

<div id="app"></div>

<script src="./reactive.js"></script>
<script>
    const state = reactive({
      name:'无敌',
      age:10
    })

    effect(()=>{
       app.innerHTML = `我叫${state.name},今年${state.age}了`
    })

    setTimeout(()=>{
      state.name = '改名无双'
    },3000)
    
</script>

最后

以上就是可爱棒球为你收集整理的vue3响应式模拟实现(reactive/effect/track/trigger)的全部内容，希望文章能够帮你解决vue3响应式模拟实现(reactive/effect/track/trigger)所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。