vue2 双向数据绑定的实现及原理

Oject.defineProperty() 是 JavaScript 中用于定义或修改对象的属性的方法，可以控制属性的特性（如可枚举性、可配置性、可写性等）
Object.defineProperty(obj, prop, descriptor)
obj：要在其上定义属性的对象。
prop：要定义或修改的属性的名称。
descriptor：属性的描述符对象，包含属性的特性设置。
descriptor 对象包含以下属性：
configurable：属性是否可配置，默认为 false。
enumerable：属性是否可枚举，默认为 false。
value：属性的值，默认为 undefined。
writable：属性是否可写，默认为 false。
get：获取属性值的函数。
set：设置属性值的函数

	<input type="text" placeholder="请输入" id="aInput" />
	<span id="txtName"></span>

```javascript
//eg:1 数据促使视图发生变化
      let aInput = document.getElementById("aInput")
		let label = document.getElementById("txtName")
		let obj = {
			name: ''
		}
		Object.defineProperty(obj, 'name', {
			get() {
				console.log("get")
				return obj.name //返回值将被用作该属性的值
			},
			set(val) { //当该属性被赋值时，将调用此函数，并带有一个参数（要赋给该属性的值）
				console.log("set", val)
				aInput.value = val
				label.innerHTML = val
			}
		})
		aInput.oninput = function() {
			obj.name = aInput.value
		}

		// setTimeout(() => {
		// 	obj.name = '哈哈改变了'
		// }, 2000)
		
		//eg:2
		let bvalue = 50
		let o = {}
		Object.defineProperty(o, 'b', {
			get() {
				return bvalue
			},
			set(val) {
				console.log("Seto", val)
				bvalue = val
				console.log("bvalue", bvalue)
				label.innerHTML = bvalue
			}
		})

		console.log("o", o.b)
		setTimeout(() => {
			o.b = 233333333333
		}, 1500)
		console.log("o", o.b)
		console.log("bvalue", bvalue);