reactivity 响应式

使用方法

npm i @vue/reactivity

const {effect, reactive} = require('@vue/reactivity')

// 声明响应式变量
let a = reactive({
	value: 10
})
let b;
effect(()=>{
	b = a.value + 10
	console.log(b)
	// 默认执行一次
})
// 依赖值发生变化，关联值同步更新
a.value = 30

原理

let currentEffect;
class Dep{
	constructor(val){
		this.effects = new Set()
		this._val = val
	}
	
	get value(){
		this.depend()②
		return this._val
	}
	set value(newVal){
		this._val = newVal
		this.notice()②
	}
	
	// 1. 收集依赖
	depend(){
		if(currentEffect){
			this.effects.add(currentEffect)
		}
	}
	
	notice(){
		this.effects.forEach(effect =>{
			effect()
		})
	}
}
export function effectWatch(effect){
	// 收集依赖
	currentEffect = effect;
	effect()
	dep.depend();
	currentEffect = null;
}

let dep = new Dep(10)
let b
effectWatch(()=>{
	b = dep.value + 20
})
dep.value = 100
// dep.notice()①

② 为 ① 的优化

proxy

const targetMap = new Map()

function getDep(target, key){
	let depsMap = targetMap.get(target)
    !depsMap || (depsMap = new Map()) && targetMap.set(target, depsMap)
    let dep = depsMap.get(key)
    !dep || (dep = new Dep()) && depsMap.set(key, dep)
    // key —— dep 映射
    return dep
}

export function reactive(raw){
	return new Proxy(raw, {
		get(target, key){
			console.log(key)
			const dep = getDep(target, key)
			// 依赖收集
			dep.depend()
			return Reflect.get(target, key) // target[key]
		},
		set(target, key, value){
			const dep = getDep(target, key)
			const result = Reflect.set(target, key, value)
			dep.notice()
			return result
		}
	})
}
const user = reactive({
	age: 10
})
effectWatch(()=>{
	// ,,,
})