vue3的computed源码解析

computed内部实现原理

一句话总结: computed是一个函数,该函数返回"一个通过ComputedRefImpl类实例化的对象"。
详情介绍: computed函数接收“一个有返回值的函数fn”,computed函数内部再将fn传递给ComputedRefImpl类进行实例化,ComputedRefImpl类内主要做了两件重要的事情,一是初始化构造函数,二是有getter方法触发依赖收集。

  • 在初始化构造函数时,使用ReactiveEffect类进行实例化
    ReactiveEffect类接收两个参数,第一个参数是fn,第二参数是一个匿名函数,该匿名函数中调用triggerRefValue方法用于触发依赖。ReactiveEffect类实例化后的值保存再公共变量effect中。那triggerRefValue方法是怎么触发依赖的呢?当computed里的响应式数据被设置时,触发响应式数据的set方法track,track又调用了triggerEffects方法,triggerEffects方法里变量所有的dep,当dep里有computed属性时调用triggerEffect,后triggerEffect函数内先判断有没有scheduler方法,有就直接调用scheduler方法,scheduler方法里有triggerRefValue方法来触发computed的所有依赖。
  • getter方法
    在getter函数中先调用trackRefValue方法收集依赖,后返回_value值。那trackRefValue方法是怎么收集依赖的呢?getter方法调用trackRefValue方法时,把this也就是ComputedRefImpl类的实例化对象传递过去,该实例化对象中有一个dep公共变量用于收集依赖,trackRefValue方法内在调用trackEffects方法并把dep传递过来,在dep里add(activeEffect)把依赖收集起来。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值