发布/订阅者模式
要搞清楚vue中的双向数据绑定原理,就必须理解什么是发布、订阅者模式!!
1、首先想好谁是发布者、谁是订阅者(例如NBA专栏就是发布者,NBA球迷就是订阅者)
2、然后给发布者添加一个缓存列表,用于存放回调函数用来通知订阅者
3、最后就是发布消息,发布者者遍历这个缓存列表,依次触发订阅者的回调函数
废话不多说,直接上代码!希望大家能读懂源码再继续往下看vue的数据更新原理
let NBAcol = {}; // 自定义一个NBA专栏对象(这就是发布者)
NBAcol.list = []; // 这里用一个列表来缓存订阅者的回调函数
NBAcol.on = function(key, fun) {// on方法是给list数组添加相应的回调函数
// 如果还没有订阅此类消息,给该类消息创建一个缓存列表
/**
* list:["xiaoming": [fun], "xiaoqiang": [fun]]
*/
if(!this.list[key]) {
this.list[key] = [];
}
this.list[key].push(fun); // fun就是通知订阅者的回调函数
}
// 发布事件
NBAcol.emit = function(key, value) {
let funs = this.list[key