VUE 3.0源码之effect

最新推荐文章于 2025-08-04 17:36:02 发布

原创

最新推荐文章于 2025-08-04 17:36:02 发布 · 555 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文详细探讨Vue 3.0中的effect功能，包括effect的创建、createReactiveEffect的运作机制以及track如何收集依赖。通过这些核心概念，深入解析Vue响应式系统的内部工作原理。

effect方法主要用于处理函数的响应式，可用于计算属性和watchEffect等功能，通过触发函数中响应式变量的proxy的get方法实现将自身加入到proxy的deps中，实现与proxy关联，也可以将其他依赖收集到自己的deps中

1. effect

创建一个effect函数，如果不是lazy创建时会先调用一遍，这样可以调用相关get并将effect加入相关proxy的deps中

function effect<T = any>(
  fn: () => T,
  options: ReactiveEffectOptions = EMPTY_OBJ
): ReactiveEffect<T> {
   
   
  if (isEffect(fn)) {
   
    // 如果已经是effect则将原函数取出来
    fn = fn.raw
  }
  const effect = createReactiveEffect(fn, options)
  if (!options.lazy) {
   
    // 如果不是lazy则先调用一遍effect，这个时候可以触发相关proxy的get
    effect()
  }
  return effect
}