《Vue.js设计与实现》——响应式系统的可调度性

《Vue.js设计与实现》------响应式系统的基本实现

《Vue.js设计与实现》------分支切换与 cleanup

《Vue.js设计与实现》------副作用函数实现可嵌套

最好预备了解的知识点

  • 浏览器事件循环

可调度性的必要性

可调度性指是我们可以控制副作用函数执行的时机、次数和方式,例如下面的例子:

javascript 复制代码
let obj = {
    num: 1
}
effect(() => {
    console.log(proxyObj.num);
})

proxyObj.num++
console.log('over');

目前的打印顺序是1、2、over ,如果我们想要在不变动代码书写的顺序下让over先输出该怎么实现呢?这个时候就需要实现副作用函数的可调度性。

具体实现控制执行时机

我们为effect设计一个选项参数options ,允许用户指定调度器,调度器实际上就是一个函数:

diff 复制代码
effect(() => {
    console.log(proxyObj.num);
},
+    // options
+    {
+        // 调度器 scheduler 是一个函数
+        scheduler(fn) {
+        }
    })
    
-function effect(fn) {
+ function effect(fn, options = {}) {
    // ...省略部分代码
    effectFn.deps = []
+    // 将 options 挂载到 effectFn 上
+    effectFn.options = options
    effectFn()
}

然后我们修改trigger函数,在具体执行副作用函数时,检查是否有调度器 在副作用函数上,如果有的话,把副作用函数交给调度器来决定要怎么执行。

diff 复制代码
function trigger(target, key, newVal, receiver) {
    // ...省略部分代码
-    effectsToRun.forEach(fn => fn())
+    effectsToRun.forEach(fn => {
+        if (fn.options.scheduler) {
+            fn.options.scheduler(fn)
+        } else {
+            fn()
+        }
+    })
}

在具体的调度器 函数实现中,我们用setTimeOut将副作用函数放到下一个任务队列 中执行,如此就能让over先输出了。

diff 复制代码
effect(() => {
        console.log(proxyObj.num);
    },
    // options
    {
        // 调度器 scheduler 是一个函数
        scheduler(fn) {
+          setTimeout(() => {
+              fn()
+          })
        }
    })

运行结果如下,这边如果不是很理解为什么setTimeout就能实现晚一步输出的话,可以查阅一下一些写浏览器事件循环的文章,如果会的话就是我僭越了(红豆泥鞠躬🙇‍♂️

利用调度器控制副作用函数的执行次数

javascript 复制代码
effect(() => {
    console.log(proxyObj.num);
})

proxyObj.num++
proxyObj.num++

在上面的例子中,修改了num值两次,会分别执行副作用函数,最终打印为1、2、3

但在我们的期望中,第一次修改只是num值的过渡状态,我们并不关心,我们只关心他最终变成了3,我们希望的打印结果为1、3

看到这应该很多人都很熟悉,在Vue中如果我们循环成千上万次更改变量的值,他也只会最后更新一次。

具体实现如下:

javascript 复制代码
// 定义一个任务队列
const jobQueue = new Set()
// 使用Promise.resolve() 创建一个Promise示例,用他将函数添加到微任务队列
const p = Promise.resolve()

// 标识是否正在刷新队列
let isFlushing = false
function flushJob() {
    // 如果队列正在刷新,则返回
    if (isFlushing) return
    // 设置为true,表示正在刷新
    isFlushing = true
    // 在微任务队列中依次执行jobQueue
    p.then(() => {
        jobQueue.forEach(job => job())
    }).finally(() => {
        // 执行完jobQueue任务队列后重置isFlushing
        isFlushing = false
    })
}

effect(() => {
    console.log(proxyObj.num);
}, {
    scheduler(fn) {
        // 将副作用函数放入jobQueue中
        jobQueue.add(fn)
        // 调用flushJob刷新队列
        flushJob()
    }
})

分析上述代码:

  1. jobQueue中的副作用函数的遍历执行被放在了pthen的回调函数中,也就是在被放在了微任务队列执行,所以会在更改了多次值的后面再执行副作用函数;
  2. 副作用函数被添加进了jobQueue变量中,因为这个变量使用Set定义的,可以去重 里面的元素,所以如果你重复修改同一个值,多次把同一个副作用函数添加进jobQueue中,最后在变量中也只有一个关联的副作用函数。

最后的执行结果:

小结

这一篇文章中我们初步认识了响应式系统的调度执行 ,下两篇文章中我们会尝试实现computedwatch,有什么写的不对的地方或者什么疑问可以留言,希望文章有帮助到你~

参考书籍

《Vue.js设计与实现》------------霍春阳

相关推荐
雪碧聊技术2 分钟前
01-Ajax入门与axios使用、URL知识
前端·javascript·ajax·url·axios库
adminIvan6 分钟前
Element plus使用menu时候如何在折叠时候隐藏掉组件自带的小箭头
前端·javascript·vue.js
会发光的猪。25 分钟前
【 ElementUI 组件Steps 步骤条使用新手详细教程】
前端·javascript·vue.js·elementui·前端框架
我家媳妇儿萌哒哒26 分钟前
el-table合并单元格之后,再进行隔行换色的且覆盖表格行鼠标移入的背景色的实现
前端·javascript·elementui
baiduguoyun41 分钟前
react的import 导入语句中的特殊符号
前端·react.js
前端青山42 分钟前
webpack指南
开发语言·前端·javascript·webpack·前端框架
NiNg_1_2341 小时前
ECharts实现数据可视化入门详解
前端·信息可视化·echarts
程序媛小果1 小时前
基于java+SpringBoot+Vue的桂林旅游景点导游平台设计与实现
java·vue.js·spring boot
励志前端小黑哥2 小时前
有了Miniconda,再也不用担心nodejs、python、go的版本问题了
前端·python
喵叔哟2 小时前
重构代码之取消临时字段
java·前端·重构