vue 笔记-数据双向绑定 vue双向数据绑定原理简书

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

// 这是将要被劫持的对象
const data = {
name: '',
};
function say(name) {
if (name === '古天乐') {
console.log('给?家推荐?款超好玩的游戏');
} else if (name === '渣渣辉') {
console.log('戏我演过很多,可游戏我只玩贪玩懒?');
} else {
console.log('来做我的兄弟');
}
}
// 遍历对象,对其属性值进?劫持
Object.keys(data).forEach(function(key) {
Object.defineProperty(data, key, {
enumerable: true,
configurable: true,
get: function() {
console.log('get');
},
set: function(newVal) {
// 当属性值发?变化时我们可以进?额外操作
console.log(`?家好,我系${newVal}`);
say(newVal);
},
});
});
data.name = '渣渣辉';
//?家好,我系渣渣辉
//戏我演过很多,可游戏我只玩贪玩懒?