Vue2 双向数据绑定(一)-- 观察者构造函数

发布日期:2019-06-07 阅读量:390

1. 创建观察者模型

// observer.js
/**
* 观察者模型
* param { objec } data 数据
*/
function observe(data) {
if (!data || typeof data !== 'object') { // 检查对象为空或者不是对象则返回
return;
}
Object.keys(data).forEach(function(key) { // 遍历所有属性
defineReactive(data, key, data[key]); // 响应式数据 往下看此方法↓
})
}
function defineReactive(data, key, val) {
observe(val); // 循环遍历
var dep = new Dep; // 订阅器 下一章
Object.defineProperty(data, key, { // 拦截属性并监听
enumerable: true, // 可枚举
configurable: true, // 可修改和删除
get: function() {
if (dep.target) { // 添加订阅者
dep.addSub(dep.target);
}
return val;
},
set: function(newval) {
if (val === newval) { // 新旧值相等
return;
}
val = newval;
dep.notify(); // 通知订阅者
}
});
}