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

从ActiveEffect到Ref——理解Vue3响应式原理的基石

在上一篇文章中，我们介绍了Vue3响应式系统中追踪器（Tracker）的基本原理和工作机制。而ActiveEffect和Ref则是Vue3响应式系统中另外两个关键的概念，它们与追踪器共同构成了Vue3响应式系统的核心。

ActiveEffect：追踪效应的利刃

ActiveEffect是一个特殊的Effect对象，它代表了当前正在执行的Effect，它负责收集与之相关的依赖项（Dependencie）。在Vue3中，每次获取属性值的时候，都会通过track来收集Effect，但实际上我们只需要在Effect内部调用track函数即可。

const activeEffect = effect(() => {
  console.log('active effect')
})

track(activeEffect)

这样，当属性值发生变化时，只需要通知activeEffect即可，不需要遍历所有的Effect。

Ref：引用值的对象包装器

Ref是一个对象包装器，它允许我们以响应式的方式来使用原始值。在Vue3中，可以使用ref()函数来创建一个Ref对象。

const count = ref(0)

// 访问值
console.log(count.value) // 0

// 修改值
count.value++

// 响应式更新
console.log(count.value) // 1

携手共进：ActiveEffect与Ref的协作

ActiveEffect和Ref在Vue3响应式系统中携手共进，共同实现了响应式数据的追踪和更新。

当我们使用ref()函数创建一个Ref对象时，实际上是创建了一个ActiveEffect对象，并将它与Ref对象相关联。当Ref对象的值发生变化时，ActiveEffect对象就会被触发，并执行相应的更新操作。

总结：ActiveEffect与Ref在Vue3中的作用

ActiveEffect和Ref是Vue3响应式系统中的两个关键概念，它们协同工作，实现响应式数据追踪和更新，从而为Vue3组件提供数据驱动的渲染能力。

ActiveEffect负责收集依赖项，而Ref则允许我们以响应式的方式来使用原始值。当Ref对象的值发生变化时，ActiveEffect对象就会被触发，并执行相应的更新操作。

理解了ActiveEffect和Ref的工作原理，你就能更深入地理解Vue3响应式系统，并编写出更加高效和健壮的Vue3应用程序。