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自动设置IFrame高度的小例子
Jun 08 Javascript
jQuery中element选择器用法实例
Dec 29 Javascript
JS实现超炫网页烟花动画效果的方法
Mar 02 Javascript
AngularJS 面试题集锦
Sep 06 Javascript
bootstrap table分页模板和获取表中的ID方法
Jan 10 Javascript
jQuery表单设置值的方法
Jun 30 jQuery
Three.js实现绘制字体模型示例代码
Sep 26 Javascript
动态统计当前输入内容的字节、字符数的实例详解
Oct 27 Javascript
es6数据变更同步到视图层的方法
Mar 04 Javascript
webpack4 optimization使用总结
Nov 10 Javascript
微信小程序onShareTimeline()实现分享朋友圈
Jan 07 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
Jan 18 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
apache php mysql开发环境安装教程
2016/07/28 PHP
针对多用户实现头像上传功能PHP代码 适用于登陆页面制作
2016/08/17 PHP
用js实现的仿sohu博客更换页面风格(简单版)
2007/03/22 Javascript
Javascript中的方法链(Method Chaining)介绍
2015/03/15 Javascript
AngularJS快速入门
2015/04/02 Javascript
JavaScript 变量、作用域及内存
2015/04/08 Javascript
jQuery实现的网页换肤效果示例
2016/09/20 Javascript
微信公众号 摇一摇周边功能开发
2016/12/08 Javascript
JS瀑布流实现方法实例分析
2016/12/19 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
2017/07/20 Javascript
jQuery事件对象的属性和方法详解
2017/09/09 jQuery
vue学习之mintui picker选择器实现省市二级联动示例
2017/10/12 Javascript
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
vue2.0 中使用transition实现动画效果使用心得
2018/08/13 Javascript
vue-cli项目中使用echarts图表实例
2018/10/22 Javascript
Vue分页插件的前后端配置与使用
2019/10/09 Javascript
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
2020/05/19 Javascript
通过滑动翻页效果实现和移动端click事件问题
2021/01/26 Javascript
vite2.0+vue3移动端项目实战详解
2021/03/03 Vue.js
Python linecache.getline()读取文件中特定一行的脚本
2008/09/06 Python
使用pip发布Python程序的方法步骤
2018/10/11 Python
Python设计模式之外观模式实例详解
2019/01/17 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
python实现代码统计器
2019/09/19 Python
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
Joseph官网:英国小众奢侈品牌
2019/05/17 全球购物
升职自荐信范文
2013/10/05 职场文书
幼儿园庆六一游园活动方案
2014/01/29 职场文书
广告设计应届生求职信
2014/03/01 职场文书
环保建议书100字
2014/05/14 职场文书
市委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
2014年劳动部工作总结
2014/12/11 职场文书
运动会通讯稿300字
2015/07/20 职场文书
客户答谢会致辞
2015/07/30 职场文书
2016年暑假学生家长评语
2015/12/01 职场文书
Android 界面一键变灰 深色主题工具类
2022/04/28 Java/Android