晌应式系统的作用与实现(下)

122 阅读3分钟
晌应式系统中的调度执行

调度执行,在VUE的晌应式系统中我们可以设置effect 的回调,这个回调能够拦载VUE自身的回调是否执行,也就是说我们可以通过这个回调改造VUE的所有功能,但是前提是我们得找到VUE解析模版的effect 函数,通常我们只需要用调度执行来控制我们的effect 副作用函数,使其在DOM更变之前做我们的逻辑操作就可以了

// 调度执行示例 
effect(() => {
    
}, {
    // 此处 fn 即数据变化时的副作用函数
    scheduler: (fn) => {
        // VUE 的用法是将 fn 在微任务中即 Promise 中执行在主线程中收集fn
    }
})

参考URL

计算属性computed与lazy
  • 在实现计算性时VUE也是通过effect 中的调度器来执行的
  • computed 函数会对effect做一个封装,其有会在effect中传入选项参数中的属性 lazy
  • 在effect函数中判断是否有属性 lazy
  • 如果有属性lazy 并且为true
  • 则不允许自动回调,而是返回注册的副作用函数本身
  • 在副作用函数本身也返回函数执行结果这样我们就可以拿到计算属性的值了
  • 然后通过在 computed 中建立一个对象这个对象只有一个属性 get value
  • 当触发对象获取时会直接触发这个函数的执执行而直接获取到的值则是 get value 逻辑里的 effectFn 的返回值
  • 但这样也存在一个问题,就是每次get都会执行计算,这样就造成了不必要的性能浪费
  • 为了解决这个问题增加了两个变量,其中一个用来存储上次的执行结果一个用来判断是否需要执行effectFn函数
  • 在 computed 中 其中的调度与做判断当变量值为true时不执行并且将变量值设置为true,调度器,在get value 中判断变量为false时不执行,并且将变量值设置为false 这样就实现了当计属性未改变时不执行调度器,
// 调度执行示例 此时这里会返回作用函数在获取时会执行副作用函数
const computed = effect(() => {
    
}, {
    lazy: true,
})

参考URL

watch 监听实现原理
  • 监听在基本实现与computed 一样
  • 在watch 内部会传入的参数是对象或都数组或都对象属性
  • 则通过 一个Set 添加这个属性
  • 再通过effect 监听,如果是函数则直接获取函数返回值再通过effect 监听
  • 并在调度器中执行回调,还可以通过选项参数,flush "pre":"post"
  • 还可以通过一个参数immediate 判断是否立即执行
  • 监听的回调方法中有第三个参数这个参数是一个方法他会在当前副作用函数过期时执行
  • 通过这个操作我们可以在晌应的发送post请求并不用担心出现问题

参考URL