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’，這時候頁面上的值就會隨之改變。


好了，下班了，拜拜。?