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

前言

上篇回顾,核心代码逻辑是通过reactive中的Proxy()来代理一个对象,然后通过get收集依赖,主要操作放在来effect中。那么当我们回顾上一篇的问题。当用户有一个这样当操作
第一次,执行来用户的渲染操作,然后在之后的操作中修改来flag。这个时候,依赖收集的应该是flag和name,如果采用上篇中的代码,那么实际上,旧的name依赖未被清除,还是会留在deps中,那么你修改name的时候会触发渲染。

effect 分支删除

上面的问题已经很清晰来,那么如果解决呢。可以在用户函数执行之前,把旧的依赖全部清空,再收集一次这个依赖不就行了。这样第一次收集了flag,name依赖。第二次flag变成flase,清空依赖,收集flag和age以来,这样第三次修改name值的时候就不会触发渲染了。 前一篇中定义的deps也派上了用场,由于之前做了双向收集,那么在执行用户操作之前,清空依赖就行了。 定义一个clearupEffect()函数。
放入到 this.fn()被执行之前,来清除依赖。但是这里会有个新问题,看代码。
notion image
这里执行了清空,下面执行了this.fn()又会触发渲染,然后由于使用的是Set()来存储关系的, Set()一边清空一边添加依赖,导致了死循环,会一直触发渲染。为此依赖触发的方法要进行修改,我们拷贝一份Set(),然后在他的基础上删除清空,这样就不会造成死循环了。

完整的effect代码

  • Vue
  • TypeScript
  • vue3源码学习-6-调度器vue3源码学习-4-effect编写以及依赖收集
    • Waline
    目录