implement js reactivity

vue-proxy-reactivity.js

let data = { price: 5, quantity: 2 };
let target = null;
let total = 0;

class Dep {
	constructor() {
		this.subscribers = [];
	}
	depend() {
		if (target && !this.subscribers.includes(target)) {
			this.subscribers.push(target);
		}
	}
	notify() {
		this.subscribers.forEach((sub) => sub());
	}
}

let deps = new Map();

Object.keys(data).forEach((key) => {
	deps.set(key, new Dep());
});

let data_without_proxy = data;
data = new Proxy(data_without_proxy, {
	get(obj, key) {
		deps.get(key).depend();
		return obj[key];
	},
	set(obj, key, newValue) {
		obj[key] = newValue;
		deps.get(key).notify();
		return true;
	}
});

//Object.keys(data).forEach((key) => {
//	let internalValue = data[key];
//	const dep = new Dep();
//	Object.defineProperty(data, key, {
//		get() {
//			dep.depend();
//			console.log(`Getting ${key}: ${internalValue}`);
//			return internalValue;
//		},
//		set(newVal) {
//			console.log(`Setting ${key} to: ${newVal}`);
//			internalValue = newVal;
//			dep.notify();
//		}
//	});
//});

const watcher = (myFunc) => {
	target = myFunc;
	target();
	target = null;
};

watcher(() => {
	total = data.price * data.quantity;
});

console.log(total);

data.price = 100;

console.log(total);

vue-reactivity.js

let data = { price: 5, quantity: 2}
let target = null

class Dep {
    constructor() {
        this.subscribers = []
    }
    depend() {
        if (target && !this.subscribers.includes(target)) {
            this.subscribers.push(target)
        }
    }
    notify() {
        this.subscribers.forEach(sub => sub())
    }
}

Object.keys(data).forEach(key => {
    let internalValue = data[key]
    const dep = new Dep()
    Object.defineProperty(data,key, {
        get() {
            dep.depend()
            console.log(`Getting ${key}: ${internalValue}`)
            return internalValue
        },
        set(newVal) {
            console.log(`Setting ${key} to: ${newVal}`)
            internalValue = newVal
            dep.notify()
        }
    })
})

const watcher = (myFunc) => {
    target = myFunc
    target()
    target = null
}

watcher(() => {
    data.total = data.price * data.quantity
})