dep监听更新
本文最后更新于 173 天前,如有失效请评论区留言。

监听更新

本质

let a = 3
let b = a * 10
a = 4
console.log(b)

定义一个a、b,想让b永远跟随a的改变而改变,输出40,所以就需要监听a的变化,每当a变化的时候,就取出b的表达式重新执行一遍,这样就能保证a改变了b也改变

简单实现

<!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>
</body>
<script>
  let activeEffect

  class Dep {
    constructor(value) {
      this.subscribers = new Set()
      this._value = value
    }
    get value () {
      this.depend()
      return this._value
    }
    set value (newValue) {
      this._value = newValue
      this.notify()
    }
    depend () {
      if (activeEffect) {
        this.subscribers.add(activeEffect)
      }
    }
    notify (effect) {
      this.subscribers.forEach(effect => {
        effect()
      })
    }
  }
  function watchEffect (effect) {
    activeEffect = effect
    effect()
    activeEffect = null
  }

  const a = new Dep('3')
    let b = 0
  watchEffect(() => {
    b = a.value * 10
    console.log(b);
  })

  a.value = '4'
</script>

</html>

这里定义了一个Dep类去监听a的变化,然后通过watchEffect去更新b的值,这样每次更改a后b的值也能随之更改

具体就是通过get方法监听 a.value 获取值的时候把 watchEffect传入的函数保存到Dep类的subscribers的set无序集合中(当然也可以是数组,set只是个小优化虽然一般情况下可能用不上,只有两个相同的函数传入watchEffect时才会优化),然后再通过set监听a.value的赋值改动,变化值后及时调用watchEffect中传入的数组,达到更新的目的

版权声明:本文为BIMiracle原创,依据CC BY-SA 4.0许可证进行授权,转载请附上出处链接及本声明。
暂无评论

发送评论 编辑评论


|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇