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(); // 通知订阅者 } }); }