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作用域链使用介绍
Aug 29 Javascript
JavaScript中判断对象类型的几种方法总结
Nov 11 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
Nov 27 Javascript
js左右弹性滚动对联广告代码分享
Feb 19 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
Aug 15 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
Sep 20 Javascript
bootstrap table服务端实现分页效果
Aug 10 Javascript
详解Vuex中mapState的具体用法
Sep 28 Javascript
chosen实现省市区三级联动
Aug 16 Javascript
Vue项目路由刷新的实现代码
Apr 17 Javascript
浅谈vuex的基本用法和mapaction传值问题
Nov 08 Javascript
原生js实现放大镜组件
Jan 22 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数组操作之键名比较与差集、交集赋值的方法
2014/11/10 PHP
PHP strip_tags保留多个HTML标签的方法
2016/05/22 PHP
PHP生成推广海报的方法分享
2018/04/22 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
jQuery 获取URL参数的插件
2010/03/04 Javascript
jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
2010/10/15 Javascript
JavaScript 对象模型 执行模型
2010/10/15 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
2013/03/18 Javascript
浅谈Javascript 数组与字典
2015/01/29 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
2016/12/22 Javascript
jQuery滚动监听实现商城楼梯式导航效果
2017/03/06 Javascript
JS实现图片预加载之无序预加载功能代码
2017/05/12 Javascript
jQuery实现所有验证通过方可提交的表单验证
2017/11/21 jQuery
vue-cli启动本地服务局域网不能访问的原因分析
2018/01/22 Javascript
一种angular的方法级的缓存注解(装饰器)
2018/03/13 Javascript
node.JS事件机制与events事件模块的使用方法详解
2020/02/06 Javascript
vue使用better-scroll实现滑动以及左右联动
2020/06/30 Javascript
[01:48]DOTA2 2015国际邀请赛中国区预选赛第二日战报
2015/05/27 DOTA
python django事务transaction源码分析详解
2017/03/17 Python
利用python打开摄像头及颜色检测方法
2018/08/03 Python
Python 20行简单实现有道在线翻译的详解
2019/05/15 Python
如何用Python做一个微信机器人自动拉群
2019/07/03 Python
如何通过python实现全排列
2020/02/11 Python
PyInstaller将Python文件打包为exe后如何反编译(破解源码)以及防止反编译
2020/04/15 Python
Jupyter notebook快速入门教程(推荐)
2020/05/18 Python
Python第三方库安装缓慢的解决方法
2021/02/06 Python
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
一套.net面试题及答案
2016/11/02 面试题
初中女生自我鉴定
2013/12/19 职场文书
法律专业大学生职业生涯规划书:向目标一步步迈进
2014/09/22 职场文书
2014感恩节演讲稿大全
2014/10/11 职场文书
2015年社区工作总结
2015/04/08 职场文书
检讨书模板大全
2015/05/07 职场文书
2015暑假社会调查报告
2015/07/13 职场文书
创业计划书之酒吧
2019/12/02 职场文书
python 中[0]*2与0*2的区别说明
2021/05/10 Python