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 相关文章推荐
javascript 禁止复制网页
Jun 11 Javascript
javascript 函数调用的对象和方法
Jul 01 Javascript
Javascript弹出窗口的各种方法总结
Nov 11 Javascript
window.open()实现post传递参数
Mar 12 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
Oct 04 Javascript
AngularJS 简单应用实例
Jul 28 Javascript
详解使用nvm管理多版本node的方法
Aug 30 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
Jun 11 Javascript
浅谈Angular单元测试总结
Mar 22 Javascript
vue使用nprogress实现进度条
Dec 09 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
Jan 20 Javascript
JS异步宏队列微队列原理详解
Sep 09 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/10/09 PHP
PHP __autoload函数(自动载入类文件)的使用方法
2012/02/04 PHP
PHP反射机制用法实例
2014/08/28 PHP
PHP制作图形验证码代码分享
2014/10/23 PHP
php禁用函数设置及查看方法详解
2016/07/25 PHP
PHP读取大文件的几种方法介绍
2016/10/27 PHP
laravel 关联关系遍历数组的例子
2019/10/10 PHP
Javascript 个人笔记(没有整理,很乱)
2007/07/07 Javascript
File文件控件,选中文件(图片,flash,视频)即立即预览显示
2009/04/09 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
jQuery层级选择器用法分析
2015/02/10 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
2015/12/12 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
JS实现图片的不间断连续滚动的简单实例
2016/06/03 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
js仿QQ邮箱收件人选择与搜索功能
2017/02/10 Javascript
vuejs2.0实现一个简单的分页示例
2017/02/22 Javascript
Node.js实现简单的爬取的示例代码
2019/06/25 Javascript
微信小程序实现录音功能
2019/11/22 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
2020/10/22 Javascript
Python中使用tarfile压缩、解压tar归档文件示例
2015/04/05 Python
pycharm安装图文教程
2017/05/02 Python
Python实现一个转存纯真IP数据库的脚本分享
2017/05/21 Python
python3实现名片管理系统
2020/11/29 Python
python3实现指定目录下文件sha256及文件大小统计
2019/02/25 Python
Python列表切片常用操作实例解析
2019/12/16 Python
CSS3 display知识详解
2015/11/25 HTML / CSS
为有想象力的人提供的生活方式商店:Firebox
2018/06/04 全球购物
医大实习自我鉴定
2013/12/07 职场文书
好邻里事迹材料
2014/01/16 职场文书
导师评语大全
2014/04/26 职场文书
与美同行演讲稿
2014/09/13 职场文书
单方离婚协议书范本(2014版)
2014/09/30 职场文书
学校教学工作总结2015
2015/05/19 职场文书
《女娲补天》教学反思
2016/02/20 职场文书
最新最全的手机号验证正则表达式
2022/02/24 Javascript