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 相关文章推荐
javascript读取RSS数据
Jan 20 Javascript
JavaScript实现梯形乘法表的方法
Apr 25 Javascript
在Javascript中处理数组之toSource()方法的使用
Jun 09 Javascript
在JavaScript的正则表达式中使用exec()方法
Jun 16 Javascript
基于javascript实现listbox左右移动
Jan 29 Javascript
jQuery使用cookie与json简单实现购物车功能
Apr 15 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
May 24 Javascript
jQuery EasyUI提交表单验证
Jul 19 Javascript
BootStrap Validator使用注意事项(必看篇)
Sep 28 Javascript
基于MVC方式实现三级联动(JavaScript)
Jan 23 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
Sep 14 Javascript
VsCode插件整理(小结)
Sep 14 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 杂谈《重构-改善既有代码的设计》之四 简化条件表达式
2012/04/09 PHP
ThinkPHP框架设计及扩展详解
2014/11/25 PHP
PHP实现清除wordpress里恶意代码
2015/10/21 PHP
php提交post数组参数实例分析
2015/12/17 PHP
PHP编写学校网站上新生注册登陆程序的实例分享
2016/03/21 PHP
php5.2的curl-bug 服务器被php进程卡死问题排查
2016/09/19 PHP
总结PHP内存释放以及垃圾回收
2018/03/29 PHP
PHP中使用mpdf 导出PDF文件的实现方法
2018/10/22 PHP
JavaScript 事件的一些重要说明
2009/10/25 Javascript
JQuery 1.4 中的Ajax问题
2010/01/23 Javascript
ExtJS Store的数据访问与更新问题
2010/04/28 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
2012/08/01 Javascript
用JavaScript实现动画效果的方法
2013/07/20 Javascript
Jquery取得iframe下内容的方法
2013/11/18 Javascript
Document.location.href和.replace的区别示例介绍
2014/03/04 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
2015/02/23 Javascript
js纯数字逐一停止显示效果的实现代码
2016/03/16 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
vue如何判断dom的class
2018/04/26 Javascript
浅谈PDF.js使用心得
2018/06/07 Javascript
分享Python字符串关键点
2015/12/13 Python
Python的爬虫包Beautiful Soup中用正则表达式来搜索
2016/01/20 Python
python类的继承实例详解
2017/03/30 Python
jupyter notebook引用from pyecharts.charts import Bar运行报错
2020/04/23 Python
python基于socket实现的UDP及TCP通讯功能示例
2019/11/01 Python
python清空命令行方式
2020/01/13 Python
详解Python IO口多路复用
2020/06/17 Python
快速一键生成Python爬虫请求头
2021/03/04 Python
HTML5的新特性(1)
2016/03/03 HTML / CSS
美国零售商店:Blue&Cream
2017/04/07 全球购物
酷瑞网络科技面试题
2012/03/30 面试题
客户表扬信范文
2014/01/10 职场文书
户外活动总结范文
2014/04/30 职场文书
2014年文员工作总结
2014/11/18 职场文书
2016优秀大学生个人事迹材料范文
2016/03/01 职场文书
写好求职信的技巧解密
2019/05/14 职场文书