共计 534 个字符,预计需要花费 2 分钟才能阅读完成。
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
}
})
正文完