vue2.x双向数据绑定原理Object.definPropetery

<input type="text" v-modle="aaa">
<div v-text>{{ aaa }}</div>
1.0 概念： 当视图发生变化，数据改变(如输入框的输入数据，数据改变)
		  数据改变，视图发生变化（当数据发生变化，div中的aaa发生变化）
2.0 实现原理是通过 Object.defineProperty(obj,'key',{
        get() {
            // 当获取对象属性值会触发
        },
        set(value) {
            // 当给对象新增属性时会触发
        }
	})
案例如下： 视图
<input type="text" v-modle>
<div v-text></div>
<div v-text></div>
<div v-text></div>
// 实现步骤

1.0 设置一个空对象，用于创建一个数据源
var data = {}

2.0 使用Object的内置方法 definProperty()去监听对象属性的操作
Object.defineProperty(data,'name',{
	get(){
		return _name
	},
	set(value) {
		_name = value
		// 操作value
		document.querySeletor('[v-text]').forEach(item=> {
			item.innerHTML = value
		})
	}
})
3.0 操作视图，当输入框的值发生改变，修改data中的值
document.querySelector('[v-model]').oninput = function() {
	// data.name 会触发 set方法，set方法中又会触发 视图的改变
	data.name = this.value
}