看作者讲这个知识点0F3F7FB7.png

https://www.bilibili.com/video/BV1rC4y187Vw?p=8

手动收集、手动触发

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>deps依赖收集</title>
  8. </head>
  9. <body>
  10.     <script>
  11.         let activeEffect
  12.         class Dep {
  13.             subsctibers = new Set()
  15.             depend() {
  16.                 if (activeEffect) {
  17.                     this.subsctibers.add(activeEffect);
  18.                 }
  19.             }
  21.             notify() {
  22.                 this.subsctibers.forEach(effect => {
  23.                     effect()
  24.                 })
  25.             }
  26.         }
  29.         function watchEffect(effect) {
  30.             activeEffect = effect
  31.             effect()
  32.             activeEffect = null
  33.         }
  35.         const dep = new Dep()
  37.         watchEffect(() => {
  38.             dep.depend()
  39.             console.log("effect run")
  40.         }) // 这里会运行
  42.         dep.notify() // 这里也会运行
  43.     </script>
  44. </body>
  45. </html>

控制台打印

image.png

手动收集、手动触发、保存值

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>deps依赖收集</title>
  8. </head>
  9. <body>
  10.     <script>
  11.         let activeEffect
  12.         // 此时不仅仅跟踪它的订阅者，而且保存一个值
  13.         class Dep {
  14.             subsctibers = new Set()
  16.             constructor(value) {
  17.                 this.value = value
  18.             }
  20.             depend() {
  21.                 if (activeEffect) {
  22.                     this.subsctibers.add(activeEffect);
  23.                 }
  24.             }
  26.             notify() {
  27.                 this.subsctibers.forEach(effect => {
  28.                     effect()
  29.                 })
  30.             }
  31.         }
  34.         function watchEffect(effect) {
  35.             activeEffect = effect
  36.             effect()
  37.             activeEffect = null
  38.         }
  40.         const dep = new Dep("hello")
  42.         watchEffect(() => {
  43.             dep.depend()
  44.             console.log(dep.value)
  45.         }) // 这里会运行
  47.         dep.value = "changed"
  48.         dep.notify() // 这里也会运行
  49.     </script>
  50. </body>
  51. </html>

控制台打印

image.png

自动收集、自动触发

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>deps依赖收集</title>
  8. </head>
  9. <body>
  10.     <script>
  11.         let activeEffect
  12.         // 此时不仅仅跟踪它的订阅者，而且保存一个值
  13.         class Dep {
  14.             subsctibers = new Set()
  16.             constructor(value) {
  17.                 this._value = value
  18.             }
  20.             set value(value) {
  21.                 this._value = value;
  22.                 // 当我们改变value时，会隐式调用notify
  23.                 this.notify() // 这里也会运行
  24.             }
  26.             get value() {
  27.                 // 当我们访问value，则会隐式调用depend
  28.                 this.depend()
  29.                 return this._value
  30.             }
  32.             depend() {
  33.                 if (activeEffect) {
  34.                     this.subsctibers.add(activeEffect);
  35.                 }
  36.             }
  38.             notify() {
  39.                 this.subsctibers.forEach(effect => {
  40.                     effect()
  41.                 })
  42.             }
  43.         }
  46.         function watchEffect(effect) {
  47.             activeEffect = effect
  48.             effect()
  49.             activeEffect = null
  50.         }
  52.         const dep = new Dep("hello")
  54.         watchEffect(() => {
  55.             console.log(dep.value)
  56.         }) // 这里会运行
  58.         dep.value = "changed"
  59.     </script>
  60. </body>
  61. </html>

控制台打印

image.png

自动收集、自动触发、触发前清除依赖

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>deps依赖收集</title>
  8. </head>
  9. <body>
  10.     <script src="./deps-value-autto-many.js"></script>
  11. </body>
  12. </html>
  1. let activeEffect
  3. let effectStack = []
  4. // 此时不仅仅跟踪它的订阅者，而且保存一个值
  5. class Dep {
  6.     subsctibers = []
  8.     constructor(value) {
  9.         this._value = value
  10.     }
  12.     set value(value) {
  13.         this._value = value;
  14.         // 当我们改变value时，会隐式调用notify
  15.         this.notify() // 这里也会运行
  16.     }
  18.     get value() {
  19.         // 当我们访问value，则会隐式调用depend
  20.         this.depend()
  21.         return this._value
  22.     }
  24.     depend() {
  25.         if (activeEffect) {
  26.             this.subsctibers.push(activeEffect);
  27.             this.subsctibers = Array.from(new Set(this.subsctibers))
  28.             activeEffect.deps = this.subsctibers
  29.         }
  30.     }
  32.     notify() {
  33.         debugger;
  34.         this.subsctibers.forEach(effect => {
  35.             effect()
  36.         })
  37.     }
  38. }
  40. function watchEffect(fn) {
  41.     const effect = createReactiveEffect(fn)
  42.     return effect()
  43. }
  45. function createReactiveEffect(fn) {
  46.     debugger;
  47.     const effect = function reactiveEffect() {
  48.         // 这里清除依赖
  49.         cleanup(effect)
  50.         activeEffect = effect
  51.         fn()
  52.         activeEffect = null
  53.     }
  54.     effect.deps = []
  55.     return effect
  56. }
  58. function cleanup(effect) {
  59.     const {
  60.         deps
  61.     } = effect
  62.     if (deps.length) {
  63.         deps.length = 0
  64.     }
  65. }
  67. const msg = new Dep("hello")
  68. const ok = new Dep(true)
  70. watchEffect(() => {
  71.     if (ok.value) {
  72.         console.log(msg.value)
  73.     } else {
  74.         console.log("false branch")
  75.     }
  76. }) // 这里会运行
  78. // msg.value = "changed"
  81. msg.value = "changed"
  82. console.log('-------------------')
  83. ok.value = false
  84. console.log('-------------------')
  85. msg.value = 'foo'
  86. console.log('-------------------')
  87. ok.value = true
  88. console.log('-------------------')
  89. msg.value = 'hello'
  90. console.log('-------------------')

控制台打印

image.png

其他

其中还有依赖嵌套问题，如何解决请看这篇文章
Vue3.0核心源码解读 | 响应式：响应式内部的实现原理是怎样的？（下）
这部分
image.png