【vue】vue2和vue3分别实现数据侦听

var obj = new Object();
var value;
Object.defineProperty(obj,'name',{
    get: function () {
        console.log(`get${obj['name']} `);
        return value;//必须return一个值，作为name属性的值
    },
    set: function (newvalue) {
        console.log('set it');
        value = newvalue;//同步把value的值进行更新
    }
});
console.log(obj);
console.log(obj.name);//get it
obj.name = ’aaaaa‘;//set it
console.log(obj.name);//get it

<div class="wrapper"></div>

function observe(target) {
	if (typeof target !== "null" && typeof target !== "object") {
		return target;
	}
	for (let key in target) {
		defineReactive(target, key, target[key]);
	}
}

function defineReactive(target, key, value) {
	observe(value); // 使用递归，实现深度监听
	Object.defineProperty(target, key, {
		get() {
			return value;
		},
		set(newValue) {
			if (value !== newValue) {
				value = newValue;
				updateView(JSON.stringify(target));
			} else {
				console.log("value == newValue");
			}
		}
	});
}

function updateView(value) {
	document.querySelector(".wrapper").innerText = value;
}

let serveObj = {
	name: "aaaccc",
	age: 11,
	other: {
		sex: "f"
	}
};

observe(serveObj); 

serveObj.name = "sdfdsfsdfsd" // dom会实时改变innerHtml的内容 。

let obj = { a: 1 };
let proxy = new Proxy(obj, {
	get(target, key) {
		return target[key];
	},
	set(target, key, value, proxy) {
		target[key] = value;
document.querySelector(".wrapper").innerText = JSON.stringify(proxy);
	}
});

proxy.b = 1;
obj // {a: 1, b: 1}