网站分几个类型,wordpress 图文排版,o2o是什么商业模式,网站建设的好处论文很多人感觉vue2的响应式其实用到了观察者发布订阅。我们先来看一下简单的发布订阅的代码#xff1a;
// 调度中心
class Dep {static subscribes {}// 订阅所有需求static subscribe (key, demand) {// 对需求分类收集if (!Dep.subscribes[key]) Dep.subscribes[key] []Dep…很多人感觉vue2的响应式其实用到了观察者发布订阅。我们先来看一下简单的发布订阅的代码
// 调度中心
class Dep {static subscribes {}// 订阅所有需求static subscribe (key, demand) {// 对需求分类收集if (!Dep.subscribes[key]) Dep.subscribes[key] []Dep.subscribes[key].push(demand)}// 对所有订阅者发布通知static publish (key, age) {if (!Dep.subscribes[key]) returnfor (const demand of Dep.subscribes[key]) {demand(age)}}}// 找对象的猎手类class Watcher {constructor (name, age) {this.name name // 名字this.age age // 年龄}// 订阅由调度中心将猎手需求分类并存放到全局subscribe (key, demand) {Dep.subscribe(key, demand)}// 发布由调度中心将同分类下的需求全部触发publish (key, age) {Dep.publish(key, age)}}// 猎手注册const aa new Watcher(aa, 18)const bb new Watcher(bb, 20)// 猎手订阅自己感兴趣的人aa.subscribe(key, function (age) {if (age aa.age) console.log(我是aa我们都是${age})else console.log(我是aa我们年龄不同)})bb.subscribe(key, function (age) {if (age bb.age) console.log(我是bb我们都是${age})else console.log(我是bb我们年龄不同)})// 红娘注册const red new Watcher(red, 35)// 红娘发布信息red.publish(key, 20)// 我是aa我们年龄不同// 我是bb我们都是20从上面中发现一个重要的点发布者和订阅者是根据key值来区分的然后通过消息中心来中转的他们家是是实现不知道对方是谁。 而观察者模式中观察者是一开始就知道自己观察的是谁。
上面其实就是简易版的vue原理中发布订阅那段我们接下来看完整过程。
Vue2 的响应式
创建一个 Observer 对象它的主要作用是给对象的每个属性添加 getter 和 setter 方法。在 getter 和 setter 方法中分别进行依赖的收集和派发更新。创建 Watcher 对象用于监听数据的变化当数据发生任何变化时Watcher 对象会触发自身的回调函数。在模板解析阶段对模板中使用到的数据进行依赖的收集即收集 Watcher 对象。当数据发生变化时Observer 对象会通知 Dep 对象调用 Watcher 对象的回调函数进行更新操作即派发更新。更新完毕后Vue2 会进行视图的重新渲染从而实现响应式。
下面是一个基于 Object.defineProperty 实现响应式的示例仅供参考
function observe(obj) {if (!obj || typeof obj ! object) {return;}Object.keys(obj).forEach(key {// 尝试递归处理observe(obj[key]);let val obj[key];const dep new Dep(); // 新建一个依赖Object.defineProperty(obj, key, {enumerable: true,configurable: true,get() {if (Dep.target) {dep.depend(); // 收集依赖}return val;},set(newVal) {if (newVal val) {return;}val newVal;dep.notify(); // 派发更新}});});
}// 依赖类
class Dep {constructor() {this.subs [];}addSub(sub) {this.subs.push(sub);}removeSub(sub) {const index this.subs.indexOf(sub);if (index ! -1) {this.subs.splice(index, 1);}}depend() {if (Dep.target) {Dep.target.addDep(this);}}notify() {this.subs.forEach(sub sub.update());}
}Dep.target null;// 观察者类
class Watcher {constructor(vm, expOrFn, callback) {this.vm vm;this.getter parsePath(expOrFn);this.callback callback;this.value this.get(); // 初始化触发依赖}get() {Dep.target this; // 设置当前依赖const value this.getter.call(this.vm, this.vm); // 触发 getterDep.target null; // 清除当前依赖return value;}addDep(dep) {dep.addSub(this);}update() {const oldValue this.value;this.value this.get(); // 重新获取this.callback.call(this.vm, this.value, oldValue); // 触发回调}
}// 解析路径
function parsePath(expOrFn) {if (typeof expOrFn function) {return expOrFn;}const segments expOrFn.split(.);return function(obj) {for (let i 0; i segments.length; i) {if (!obj) {return;}obj obj[segments[i]];}return obj;};
}// 测试
const obj { foo: foo, bar: { a: 1 } };
observe(obj);
new Watcher(obj, foo, (val, oldVal) {console.log(foo changed from ${oldVal} to ${val});
});
new Watcher(obj, bar.a, (val, oldVal) {console.log(bar.a changed from ${oldVal} to ${val});
});obj.foo FOO; // 输出 foo changed from foo to FOO
obj.bar.a 2; // 输出 bar.a changed from 1 to 2以上代码中函数 observe 用于递归遍历对象属性把其进行劫持包括收集依赖和派发更新类 Dep 代表一个依赖其中 addSub 用于添加订阅者实例removeSub 用于移除订阅者实例depend 用于收集依赖即把当前依赖加到对应的订阅者中notify 用于派发更新即遍历所有订阅者并触发其回调函数。类 Watcher 则代表一个订阅者其中 getter 用于获取数据callback 用于回调函数addDep 用于添加依赖即把当前订阅者添加到对应的依赖中update 用于更新值并触发相应的回调函数如有必要。函数 parsePath 则用于解析路径字符串返回对应属性的值。
例子中我们对对象 obj 进行了劫持同时创建了两个观察者分别对应 foo 和 bar.a 两个属性。当其中任意一个属性的值发生变化时其对应的依赖都会被更新从而触发其绑定的观订阅者的回调函数。
简单来说在 Vue2 响应式系统中当数据发生改变时会触发 get 和 set 方法get 方法会收集所有依赖该数据的 Watcher 对象set 方法会通知 Dep 对象触发所有 Watcher 对象的回调函数进行更新。如此循环实现了数据的响应式。
