vue的双向数据绑定原理
采用数据劫持结合发布者-订阅者模式 的方式,通过Object.defineProperty() 来劫持各个属性的setter,getter 在数据变动时发布消息给订阅者,触发相应的监听回调来渲染视图,实现数据和视图同步。
首先介绍一下Object.defineProperty()方法
Object.defineProperty方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象
语法:Object.defineProperty(obj, prop, desc) obj : 要定义其上属性的对象 prop : 要定义或修改的属性 desc : 属性的描述,具体如下: 简单地说,就是用这个方法直接在一个对象上定义一个新属性,或者修改已经存在的属性。当调用这个属性时我们使用了它里面的get方法,当我们给这个属性赋值时,又用到了它里面的set方法。
let obj = {}
Object.defineProperty(obj,'name',{
value:'uu盘',
writable:true,
configurable:true,
enumerable:true,
get() {},
set() {}
})
注意: 当使用了getter或setter方法,不允许使用writable和value这两个属性(如果使用,会直接报错滴) 问题: 哎,到底是setter还是set? JavaScript中对象的属性可以分为数据属性 和访问器属性 访问器属性包括getter和setter方法
- getter: 是读取对象属性时调用的函数(实际上执行的是get方法)
- setter: 是写入对象属性时调用的函数(实际上执行的是set方法)
访问器属性不能直接定义,必须使用Object.defineProperty()来定义
更新中。。。
|