🗒️vue3源码学习-6-调度器
2022-6-12
| 2024-3-22
0  |  阅读时长 0 分钟
date
icon
password
description
permalink
categories
type
status
slug
summary
tags
category
updated
Mar 22, 2024 09:10 AM

前言

经过第5章对于分支切换的操作之后,vue的effect源码就具有了收集需要的依赖,对于改变不必要的数据,不会触发依赖的更新。那么今天就要实现vue3的调度器代码,之前effect只能同步运行代码,无法对于异步操作进行数据更新。 官方的写法是什么样子呢?
上面的代码最后只会渲染stage.age=5000这个样子。并且还具有了可以手动停止依赖的触发的操作stop()

编写stop()函数

首先,先完成能手动停止依赖的和触发。那么我就要有一个stop函数来完成关闭操作,之前通过run里面的函数渲染,使得属性触发了get操作。通过get函数里面编写的track函数,完成了依赖收集。然后通过trigger里面的依赖记录重新触发函数。在第5篇文章中,完成了依赖每次先清空再收集的函数,那么stop不就可以直接通过调用清空依赖,来达到停止触发的操作。同时把active设置为false,来关闭函数的更新。所以stop函数如下编写了。
同样的effect函数也要做相应的修改,抛出当前的runner对象,然后通过这个对象上的stop来操作停止命令。
这样就可以在拿到effect到返回函数之后,通过runner.effect.stop()来手动停止执行。

schedule调度函数实现

当用户在effect中的schedule中写了一个自己的一个操作,那么就能通过用户是否写了schedule函数来判断是否要执行用户的schedule,还是执行run()。 了解了大致思路,我们先修改effect函数,增加一个对象,通过对象来传递用户编写的函数
同时ReactiveEffect类上在构造函数上加入schedule参数。
下一步就是修改trigger函数,这样变量的属性改变的时候就知道是不是执行schedule函数了
到此为止,就能在测试html上调用自己写的schedule函数了,如开篇中的例子
 
  • TypeScript
  • Vue
  • 原生JS编写虚拟滚动vue3源码学习-5-分支切换
    • Waline
    目录