Vue3 响应式原理

何为响应? 当我依赖你的时候, 你变我也变
当数据发生变化, 如果页面的某个地方使用到了这个数据, 那么该页面的内容也会跟着发生变化

在 vue3 中 参考 Vue3 源码流程图

// 该函数的目的就是		更新页面
const componentUpdateFn = () => {
   
	// ...
}

该函数的目的就是更新页面

也就是说, 当数据发生变化的时候, 就会运行 componentUpdateFn 这个函数

如何做到? 源码如下

const effect = new ReactiveEffect(
  componentUpdateFn,
  () => queueJob(instance.update),
  instance.scope // track it in component's effect scope
)

将更改页面的函数, 也就是 componentUpdateFn, 放入到 ReactiveEffect 中

// 全局 effect 栈
const effectStack: ReactiveEffect[] = []
// 当前激活的 effect
let activeEffect: ReactiveEffect | undefined

class ReactiveEffect<T = any> {
   
  active = true
  deps: Dep[] = []
  
  constructor(
    public fn: () => T,
    public scheduler: EffectScheduler | null = null,
    scope?: EffectScope | null
  ) {
   
    recordEffectScope(this, scope)
  }

  run()