理解 Vue.js 中的 effect 和 trigger：深入探究源代码系列之三

前端

2024-02-16 01:25:39

effect 和 trigger 在 Vue.js 中的作用

在 Vue.js 中，effect 和 trigger 是两个重要的函数，它们共同负责属性与 effect 之间的映射关系，以及属性变化时对 effect 的执行。

effect

effect 函数主要用于建立属性和 effect 之间的映射关系。当一个属性被访问时，effect 函数会将该属性与当前正在执行的 effect 函数关联起来。这样，当属性发生变化时，effect 函数就会被触发执行。

trigger

trigger 函数用于找到属性对应的 effect，并挨个执行这些 effect。当一个属性发生变化时，trigger 函数就会被调用，它会找到与该属性相关的所有 effect 函数，并挨个执行这些 effect 函数。

全局变量 activeEffect 和 targetMap 的辅助作用

在 effect 和 trigger 这两个函数中，全局变量 activeEffect 和 targetMap 起到了辅助作用。

activeEffect

activeEffect 是一个全局变量，它指向当前正在执行的 effect 函数。当一个 effect 函数被调用时，activeEffect 会被设置为该 effect 函数。这样，当一个属性发生变化时，trigger 函数就可以通过 activeEffect 找到与该属性相关的所有 effect 函数。

targetMap

targetMap 是一个全局变量，它是一个对象，其中存储了属性和 effect 之间的映射关系。当一个属性被访问时，effect 函数会将该属性与当前正在执行的 effect 函数关联起来，并将该属性和 effect 函数的映射关系存储在 targetMap 中。这样，当一个属性发生变化时，trigger 函数就可以通过 targetMap 找到与该属性相关的所有 effect 函数。

总结

effect 和 trigger 这两个函数在 Vue.js 中扮演着重要的角色，它们共同负责属性与 effect 之间的映射关系，以及属性变化时对 effect 的执行。全局变量 activeEffect 和 targetMap 在这两个方法中起到了辅助作用，它们帮助 effect 和 trigger 函数找到属性对应的 effect 并执行它们。