vue3源码(3)——computed

Vue3中的computed底层源码主要是通过使用Proxy对象来实现的。下面是对Vue3中computed底层源码的详细解读:

  1. 在Vue3中,computed的实现是通过使用createComputed函数来创建的。createComputed函数接收两个参数:getter和setter。

  2. 在createComputed函数中,首先会创建一个响应式的Ref对象,用于存储computed的值。

  3. 接着,会创建一个ReactiveEffect对象,用于存储computed的getter函数。ReactiveEffect对象中包含了一个deps数组,用于存储computed所依赖的响应式数据。

  4. 在ReactiveEffect对象中,会调用getter函数,并在getter函数中使用track函数来收集computed所依赖的响应式数据。

  5. 在getter函数中,会调用runInEffect函数来执行getter函数,并在执行过程中使用track函数来收集computed所依赖的响应式数据。

  6. 在runInEffect函数中,会调用getter函数,并在执行过程中使用track函数来收集computed所依赖的响应式数据。

  7. 在getter函数执行完毕后,会调用cleanup函数来清除deps数组中的无效依赖。

  8. 在createComputed函数中,会返回一个Proxy对象,用于代理computed的访问。Proxy对象中的get函数会调用ReactiveEffect对象中的run函数来执行getter函数,并在执行过程中使用track函数来收集computed所依赖的响应式数据。

  9. 在Proxy对象中的set函数中,会调用ReactiveEffect对象中的invalidate函数来标记computed的值为无效,并在执行过程中使用trigger函数来触发computed所依赖的响应式数据的更新。

总的来说,Vue3中的computed底层源码主要是通过使用Proxy对象、Ref对象、ReactiveEffect对象、track函数、trigger函数等来实现的。这些对象和函数的组合,使得computed能够实现响应式的计算,并在计算过程中自动收集和更新依赖的响应式数据。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值