vue观察模式浅析


Posted in Javascript onSeptember 25, 2018

观察者模式

首先话题下来,我们得反问一下自己,什么是观察者模式?

概念

观察者模式(Observer):通常又被称作为发布-订阅者模式。它定义了一种一对多的依赖关系,即当一个对象的状态发生改变的时候,所有依赖于它的对象都会得到通知并自动更新,解决了主体对象与观察者之间功能的耦合。

讲个故事

上面对于观察者模式的概念可能会比较官方化,所以我们讲个故事来理解它。

A:是共产党派往国民党密探,代号 001(发布者)
B:是共产党的通信人员,负责与 A 进行秘密交接(订阅者)

  • A 日常工作就是在明面采集国民党的一些情报
  • B 则负责暗中观察着 A
  • 一旦 A 传递出一些有关国民党的消息(更多时候需要对消息进行封装传递,后面根据源码具体分析)
  • B 会立马订阅到该消息,然后做一些相对应的变更,比如说通知共产党们做一些事情应对国民党的一些动作。

适用性

以下任一场景都可以使用观察者模式

  • 当一个抽象模型有两个方面,其中一个方面依赖于另一方面。讲这两者封装在独立的对象中可以让它们可以各自独立的改变和复用
  • 当一个对象的改变的时候,需要同时改变其它对象,但是却不知道具体多少对象有待改变
  • 当一个对象必须通知其它对象,但是却不知道具体对象到底是谁。换句话说,你不希望这些对象是紧密耦合的。

以下是我对vue观察者模式的理解:

不要对框架的偏见, 你真的了解jquery、angular、react 等等,框架是什么只是工具而已。

你用过jquery的 trigger、on、off 事件绑定的方法吗?事实上 vue 不过也是这种模式,只不过vue 是自动调用on方法,自动触发trigger。甚至可以不用jquery对事件监听触发的实现。其实最终解释就是对某种事件的callback(基础原理)。

以下是源码目录截图:

vue观察模式浅析

1... vue 实例初始化时,会对data函数返回的对象里的属性调用以下方法,代码注释如下:

// 这个是 vue 绑定自动绑定事件的方法和触发事件方法, 会把data函数返回的对象变量属性,重写对应属性的 赋值 和获取的操作。具体查看 (mdn Object.defineProperty api)
 Object.defineProperty(obj, key, {
  enumerable: true,
  configurable: true,
  get: function reactiveGetter () {
   const value = getter ? getter.call(obj) : val
   // watcher 对象, 如果存在
   if (Dep.target) {
    // 把Watcher 实例 推入 Dep 实例的 subs 数组里, 这个就相当于 on
    dep.depend()
    if (childOb) {
     childOb.dep.depend()
     if (Array.isArray(value)) {
      dependArray(value)
     }
    }
   }
   return value
  },
  set: function reactiveSetter (newVal) {
   const value = getter ? getter.call(obj) : val
   /* eslint-disable no-self-compare */
   if (newVal === value || (newVal !== newVal && value !== value)) {
    return
   }
   /* eslint-enable no-self-compare */
   if (process.env.NODE_ENV !== 'production' && customSetter) {
    customSetter()
   }
   if (setter) {
    setter.call(obj, newVal)
   } else {
    val = newVal
   }
   childOb = !shallow && observe(newVal)
   // 通知 Dep 实例 中subs 里数组 中所有 Watcher 实例, 然后调用Watcher实例里的 update方法(), 这个就相当于 trigger。
   dep.notify()
  }
 })
// Watcher 构造函数 
 constructor (
  vm: Component,
  expOrFn: string | Function,
  cb: Function,
  options?: ?Object,
  isRenderWatcher?: boolean
 )

2...Watcher初始化时,会调用Dep.pushTarget方法, 把 Wathcer实例赋值到dep.js 里的Dep.target, 接着会根据 exporFn,运行exporFn 所代表的方法。这个方法里基本上包含调用 1...里的getter方法(想想render钩子里的操作基本有获取vue实例属性data里的值或者获取vue实例的计算属性的值)。

var vm = new Vue({
  data () {
    return {msg: '找个小姐姐!'}
  },
  // 相当于 exporFn
  render(h) {
    return h('h3', {},
     // 这里面就会调用 msg 对应的 getter方法
     this.msg
    )
  }
})

所以就会使 render 函数 与 Vue 实例 的 数据 data属性 和观察属性等产生联系,这就形成一个闭环。当其中的属性变化,就会自动调用 setter 方法,从而触发dep.notify 方法,进而又会触发 dep.subs 里的 Watcher 实例调用 update方法,进而更新。
(这部分代码不知如何说,故此没写, 具体查看源码)

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

Javascript 相关文章推荐
用JQuery 实现AJAX加载XML并解析的脚本
Jul 25 Javascript
表单JS弹出填写提示效果代码
Apr 16 Javascript
小议JavaScript中Generator和Iterator的使用
Jul 29 Javascript
jQuery validate插件实现ajax验证重复的2种方法
Jan 22 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
May 19 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
Aug 23 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
Jan 17 Javascript
JS 实现随机验证码功能
Feb 15 Javascript
关于预加载InstantClick的问题解决方法
Sep 12 Javascript
ES6中数组array新增方法实例总结
Nov 07 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 Javascript
详解搭建es6+devServer简单开发环境
Sep 25 #Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
Sep 25 #Javascript
在axios中使用params传参的时候传入数组的方法
Sep 25 #Javascript
VUE实现可随意拖动的弹窗组件
Sep 25 #Javascript
vue移动端弹框组件的实例
Sep 25 #Javascript
JavaScript常用数组操作方法,包含ES6方法
May 10 #Javascript
在vue项目中,将juery设置为全局变量的方法
Sep 25 #Javascript
You might like
目录,文件操作详谈―PHP
2006/11/25 PHP
php ss7.5的数据调用 (笔记)
2010/03/08 PHP
php运行提示:Fatal error Allowed memory size内存不足的解决方法
2014/12/17 PHP
PHP记录搜索引擎蜘蛛访问网站足迹的方法
2015/04/15 PHP
在WordPress的后台中添加顶级菜单和子菜单的函数详解
2016/01/11 PHP
PHP表单数据写入MySQL数据库的代码
2016/05/31 PHP
Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解
2017/10/11 PHP
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
2013/02/26 Javascript
仿新浪微博登陆邮箱提示效果的js代码
2013/08/02 Javascript
js/jquery判断浏览器类型的方法小结
2015/05/12 Javascript
JavaScript实现输入框(密码框)出现提示语
2016/01/12 Javascript
js判断上传文件后缀名是否合法
2016/01/28 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
js带闹铃功能的倒计时代码
2016/09/29 Javascript
Angular的事件和表单详解
2016/12/26 Javascript
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
vue中的过滤器实例代码详解
2019/06/06 Javascript
vue使用codemirror的两种用法
2019/08/27 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
[01:08:32]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第二场 1月18日
2021/03/11 DOTA
微信小程序跳一跳游戏 python脚本跳一跳刷高分技巧
2018/01/04 Python
详解Python中的type和object
2018/08/15 Python
python实现多进程代码示例
2018/10/31 Python
详解Python循环作用域与闭包
2019/03/21 Python
图解Python中深浅copy(通俗易懂)
2020/09/03 Python
css3高级选择器使用方法
2013/12/02 HTML / CSS
一套.net面试题及答案
2016/11/02 面试题
护士自我介绍信
2014/01/13 职场文书
家长对老师的感言
2014/03/11 职场文书
互联网创业计划书写作技巧攻略
2014/03/23 职场文书
大型活动组织方案
2014/05/10 职场文书
服装设计专业求职信
2014/06/16 职场文书
教师批评与自我批评范文
2014/10/15 职场文书
2014年基建工作总结
2014/12/12 职场文书
创业计划书之o2o水果店
2019/08/30 职场文书
低端且暴利的线上线下创业项目分享
2019/09/03 职场文书