Vue发布订阅模式实现过程图解


Posted in Javascript onApril 30, 2020

vue项目中不同组件间通信一般使用vuex,通常情况下vuex和EventBus不应该混用,不过某些场景下不同组件间只有消息的交互,这时使用EventBus消息通知的方式就更合适一些。

图解

Vue发布订阅模式实现过程图解

Vue发布订阅模式实现过程图解

html

<body>
 <script src="./Dvue.js"></script>
 <script>
  const app = new DVue({
   data: {
    test: "I am test",
    foo: {
     bar: "bar"
    }
   }
  })

  app.$data.test = "hello world!"
  // app.$data.foo.bar = "hello!"
 </script>
</body>

Dvue.js

class DVue {
 constructor(options) {
  this.$options = options

  // 数据响应化
  this.$data = options.data
  this.observe(this.$data)

  // 模拟一下watcher创建
  // 激活get 并将依赖添加到deps数组上
  new Watcher()
  this.$data.test
  new Watcher()
  this.$data.foo.bar
 }

 observe(value) {
  // 判断value是否是对象  
  if (!value || typeof value !== 'object') {
   return
  }
  
  // 遍历该对象
  Object.keys(value).forEach(key => {
   this.defineReactive(value, key, value[key])
  })
 }

 // 数据响应化
 defineReactive(obj, key, val) {
  // 判断val内是否还可以继续调用(是否还有对象)
  this.observe(val) // 递归解决数据嵌套

  // 初始化dep
  const dep = new Dep()

  Object.defineProperty(obj, key, {
   get() {
    // 读取的时候 判断Dep.target是否有,如果有则调用addDep方法将Dep.target添加到deps数组上
    Dep.target && dep.addDep(Dep.target)
    return val
   },
   set(newVal) {
    if (newVal === val) {
     return;
    }
    val = newVal
    // console.log(`${key}属性更新了:${val}`)
    dep.notify() // 更新时候调用该方法
   }
  })
 }
}


// Dep: 用来管理Watcher
class Dep {
 constructor() {
  // 这里存放若干依赖(watcher) |一个watcher对应一个属性
  this.deps = [];
 }

 // 添加依赖
 addDep (dep) {
  this.deps.push(dep)
 }

 // 通知方法
 notify() {
  this.deps.forEach(dep => dep.update())
 }
}

// Watcher
class Watcher {
 constructor () {
  // 将当前watcher实例指定到Dep静态属性target上
  Dep.target = this  // 当前this就是Watcher对象
 }

 update() {
  console.log('属性更新了')
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js返回上一页并刷新代码整理
Dec 21 Javascript
js导出table到excel同时兼容FF和IE示例
Sep 03 Javascript
jquery 倒计时效果实现秒杀思路
Sep 11 Javascript
异步动态加载JS并运行(示例代码)
Dec 13 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
Dec 19 Javascript
select多选 multiple的使用示例
Jun 16 Javascript
javascript实时显示当天日期的方法
May 20 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
Jan 14 Javascript
微信小程序侧边栏滑动特效(左右滑动)
Jan 23 Javascript
vue获取form表单的值示例
Oct 29 Javascript
ES6 async、await的基本使用方法示例
Jun 06 Javascript
Vue实现穿梭框效果
Sep 30 Javascript
Javascript异步执行不按顺序解决方案
Apr 30 #Javascript
JS判断浏览器类型与操作系统的方法分析
Apr 30 #Javascript
JavaScript自定义超时API代码实例
Apr 30 #Javascript
javascript 模块依赖管理的本质深入详解
Apr 30 #Javascript
JavaScript find()方法及返回数据实例
Apr 30 #Javascript
js this 绑定机制深入详解
Apr 30 #Javascript
JS 图片压缩原理与实现方法详解
Apr 29 #Javascript
You might like
PHP 检查扩展库或函数是否可用的代码
2010/04/06 PHP
php里array_work用法实例分析
2015/07/13 PHP
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
php中关于长度计算容易混淆的问题分析
2016/05/27 PHP
php简单实现多维数组排序的方法
2016/09/30 PHP
详解PHP神奇又有用的Trait
2019/03/25 PHP
JavaScript定义类或函数的几种方式小结
2011/01/09 Javascript
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
fmt:formatDate的输出格式详解
2014/01/09 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
2014/01/16 Javascript
jQuery基础知识点总结(必看)
2016/05/31 Javascript
JavaScript类型系统之布尔Boolean类型详解
2016/06/26 Javascript
基于easyui checkbox 的一些操作处理方法
2017/07/10 Javascript
nodejs构建本地web测试服务器 如何解决访问静态资源问题
2017/07/14 NodeJs
vue组件父子间通信详解(三)
2017/11/07 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
2019/05/16 Javascript
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
2019/09/04 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
2019/09/04 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
2019/11/01 Javascript
在RedHat系Linux上部署Python的Celery框架的教程
2015/04/07 Python
简析Python的闭包和装饰器
2016/02/26 Python
离线安装Pyecharts的步骤以及依赖包流程
2020/04/23 Python
PyQt5每天必学之布局管理
2018/04/19 Python
Python 利用高德地图api实现经纬度与地址的批量转换
2019/08/14 Python
python异常处理try except过程解析
2020/02/03 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
Python urllib request模块发送请求实现过程解析
2020/12/10 Python
实习教师自我鉴定
2013/12/09 职场文书
上班玩游戏检讨书
2014/02/07 职场文书
个性与发展自我评价
2014/02/11 职场文书
高三家长寄语
2014/04/03 职场文书
2015年出纳个人工作总结
2015/04/02 职场文书
只需要12页,掌握撰写一流商业计划书的技巧
2019/05/07 职场文书
Pytorch DataLoader shuffle验证方式
2021/06/02 Python
什么是clearfix (一文搞清楚css清除浮动clearfix)
2023/05/21 HTML / CSS