原理
1.vue双向数据绑定是通过 数据劫持 结合 发布订阅模式 实现的,数据和视图同步,即数据发生变化,视图跟着变化,视图变化,数据也随之发生改变
2.核心:Object.defineProperty()
Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。 -- 来自MDN
语法:Object.defineProperty(obj, prop, descriptor)
参数:
obj:要定义属性的对象。
prop:要定义或修改的属性的名称或 Symbol
。
descriptor:要定义或修改的属性描述符。
简单地说,就是用这个方法来定义一个值。当调用时我们使用了它里面的get方法,当我们给这个属性赋值时,又用到了它里面的set方法;
let obj = {}
Object.defineProperty(obj,'test',{
get:function(){
console.log('调用get方法')
},
set:function(newVal){
console.log('调用set方法,新值为:'+newVal)
}
})
obj.test; // '调用get方法'
obj.test='我们都是打工人' // 调用set方法,新值为:我们都是打工人