vue数据双向绑定原理 Object.defineProperty()

什么是数据双向绑定

就是当改变一个数据时，另一个数据能够获取到这个改变，反之亦然。vue中如下：

<input type="text" v-model="aa" />
<script>
export default {
name:'top-nav',
components: {},
data() {
return { 
    list:[
        {id:1,name:'aa'},
        {id:2,name:'bb'},
    ],
    aa:'testtttttttt'
}
},
}
script>

页面中的input的值改变，data中的aa属性值也会随之改变，同样改变data中aa的值，页面中input的值也会跟着改变。
原理遍历data中的属性，利用Object.defineProperty()方法，添加getter、setter方法，如下：

<script>
let obj={}
let eg={}
Object.defineProperty(obj,'name',{
	get:function(){
		console.log('get val')
		
		return name
	},
	set:function(newVal){
        console.log('set name')
        eg.name=newVal
		name=newVal
	}
})
obj.name='aa'
let aaa=obj.name
console.log(eg.name) //'aa'
//输出 set name    get val
//当给obj的name属性赋值或读取name属性值时，会触发get、set函数
script>

所以，data属性的改变都可以通过get、set函数获取。这是双向绑定的底层原理，实际复杂的多。