vue双向绑定

189 阅读1分钟

vue双向绑定:

采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。

什么是setter和getter?

对象有两种属性:一个是数据属性,一个是访问器属性 get对应的方法称为getter,负责获取值,不带任何参数。set对应的方法为setter,负责设置值,在它的函数体中,一切的return都是无效的。

什么是Object.defineProperty()?

可以使用Object.defineProperty定义新属性或修改原有的属性 语法:Object.defineProperty(obj,prop,descriptor) 参数:obj:目标对象;prop:需定义或修改的属性的名字;descriptor:目标属性所拥有的特性; let obj = {}; Object.defineProperty(obj,'name',{ get: function(){ console.log('我被获取了') return val; }, set: function (newVal){ console.log('我被设置了') } }) obj.name = '小明'; //给obj设置name属性时触发set方法 //我被设置了 let var = obj.name; //在得到obj的name属性,会触发get方法 //我被获取了