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 读后台cookie代码
Sep 15 Javascript
JavaScript对象之间的转换 jQuery对象和原声DOM
Mar 07 Javascript
javascript date格式化示例
Sep 25 Javascript
JS如何判断移动端访问设备并解析对应CSS
Nov 27 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
May 20 Javascript
js验证手机号、密码、短信验证码代码工具类
Jun 24 Javascript
详解在Vue中通过自定义指令获取dom元素
Mar 04 Javascript
如何解决vue与传统jquery插件冲突
Mar 20 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
Apr 12 Javascript
angular.js中解决跨域问题的三种方式
Jul 12 Javascript
AngularJS修改model值时,显示内容不变的实例
Sep 13 Javascript
angular4应用中输入的最小值和最大值的方法
May 17 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
收听困难?教您超简便短波广播抗干扰方法!
2021/03/01 无线电
PHP中使用cURL实现Get和Post请求的方法
2013/03/13 PHP
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
PHP session 会话处理函数
2016/06/06 PHP
laravel中短信发送验证码的实现方法
2018/04/25 PHP
实例说明js脚本语言和php脚本语言的区别
2019/04/04 PHP
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
javascript中的作用域scope介绍
2010/12/28 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
2012/01/13 Javascript
js三种排序算法分享
2012/08/16 Javascript
js setTimeout 常见问题小结
2013/08/13 Javascript
屏蔽IE弹出&quot;您查看的网页正在试图关闭窗口,是否关闭此窗口&quot;的方法
2013/12/31 Javascript
将Sublime Text 3 添加到右键中的简单方法
2017/12/12 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
2018/08/09 jQuery
JavaScript引用类型Function实例详解
2018/08/09 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
2019/04/04 Javascript
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
[57:12]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第一场 10.31
2020/11/02 DOTA
python 示例分享---逻辑推理编程解决八皇后
2014/07/20 Python
Python中为什么要用self探讨
2015/04/14 Python
Python数据分析之双色球统计单个红和蓝球哪个比例高的方法
2018/02/03 Python
Python基于Floyd算法求解最短路径距离问题实例详解
2018/05/16 Python
利用Python将每日一句定时推送至微信的实现方法
2018/08/13 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
很酷的python表白工具 你喜欢我吗
2019/04/11 Python
Python hashlib模块加密过程解析
2019/11/05 Python
Python 解码Base64 得到码流格式文本实例
2020/01/09 Python
python使用opencv resize图像不进行插值的操作
2020/07/05 Python
国际商务专业学生个人的自我评价
2013/09/28 职场文书
《桂林山水》教学反思
2014/02/08 职场文书
科技节口号
2014/06/19 职场文书
感恩教师节演讲稿
2014/09/03 职场文书
法英专业大学生职业生涯规划书范文
2014/09/22 职场文书
小学英语听课心得体会
2016/01/14 职场文书
Python Pandas常用函数方法总结
2021/06/15 Python
html form表单基础入门案例讲解
2021/07/21 HTML / CSS