发布/订阅者模式,以及vue中更新数据原理解析

本文介绍了发布/订阅者模式,并详细解析了Vue.js中如何实现数据变化时相关依赖项的更新原理。通过创建Dep类、数据劫持以及Watcher函数,深入理解Vue的双向数据绑定机制。
摘要由CSDN通过智能技术生成

 发布/订阅者模式

要搞清楚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
  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值