vue简单实现原理

首先我们要清楚vue是双向绑定数据，通过object.defineProperty()的访问器属性getter、setter数据劫持结合发布订阅模式，来完成数据双向绑定。

<style>
		<div id="box"></div>
</style>
<script>
	// 定义一个div
	let oBox = documnet.getElementById('box');
	// 定义一个对象
	const obj = {
		msg: '默认值'
	};
	function upDate(val) {
		console.log(val); // 默认值
		oBox.innerHTML = val;
	};
	upDate(obj.msg);
	Object.defineProperty(obj, 'msg', {
		get() {
			return this._msg;
		},
		set(newVal) {
			upDate(newVal);
			this._msg = newVal;
		}
	});
</script>

点击去查看object.defineProperty()
现在可以在控制台输入obj.msg = ‘xxx’，这时候页面上的值就会随之改变。


好了，下班了，拜拜。?