Object.difineProperty

Vue的双向数据绑定原理

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

Demo

let number = 18;
let person = {
    name: '张三',
    sex: '男'
}
Object.difineProperty(person,'age',{
    // value: 18, // 可以设置默认值
    // enmerable: true, // 控制属性是否可以枚举,默认false
    // writable: true,  // 控制属性是否可以被修改,默认false
    // configurable: true   // 控制属性是否被删除,默认false
    
    // 当有人读取person的age属性是,get函数(getter)就会被调用,且返回值就是age值
    get() {
        console.log('有人读取了age属性')
        retrun number;
    }
    // 当有人修改person的age属性是,set函数(setter)就会被调用,且会受到修改的具体值
    set(newVal) {
        console.log('有人修改了age属性,值是',newVal)
        number = value
    }
})

你可能感兴趣的