Vue3响应式原理傻瓜式教程（三）——ActiveEffect & Ref

DebraJohn

于 2022-04-10 18:47:08 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/DebraJohn/article/details/124095581

版权

本文是Vue3响应式原理系列教程的第三部分，重点讲解activeEffect的作用及其优化，以及如何使用ref函数创建响应式变量。通过实例分析，揭示了在Vue3中如何通过activeEffect跟踪副作用，并介绍了ref函数背后的访问器属性概念，帮助理解Vue3响应式系统的核心机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一节，我们学习到了Vue3如何通过Proxy来更新计算结果：Vue3响应式原理傻瓜式教程(二)——Proxy & Reflect - 简书 (jianshu.com)

activeEffect的作用

上一节的代码中存在一个问题：

每次获取属性值的时候，都要通过track来收集effect，但实际上我们只需要在effect内部调用track函数即可。

所以，在之前代码的基础上，我们引入activeEffect变量：

let product = reactive({ price: 5, quantity: 2 })
let total = 0
let salePrice = 0 // 添加一个salePrice变量，来检测get方法的调用情况

let activeEffect = null
function effect(eff) 
  activeEffect = eff
  activeEffect()
  activeEffect = null // 执行后就重置变量
}

effect(() => {
  total = product.price * product.quantity 
    // 输出：[Get] price => 5 
    // 输出：[Get] quantity =&g

最低0.47元/天解锁文章