Vue3 reactivity 响应式源码学习笔记

暂时无法在飞书文档外展示此内容

• Reactive 原理

  const proxy = new Proxy(
    target,
    targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers,
  )
  proxyMap.set(target, proxy)
  return proxy

// 核心 proxy的handler处理
BaseReactiveHandler 处理get属性

MutableReactiveHandler 处理 set deleteProperty，has ownkeys属性

核心的track 和trigger逻辑 均来自于reactiveEffect文件

• 依赖存储结构

• track的核心是trackEffect

• trigger的话就是针对所有依赖，利用effect文件内提供能能力遍历依赖来执行

整体的依赖路径为：reactive->reactiveEffect->effect->dep

reactiveEffect是一个class

dep说白了是一个map

• 什么是effect

effect代表一个副作用

• effect中dirtyLeve的作用

用于防止重新computed 重新计算的优化逻辑

• effect的fn是如何自动检索其中的响应式对象并进行跟踪

effect会执行一遍，当有响应式对象被访问时，就会将当前的effect注册到所有响应式对象的deps中进行跟踪

• ref其实是个class

• 为什么要设计reactive和ref两个响应式基础