defineProperty与Proxy的差异对比

不管你是否使用过vue，多多少少应该也了解过vue的使用原理，也就是我们经常说的数据劫持。在vue2中使用的是Object.defineProperty实现的，而在vue3中则是使用的Proxy。

defineProperty

使用defineProperty实现一个简单的数据劫持（数据监听）。

const watch = (target, property, callback) => {
	// 这里新增一个_value字段用于临时存储
	let _value = target[property];

	Object.defineProperty(target, property, {
		get() {
			return _value;
		},
		set(newVal) {
			const original = _value;
			// 这里将值赋值给_value而不是target[property]是为了防止陷入无限循环
			// target[property] = newVal又将会触发set
			_value = newVal;
			callback && callback(newVal, original);
		}
	});
}

// 测试
// html
<input id="input" />
<div id="text"></div>

// js
const data = {};
// defineProperty只能监听对象的单一属性，如果需要监听所有属性则需要遍历添加watch
watch(data, 'text', (newVal) => {
	text.innerText = newVal;
});
input.oninput = (e) => {
	data.text = e.target.value;
}

Proxy

同样的，我们使用Proxy也来实现一个watch。

const watch = (target, callback) => {
	return new Proxy(target, {
		get(target, property) {
			return target[property];
		},
		set(target, property, value) {
			const original = target[property];
			target[property] = value;
			callback && callback(value, original);
		}
	});
}

// 测试
// html
<input id="input" />
<div id="text"></div>

// proxy和defineProperty的使用方式略有不同
// 必须对proxy实例进行操作才会触发数据劫持
const data = {};
const p = watch(data, (n, o) => {
	text.innerText = n;
});
input.oninput = (e) => {
	p.text = e.target.value;
}

对比

本来好像可以写很多话来描述这些，后来想想直接一个对比表格可能会显得更加清晰。

特性	defineProperty	Proxy
是否可监听数组变化	否（vue中对数组的几种常用方法进行了hack）	是
是否可以劫持整个对象	否（只能通过遍历的方式）	是
兼容性	支持主流浏览器(IE8及以上)	不支持IE
操作时是否对原对象直接操作	是	否（需要对Proxy实例进行操作）
可劫持的操作	get、set	get、set、defineProperty、has、apply等13种