master

分支 (2)

管理

管理

master

xiao

vue_code
/
4_5effecttoeffect.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
<div style="font-size: 14px; position:absolute;bottom:20px; left:10px;">
  源代码地址：https://gitee.com/xiao_yan_bin/vue_code<br/>
  github: https://github.com/xiaoyanbin/vue_code<br/>
  vue设计与实现，持续更新，建议点赞收藏，有问题可以在评论区留言
</div>
</body>
<script>

effect(function effectFn1(){
  console.log('effectFn1')
  effect(function effectFn2(){
    console.log('effectFn2')
    effect(function effectFn3(){
      console.log('effectFn3')
    })
  })
})

let activeEffect
const effectStack = []
function effect(fn){
  const effectFn = () => {
    cleanup(effectFn)
    activeEffect = effectFn
    effectStack.push(effectFn)
    fn()
    effectStack.pop()
    activeEffect = effectStack[effectStack.length - 1]
  }
  effectFn.deps = []
  // 执行副作用函数
  effectFn()
}

// 避免无限循环

function trigger(target,key){
  const depsMap = targetMap.get(target)
  if(!depsMap) return
  const dep = depsMap.get(key)

  const effectsToRun = new Set()
  effects && effects.forEach(effect => {
    // 如果不是当前激活的副作用函数，就添加到effectsToRun中
    if(effect !== activeEffect){
      effectsToRun.add(effect)
    }
  })
  effectsToRun.forEach(effect => {
    effect()
  })


}


</script>
</html>