let activeReactiveFn = null
class Depend {
? constructor() {
? ? this.reactiveFn = new Set()
? }
? depend() {
? ? if (activeReactiveFn) {
? ? ? this.reactiveFn.add(activeReactiveFn)
? ? }
? }
? notify() {
? ? this.reactiveFn.forEach(fn => {
? ? ? fn()
? ? })
? }
}
const weekMapArr = new WeakMap()
function getDepend(target, key) {
? let mapArr = weekMapArr.get(target)
? if (!mapArr) {
? ? mapArr = new Map()
? ? weekMapArr.set(target, mapArr)
? }
? let dependObj = mapArr.get(key)
? if (!dependObj) {
? ? dependObj = new Depend()
? ? mapArr.set(key, dependObj)
? }
? return dependObj
}
function watchFn(fn) {
? activeReactiveFn = fn
? fn()
? activeReactiveFn = null
}
function reactive(obj) {
? Vue3
? const objProxy = new Proxy(obj, {
? ? get(target, key, receiver) {
? ? ? const depend = getDepend(target, key)
? ? ? depend.depend()
? ? ? return Reflect.get(target, key, receiver)
? ? },
? ? set(target, key, newValue, receiver) {
? ? ? Reflect.set(target, key, newValue, receiver)
? ? ? const depend = getDepend(target, key)
? ? ? depend.notify()
? ? }
? })
? return objProxy
? Vue2
? Object.keys(obj).forEach(key => {
? ? let value = obj[key]
? ? Object.defineProperty(obj, key, {
? ? ? get() {
? ? ? ? const depend = getDepend(obj, key)
? ? ? ? depend.depend()
? ? ? ? return value
? ? ? },
? ? ? set(val) {
? ? ? ? value = val
? ? ? ? const depend = getDepend(obj, key)
? ? ? ? depend.notify()
? ? ? }
? ? })
? })
? return obj
}
var test = reactive({
? name: 'a'
})
watchFn(() => {
? console.log(test.name, 'test.name');
})
test.name = 'b'
