Vue.js原理分析之observer模块详解


Posted in Javascript onFebruary 17, 2017

介绍

observer是Vue核心中最重要的一个模块(个人认为),能够实现视图与数据的响应式更新,底层全凭observer的支持。

注意:本文是针对Vue@2.1.8进行分析

observer模块在Vue项目中的代码位置是src/core/observer,模块共分为这几个部分:

  1. Observer: 数据的观察者,让数据对象的读写操作都处于自己的监管之下
  2. Watcher: 数据的订阅者,数据的变化会通知到Watcher,然后由Watcher进行相应的操作,例如更新视图
  3. Dep: Observer与Watcher的纽带,当数据变化时,会被Observer观察到,然后由Dep通知到Watcher

示意图如下:

Vue.js原理分析之observer模块详解

Observer

Observer类定义在src/core/observer/index.js中,先来看一下Observer的构造函数

constructor (value: any) {
 this.value = value
 this.dep = new Dep()
 this.vmCount = 0
 def(value, '__ob__', this)
 if (Array.isArray(value)) {
 const augment = hasProto
 ? protoAugment
 : copyAugment
 augment(value, arrayMethods, arrayKeys)
 this.observeArray(value)
 } else {
 this.walk(value)
 }
}

value是需要被观察的数据对象,在构造函数中,会给value增加__ob__属性,作为数据已经被Observer观察的标志。如果value是数组,就使用observeArray遍历value,对value中每一个元素调用observe分别进行观察。如果value是对象,则使用walk遍历value上每个key,对每个key调用defineReactive来获得该key的set/get控制权。

解释下上面用到的几个函数的功能:

  • observeArray: 遍历数组,对数组的每个元素调用observe
  • observe: 检查对象上是否有__ob__属性,如果存在,则表明该对象已经处于Observer的观察中,如果不存在,则new Observer来观察对象(其实还有一些判断逻辑,为了便于理解就不赘述了)
  • walk: 遍历对象的每个key,对对象上每个key的数据调用defineReactive
  • defineReactive: 通过Object.defineProperty设置对象的key属性,使得能够捕获到该属性值的set/get动作。一般是由Watcher的实例对象进行get操作,此时Watcher的实例对象将被自动添加到Dep实例的依赖数组中,在外部操作触发了set时,将通过Dep实例的notify来通知所有依赖的watcher进行更新。

如果不太理解上面的文字描述可以看一下图:

Vue.js原理分析之observer模块详解

Dep

Dep是Observer与Watcher之间的纽带,也可以认为Dep是服务于Observer的订阅系统。Watcher订阅某个Observer的Dep,当Observer观察的数据发生变化时,通过Dep通知各个已经订阅的Watcher。

Dep提供了几个接口:

  • addSub: 接收的参数为Watcher实例,并把Watcher实例存入记录依赖的数组中
  • removeSub: 与addSub对应,作用是将Watcher实例从记录依赖的数组中移除
  • depend: Dep.target上存放这当前需要操作的Watcher实例,调用depend会调用该Watcher实例的addDep方法,addDep的功能可以看下面对Watcher的介绍
  • notify: 通知依赖数组中所有的watcher进行更新操作

Watcher

Watcher是用来订阅数据的变化的并执行相应操作(例如更新视图)的。Watcher的构造器函数定义如下:

constructor (vm, expOrFn, cb, options) {
 this.vm = vm
 vm._watchers.push(this)
 // options
 if (options) {
 this.deep = !!options.deep
 this.user = !!options.user
 this.lazy = !!options.lazy
 this.sync = !!options.sync
 } else {
 this.deep = this.user = this.lazy = this.sync = false
 }
 this.cb = cb
 this.id = ++uid // uid for batching
 this.active = true
 this.dirty = this.lazy // for lazy watchers
 this.deps = []
 this.newDeps = []
 this.depIds = new Set()
 this.newDepIds = new Set()
 this.expression = process.env.NODE_ENV !== 'production'
 ? expOrFn.toString()
 : ''
 if (typeof expOrFn === 'function') {
 this.getter = expOrFn
 } else {
 this.getter = parsePath(expOrFn)
 if (!this.getter) {
 this.getter = function () {}
 process.env.NODE_ENV !== 'production' && warn(
 `Failed watching path: "${expOrFn}" ` +
 'Watcher only accepts simple dot-delimited paths. ' +
 'For full control, use a function instead.',
 vm
 )
 }
 }
 this.value = this.lazy
 ? undefined
 : this.get()
}

参数中,vm表示组件实例,expOrFn表示要订阅的数据字段(字符串表示,例如a.b.c)或是一个要执行的函数,cb表示watcher运行后的回调函数,options是选项对象,包含deep、user、lazy等配置。

watcher实例上有这些方法:

  • get: 将Dep.target设置为当前watcher实例,在内部调用this.getter,如果此时某个被Observer观察的数据对象被取值了,那么当前watcher实例将会自动订阅数据对象的Dep实例
  • addDep: 接收参数dep(Dep实例),让当前watcher订阅dep
  • cleanupDeps: 清除newDepIds和newDep上记录的对dep的订阅信息
  • update: 立刻运行watcher或者将watcher加入队列中等待统一flush
  • run: 运行watcher,调用this.get()求值,然后触发回调
  • evaluate: 调用this.get()求值
  • depend: 遍历this.deps,让当前watcher实例订阅所有dep
  • teardown: 去除当前watcher实例所有的订阅

Array methods

在src/core/observer/array.js中,Vue框架对数组的push、pop、shift、unshift、sort、splice、reverse方法进行了改造,在调用数组的这些方法时,自动触发dep.notify(),解决了调用这些函数改变数组后无法触发更新的问题。

在Vue的官方文档中对这个也有说明:http://cn.vuejs.org/v2/guide/list.html#变异方法

总结

以上就是这篇文中的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
如何防止回车(enter)键提交表单
May 11 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
Dec 29 Javascript
JavaScript实现点击自动选择TextArea文本的方法
Jul 02 Javascript
图解Sublime Text3使用技巧
Dec 21 Javascript
果断收藏9个Javascript代码高亮脚本
Jan 06 Javascript
javascript和jquery实现用户登录验证
May 04 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
Aug 02 Javascript
JavaScript实现图片瀑布流和底部刷新
Jan 02 Javascript
vue的基本用法与常见指令
Aug 15 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
vue实现在表格里,取每行的id的方法
Mar 09 Javascript
js设计模式之代理模式及订阅发布模式实例详解
Aug 15 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
Feb 17 #Javascript
Bootstrap表单使用方法详解
Feb 17 #Javascript
Angularjs单选改为多选的开发过程及问题解析
Feb 17 #Javascript
javascript基础知识之html5轮播图实例讲解(44)
Feb 17 #Javascript
javascript ES6中箭头函数注意细节小结
Feb 17 #Javascript
数组Array的排序sort方法
Feb 17 #Javascript
Bootstrap BootstrapDialog使用详解
Feb 17 #Javascript
You might like
桌面中心(四)数据显示
2006/10/09 PHP
PHP微信开发之根据用户回复关键词\位置返回附近信息
2016/06/24 PHP
实例讲解php将字符串输出到HTML
2019/01/27 PHP
使用jQuery简化Ajax开发 Ajax开发入门
2009/10/14 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
2013/05/08 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
2013/09/10 Javascript
一个简单的jquery进度条示例
2014/04/28 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
2015/08/17 Javascript
js强制把网址设为默认首页
2015/09/29 Javascript
js操作table元素实现表格行列新增、删除技巧总结
2015/11/18 Javascript
js实现图片轮播效果
2015/12/19 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
JavaScript 继承详解(六)
2016/10/11 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
2016/11/23 Javascript
nodejs发送http请求时遇到404长时间未响应的解决方法
2017/12/10 NodeJs
微信小程序返回上一页传参并刷新过程解析
2019/12/13 Javascript
node.js事件轮询机制原理知识点
2019/12/22 Javascript
[03:12]2016完美“圣”典风云人物:单车专访
2016/12/02 DOTA
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
python MySQLdb使用教程详解
2018/03/20 Python
解决python3 网络请求路径包含中文的问题
2018/05/10 Python
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
Laravel+Dingo/Api 自定义响应的实现
2019/02/17 Python
Java文件与类动手动脑实例详解
2019/11/10 Python
Python Pandas 对列/行进行选择,增加,删除操作
2020/05/17 Python
Html5实现移动端、PC端 刮刮卡效果
2016/06/30 HTML / CSS
菲律宾领先的在线时尚商店:Zalora菲律宾
2018/02/08 全球购物
英国著名药妆店:Superdrug
2021/02/13 全球购物
药品促销活动方案
2014/02/14 职场文书
2014学校庆三八妇女节活动总结
2014/03/01 职场文书
投资建议书模板
2014/05/12 职场文书
2014年教育工作总结
2014/11/26 职场文书
python人工智能human learn绘图可创建机器学习模型
2021/11/23 Python
mysql使用FIND_IN_SET和group_concat两个方法查询上下级机构
2022/04/20 MySQL
选购到合适的激光打印机
2022/04/21 数码科技