响应式原理二：响应式依赖收集

一、响应式依赖收集

1. 依赖收集机制：
   • 1.1. 存储结构：使用数组reactiveFns存储所有依赖函数
   • 1.2. 注册函数：通过watchFn函数将依赖函数注册到数组中
   • 1.3. 自动执行：注册时会立即执行一次函数，确保初始状态正确
   • 示例代码如下：

     // 设置一个专门执行响应式函数的一个函数
     const reactiveFns = []
     function watchFn (fn) {
       // 把所有依赖的东西，统一收集到一个数组中(reactiveFns), 方便进行管理
       reactiveFns.push(fn)
       // 传入函数后立即执行一次，类似watchEffect()
       fn()
     }   
     

2. 应用示例：
   • 2.1. 当对象属性obj.name或obj.age变化时
   • 2.2. 自动执行所有依赖这些属性的函数（如foo()和bar()）
   • 2.3.通过遍历reactiveFns数组统一执行所有依赖函数

   •    	const obj = {
       	  name: 'why',
       	  age: 18
       	}
       	// 设置一个专门执行响应式函数的一个函数
       	const reactiveFns = []
       	function watchFn (fn) {
       	  // 把所有依赖的东西，统一收集到一个数组中(reactiveFns), 方便进行管理
       	  reactiveFns.push(fn)
       	  // 传入函数后立即执行一次，类似watchEffect()
       	  fn()
       	}
       	
       	watchFn(function foo () {
       	  console.log('foo: ', obj.name);
       	  console.log('foo: ', obj.age);
       	  console.log('foo function');
       	})
       
       watchFn(function bar () {
         console.log('bar: ', obj.name + ' hello');
         console.log('bar: ', obj.age + 10);
         console.log('bar function');
       	})
       	
       // 修改obj的属性
       console.log('name发生变化时----------------------------------------');
       obj.name = 'kobe'
     
       // 当依赖发生变化时，会执行对应的响应式函数
       reactiveFns.forEach(fn => {
         fn()
       }) 
     

3. 执行流程：
   • 3.1. 属性修改触发更新
   • 3.2. 从依赖数组中取出所有相关函数
   • 3.3.依次执行每个依赖函数
4. 设计特点：
   • 4.1. 手动收集：目前需要显式调用watchFn注册依赖函数
   • 4.2. 统一管理：所有依赖函数集中存储在数组中便于统一触发
   • 4.3. 自动执行：注册时立即执行确保初始状态，变化时再次执行更新状态
5. watchFn与Vue的关系：
   • 5.1. 类似Vue3的watchEffect机制
   • 5.2. 区别在于当前实现是手动收集依赖
   • 5.3. 后续会优化为自动依赖收集

• 6. 完整代码如下：

  const obj = {
    name: 'why',
    age: 18
  }
  
  
  // function foo () {
  //   console.log('foo: ', obj.name);
  //   console.log('foo: ', obj.age);
  //   console.log('foo function');
  // }
  
  
  // function bar () {
  //   console.log('bar: ', obj.name + ' hello');
  //   console.log('bar: ', obj.age + 10);
  //   console.log('bar function');
  // }
  
  // 当上面有很多依赖函数时，很难收集
  // 设置一个专门执行响应式函数的一个函数
  const reactiveFns = []
  function watchFn (fn) {
    // 把所有依赖的东西，统一收集到一个数组中(reactiveFns), 方便进行管理
    reactiveFns.push(fn)
    // 传入函数后立即执行一次，类似watchEffect()
    fn()
  }
  
  watchFn(function foo () {
    console.log('foo: ', obj.name);
    console.log('foo: ', obj.age);
    console.log('foo function');
  })
  
  watchFn(function bar () {
    console.log('bar: ', obj.name + ' hello');
    console.log('bar: ', obj.age + 10);
    console.log('bar function');
  })
  
  watchFn(() => {
    // 传入空函数时，最终是不会加入响应里面
  })
  
  // 修改obj的属性
  console.log('name发生变化时----------------------------------------');
  obj.name = 'kobe'
  // foo()
  // bar()
    // 当依赖发生变化时，会执行对应的响应式函数
    reactiveFns.forEach(fn => {
      fn()
    })
  

小结