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 相关文章推荐
基于jquery的loading效果实现代码
Nov 05 Javascript
JS检测移动端横竖屏的代码
May 30 Javascript
js实现文本上下来回滚动
Feb 03 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
May 12 Javascript
JavaScript实现短信倒计时60s
Oct 09 Javascript
详解Vue单元测试Karma+Mocha学习笔记
Jan 31 Javascript
webpack下实现动态引入文件方法
Feb 22 Javascript
vue的全局提示框组件实例代码
Feb 26 Javascript
详解angular脏检查原理及伪代码实现
Jun 08 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
Aug 07 Javascript
如何在微信小程序中使用骨架屏的步骤
Jun 12 Javascript
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 Vue.js
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
php 购物车的例子
2009/05/04 PHP
整理的9个实用的PHP库简介和下载
2010/11/09 PHP
PHP生成短网址方法汇总
2016/07/12 PHP
Zend Framework使用Zend_Loader组件动态加载文件和类用法详解
2016/12/09 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
PHP获取本周所有日期或者最近七天所有日期的方法
2018/06/20 PHP
javascript中的new使用
2010/03/20 Javascript
window.dialogArguments 使用说明
2011/04/11 Javascript
JQuery里选择超链接的实现代码
2011/05/22 Javascript
Angularjs material 实现搜索框功能
2016/03/08 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
2016/12/31 Javascript
Vue中自定义全局组件的实现方法
2017/12/08 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
2018/01/23 Javascript
javascript异步处理与Jquery deferred对象用法总结
2019/06/04 jQuery
JS数组中对象去重操作示例
2019/06/04 Javascript
[04:09]2018年度DOTA2社区贡献奖-完美盛典
2018/12/16 DOTA
在Python中使用swapCase()方法转换大小写的教程
2015/05/20 Python
使用python遍历指定城市的一周气温
2017/03/31 Python
Queue 实现生产者消费者模型(实例讲解)
2017/11/13 Python
python 读取竖线分隔符的文本方法
2018/12/20 Python
关于Python-faker的函数效果一览
2019/11/28 Python
Python 文件数据读写的具体实现
2020/01/24 Python
python+requests实现接口测试的完整步骤
2020/10/27 Python
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
详解使用canvas保存网页为pdf文件支持跨域
2018/11/23 HTML / CSS
骨干教师培训制度
2014/01/13 职场文书
中秋节礼品促销方案
2014/02/02 职场文书
公司总经理岗位职责
2014/03/15 职场文书
银行委托书范本
2014/04/04 职场文书
缓刑人员思想汇报500字
2014/09/12 职场文书
中职毕业生自我鉴定
2014/09/13 职场文书
戒毒悔改检讨书
2014/09/21 职场文书
小学生交通安全寄语
2015/02/27 职场文书
南京南京观后感
2015/06/02 职场文书
单独二胎证明
2015/06/24 职场文书
Spring依赖注入多种类型数据的示例代码
2022/03/31 Java/Android