title: vue3源码手写-effect实现
date: 2023-04-03 21:00:00
categories: 源码
tags: VUE3
vue3源码手写-effect实现
1. packages\reactivity\src\effect.ts
第一步在 packages\reactivity\src\effect.ts 创建effect文件，effect做的就是依赖收集对get set put等操作进行收集
export function effect(fun,options:any={}){
const effect = creatReactEffect(fun,options)
// 不是懒执行 直接执行
if(!options?.lazy){
effect()
}
}
// 定义属性用作区分。每个属性都会有自己的uid
let uid = 0
// 储存当前的effect
let activeEffect
function creatReactEffect(fun,options){
const effect = function reactEffect(){
activeEffect=effect
fun()
}
effect.id = uid++; //区分effect
effect._isEffect = true//区分effect 是不是响应式
effect.raw = fun//保存传进来的方法
effect.options = options//保存传进来的属性
return effect
}
// 收集依赖effect 在获取数据的时候触发get 收集effect
let targetMap= new WeakMap()
export function track(target,type,key){
// 是undefined则说明没有调用或者不是响应数据
if(activeEffect === undefined) return
// 获取effect {target:dep}
let depMap = targetMap.get(target)
if(!depMap){
// 没有 depMap 说明第一次调用
targetMap.set(target,(depMap= new Map))
}
// 有depMap 就要判断有没有收集属性依赖
let dep = depMap.get(key)
if(!dep){
// 没有收集属性依赖就要添加
depMap.set(key,(dep= new Set))
}
// 有属性要看看依赖收集没有
if(!dep.has(activeEffect)){
// 没有要添加
dep.add(activeEffect)
}
}
