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 相关文章推荐
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
Oct 11 Javascript
jquery动态增加text元素以及删除文本内容实例代码
Jul 01 Javascript
js中的scroll和offset 使用比较的实例与分析
Sep 29 Javascript
超实用的JavaScript表单代码段
Feb 26 Javascript
javascript三种代码注释方法
Jun 02 Javascript
javascript使用递归算法求两个数字组合功能示例
Jan 03 Javascript
js实现放大镜特效
May 18 Javascript
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
jQuery正则验证注册页面经典实例
Jun 10 jQuery
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
Jul 23 Javascript
JavaScript实现简单图片轮播效果
Aug 21 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
Jan 24 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
基于PHP读取csv文件内容的详解
2013/06/18 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
PHP 实现从数据库导出到.csv文件方法
2017/07/06 PHP
Javascript中Eval函数的使用
2010/03/23 Javascript
Prototype源码浅析 String部分(二)
2012/01/16 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
jQuery移除元素自动解绑事件实现思路及代码
2014/05/31 Javascript
javascript实现跨域的方法汇总
2015/06/25 Javascript
Bootstrap实现下拉菜单效果
2016/04/29 Javascript
微信小程序 引用其他js文件实现代码
2017/02/22 Javascript
node+koa实现数据mock接口的方法
2017/09/20 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
2017/09/25 Javascript
Vue项目history模式下微信分享爬坑总结
2019/03/29 Javascript
JavaScript定时器设置、使用与倒计时案例详解
2019/07/08 Javascript
详解Vue的mixin策略
2020/11/19 Vue.js
[45:52]2018DOTA2亚洲邀请赛 4.1小组赛 A组加赛 LGD vs Liquid
2018/04/02 DOTA
Python列表(list)、字典(dict)、字符串(string)基本操作小结
2014/11/28 Python
python实现线程池的方法
2015/06/30 Python
深入理解Python中变量赋值的问题
2017/01/12 Python
人机交互程序 python实现人机对话
2017/11/14 Python
详解Django中类视图使用装饰器的方式
2018/08/12 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
Python中那些 Pythonic的写法详解
2019/07/02 Python
Python3连接Mysql8.0遇到的问题及处理步骤
2020/02/17 Python
Python用SSH连接到网络设备
2021/02/18 Python
css3使用animation属性实现炫酷效果(推荐)
2020/02/04 HTML / CSS
顶丰TOPPIK台湾官网:增发纤维假发,告别秃发困扰
2018/06/13 全球购物
.net笔试题
2014/03/03 面试题
什么是.net的Remoting技术
2016/07/08 面试题
区域销售经理岗位职责
2013/12/10 职场文书
2015年六一儿童节演讲稿
2015/03/19 职场文书
2015年关爱留守儿童工作总结
2015/05/22 职场文书
pytorch 两个GPU同时训练的解决方案
2021/06/01 Python
总结一下关于在Java8中使用stream流踩过的一些坑
2021/06/24 Java/Android
详解TypeScript的基础类型
2022/02/18 Javascript
Python之matplotlib绘制折线图
2022/04/13 Python