vue响应式系统之observe、watcher、dep的源码解析


Posted in Javascript onApril 09, 2019

Vue的响应式系统

Vue 最独特的特性之一,是其非侵入性的响应式系统。数据模型仅仅是普通的JavaScript 对象,而当你修改它们时,视图会进行更新,这使得状态管理非常简单直接,我们可以只关注数据本身,而不用手动处理数据到视图的渲染,避免了繁琐的 DOM 操作,提高了开发效率。

vue 的响应式系统依赖于三个重要的类:Dep 类、Watcher 类、Observer 类,然后使用发布订阅模式的思想将他们揉合在一起(不了解发布订阅模式的可以看我之前的文章发布订阅模式与观察者模式)。

vue响应式系统之observe、watcher、dep的源码解析

Observer

Observe扮演的角色是发布者,他的主要作用是调用defineReactive函数,在defineReactive函数中使用Object.defineProperty 方法对对象的每一个子属性进行数据劫持/监听。

部分代码展示

defineReactive函数,Observe的核心,劫持数据,在setter中向Dep(调度中心)添加观察者,在getter中通知观察者更新。

function defineReactive(obj, key, val, customSetter, shallow){
  //监听属性key
  //关键点:在闭包中声明一个Dep实例,用于保存watcher实例
  var dep = new Dep();

  var getter = property && property.get;
  var setter = property && property.set;
  
  if(!getter && arguments.length === 2) {
    val = obj[key];
  }
  //执行observe,监听属性key所代表的值val的子属性
  var childOb = observe(val);
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter() {
      //获取值
      var value = getter ? getter.call(obj) : val;
      //依赖收集:如果当前有活动的Dep.target(观察者--watcher实例)
      if(Dep.target) {
        //将dep放进当前观察者的deps中,同时,将该观察者放入dep中,等待变更通知
        dep.depend();
        if(childOb) {
          //为子属性进行依赖收集
          //其实就是将同一个watcher观察者实例放进了两个dep中
          //一个是正在本身闭包中的dep,另一个是子属性的dep
          childOb.dep.depend();
        }
      }
      return value
    },
    set: function reactiveSetter(newVal) {
      //获取value
      var value = getter ? getter.call(obj) : val;
      if(newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      if(setter) {
        setter.call(obj, newVal);
      } else {
        val = newVal;
      }
      //新的值需要重新进行observe,保证数据响应式
      childOb = observe(newVal);
      //关键点:遍历dep.subs,通知所有的观察者
      dep.notify();
    }
  });
}

Dep

Dep 扮演的角色是调度中心/订阅器,主要的作用就是收集观察者Watcher和通知观察者目标更新。每个属性拥有自己的消息订阅器dep,用于存放所有订阅了该属性的观察者对象,当数据发生改变时,会遍历观察者列表(dep.subs),通知所有的watch,让订阅者执行自己的update逻辑。

部分代码展示

Dep的设计比较简单,就是收集依赖,通知观察者

//Dep构造函数
var Dep = function Dep() {
  this.id = uid++;
  this.subs = [];
};
//向dep的观察者列表subs添加观察者
Dep.prototype.addSub = function addSub(sub) {
  this.subs.push(sub);
};
//从dep的观察者列表subs移除观察者
Dep.prototype.removeSub = function removeSub(sub) {
  remove(this.subs, sub);
};
Dep.prototype.depend = function depend() {
  //依赖收集:如果当前有观察者,将该dep放进当前观察者的deps中
  //同时,将当前观察者放入观察者列表subs中
  if(Dep.target) {
    Dep.target.addDep(this);
  }
};
Dep.prototype.notify = function notify() {
  // 循环处理,运行每个观察者的update接口
  var subs = this.subs.slice();
  for(var i = 0, l = subs.length; i < l; i++) {
    subs[i].update();
  }
};

//Dep.target是观察者,这是全局唯一的,因为在任何时候只有一个观察者被处理。
Dep.target = null;
//待处理的观察者队列
var targetStack = [];

function pushTarget(_target) {
  //如果当前有正在处理的观察者,将他压入待处理队列
  if(Dep.target) {
    targetStack.push(Dep.target);
  }
  //将Dep.target指向需要处理的观察者
  Dep.target = _target;
}

function popTarget() {
  //将Dep.target指向栈顶的观察者,并将他移除队列
  Dep.target = targetStack.pop();
}

Watcher

Watcher扮演的角色是订阅者/观察者,他的主要作用是为观察属性提供回调函数以及收集依赖(如计算属性computed,vue会把该属性所依赖数据的dep添加到自身的deps中),当被观察的值发生变化时,会接收到来自dep的通知,从而触发回调函数。,

部分代码展示

Watcher类的实现比较复杂,因为他的实例分为渲染 watcher(render-watcher)、计算属性 watcher(computed-watcher)、侦听器 watcher(normal-watcher)三种,
这三个实例分别是在三个函数中构建的:mountComponent 、initComputed和Vue.prototype.$watch。

normal-watcher:我们在组件钩子函数watch 中定义的,都属于这种类型,即只要监听的属性改变了,都会触发定义好的回调函数,这类watch的expression是我们写的回调函数的字符串形式。

computed-watcher:我们在组件钩子函数computed中定义的,都属于这种类型,每一个 computed 属性,最后都会生成一个对应的 watcher 对象,但是这类 watcher 有个特点:当计算属性依赖于其他数据时,属性并不会立即重新计算,只有之后其他地方需要读取属性的时候,它才会真正计算,即具备 lazy(懒计算)特性。这类watch的expression是计算属性中的属性名。

render-watcher:每一个组件都会有一个 render-watcher, 当 data/computed 中的属性改变的时候,会调用该 render-watcher 来更新组件的视图。这类watch的expression是 function () {vm._update(vm._render(), hydrating);}。

除了功能上的区别,这三种 watcher 也有固定的执行顺序,分别是:computed-render -> normal-watcher -> render-watcher

这样安排是有原因的,这样就能尽可能的保证,在更新组件视图的时候,computed 属性已经是最新值了,如果 render-watcher 排在 computed-render 前面,就会导致页面更新的时候 computed 值为旧数据。

这里我们只看其中一部分代码

function Watcher(vm, expOrFn, cb, options, isRenderWatcher) {
  this.vm = vm;
  if(isRenderWatcher) {
    vm._watcher = this;
  }
  vm._watchers.push(this);
  // options
  if(options) {
    this.deep = !!options.deep; //是否启用深度监听
    this.user = !!options.user; //主要用于错误处理,侦听器 watcher的 user为true,其他基本为false
    this.lazy = !!options.lazy; //惰性求职,当属于计算属性watcher时为true
    this.sync = !!options.sync; //标记为同步计算,三大类型暂无
  } else {
    this.deep = this.user = this.lazy = this.sync = false;
  }
  //初始化各种属性和option
  
  //观察者的回调
  //除了侦听器 watcher外,其他大多为空函数
  this.cb = cb;
  this.id = ++uid$1; // 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 = expOrFn.toString();
  // 解析expOrFn,赋值给this.getter
  // 当是渲染watcher时,expOrFn是updateComponent,即重新渲染执行render(_update)
  // 当是计算watcher时,expOrFn是计算属性的计算方法
  // 当是侦听器watcher时,expOrFn是watch属性的名字,this.cb就是watch的handler属性
  
  //对于渲染watcher和计算watcher来说,expOrFn的值是一个函数,可以直接设置getter
  //对于侦听器watcher来说,expOrFn是watch属性的名字,会使用parsePath函数解析路径,获取组件上该属性的值(运行getter)
  
  //依赖(订阅目标)更新,执行update,会进行取值操作,运行watcher.getter,也就是expOrFn函数
  if(typeof expOrFn === 'function') {
    this.getter = expOrFn;
  } else {
    this.getter = parsePath(expOrFn);
  }
  this.value = this.lazy ? undefined : this.get();
};  
//取值操作
Watcher.prototype.get = function get() {
  //Dep.target设置为该观察者
  pushTarget(this);
  var vm = this.vm;
  //取值
  var value = this.getter.call(vm, vm);
  //移除该观察者
  popTarget();
  return value
};
Watcher.prototype.addDep = function addDep(dep) {
  var id = dep.id;
  if(!this.newDepIds.has(id)) {
    //为观察者的deps添加依赖dep
    this.newDepIds.add(id);
    this.newDeps.push(dep);
    if(!this.depIds.has(id)) {
      //为dep添加该观察者
      dep.addSub(this);
    }
  }
};
//当一个依赖改变的时候,通知它update
Watcher.prototype.update = function update() {
  //三种watcher,只有计算属性 watcher的lazy设置了true,表示启用惰性求值
  if(this.lazy) {
    this.dirty = true;
  } else if(this.sync) {
    //标记为同步计算的直接运行run,三大类型暂无,所以基本会走下面的queueWatcher
    this.run();
  } else {
    //将watcher推入观察者队列中,下一个tick时调用。
    //也就是数据变化不是立即就去更新的,而是异步批量去更新的
    queueWatcher(this);
  }
};

//update执行后,运行回调cb
Watcher.prototype.run = function run() {
  if(this.active) {
    var value = this.get();
    if(
      value !== this.value ||
      isObject(value) ||
      this.deep
    ) {
      var oldValue = this.value;
      this.value = value;
      //运行 cb 函数,这个函数就是之前传入的watch中的handler回调函数
      if(this.user) {
        try {
          this.cb.call(this.vm, value, oldValue);
        } catch(e) {
          handleError(e, this.vm, ("callback for watcher \"" + (this.expression) + "\""));
        }
      } else {
        this.cb.call(this.vm, value, oldValue);
      }
    }
  }
};

//对于计算属性,当取值计算属性时,发现计算属性的watcher的dirty是true
//说明数据不是最新的了,需要重新计算,这里就是重新计算计算属性的值。
Watcher.prototype.evaluate = function evaluate() {
  this.value = this.get();
  this.dirty = false;
};

//收集依赖
Watcher.prototype.depend = function depend() {
  var this$1 = this;

  var i = this.deps.length;
  while(i--) {
    this$1.deps[i].depend();
  }
};

总结

Observe是对数据进行监听,Dep是一个订阅器,每一个被监听的数据都有一个Dep实例,Dep实例里面存放了N多个订阅者(观察者)对象watcher。

被监听的数据进行取值操作时(getter),如果存在Dep.target(某一个观察者),则说明这个观察者是依赖该数据的(如计算属性中,计算某一属性会用到其他已经被监听的数据,就说该属性依赖于其他属性,会对其他属性进行取值),就会把这个观察者添加到该数据的订阅器subs里面,留待后面数据变更时通知(会先通过观察者id判断订阅器中是否已经存在该观察者),同时该观察者也会把该数据的订阅器dep添加到自身deps中,方便其他地方使用。

被监听的数据进行赋值操作时(setter)时,就会触发dep.notify(),循环该数据订阅器中的观察者,进行更新操作。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过 Dom 方法提高 innerHTML 性能
Mar 26 Javascript
javascript 表格排序和表头浮动效果(扩展SortTable)
Apr 07 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
Aug 13 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
Feb 21 Javascript
查找页面中所有类为test的结点的方法
Mar 28 Javascript
jquery判断单选按钮radio是否选中的方法
May 05 Javascript
浅谈Javascript数组索引
Jul 29 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
Jan 10 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
May 11 Javascript
JS中call和apply函数用法实例分析
Jun 20 Javascript
详解Vue内部怎样处理props选项的多种写法
Nov 06 Javascript
vue 需求 data中的数据之间的调用操作
Aug 05 Javascript
浅谈发布订阅模式与观察者模式
Apr 09 #Javascript
vue使用keep-alive保持滚动条位置的实现方法
Apr 09 #Javascript
浅谈JavaScript闭包
Apr 09 #Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
Apr 09 #Javascript
webpack4实现不同的导出类型
Apr 09 #Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
Apr 09 #Javascript
基于three.js实现的3D粒子动效实例代码
Apr 09 #Javascript
You might like
destoon实现调用图文新闻的方法
2014/08/21 PHP
php数组排序usort、uksort与sort函数用法
2014/11/17 PHP
php计算整个目录大小的方法
2015/06/19 PHP
PHP使用PDO调用mssql存储过程的方法示例
2017/10/07 PHP
PHP设计模式(八)装饰器模式Decorator实例详解【结构型】
2020/05/02 PHP
javascript 实现简单的table排序及table操作练习
2012/12/28 Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
2014/03/28 Javascript
javascript初学者常用技巧
2014/09/02 Javascript
js实现不重复导入的方法
2016/03/02 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
2016/03/22 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
2016/07/22 Javascript
学习vue.js中class与style绑定
2016/12/03 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
2016/12/16 Javascript
微信小程序 页面跳转传递值几种方法详解
2017/01/12 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
2017/07/21 Javascript
Angular2+如何去除url中的#号详解
2017/12/20 Javascript
解决Layui数据表格中checkbox位置不居中的方法
2018/08/15 Javascript
JavaScript常见事件处理程序实例总结
2019/01/05 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
2019/07/16 Javascript
vue 全局环境切换问题
2019/10/27 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
2019/12/16 Javascript
js实现橱窗展示效果
2020/01/11 Javascript
解决vue 退出动画无效的问题
2020/08/09 Javascript
使用django-suit为django 1.7 admin后台添加模板
2014/11/18 Python
Python线性方程组求解运算示例
2018/01/17 Python
如何使用 Pylint 来规范 Python 代码风格(来自IBM)
2018/04/06 Python
用python生成1000个txt文件的方法
2018/10/25 Python
详解Python函数式编程—高阶函数
2019/03/29 Python
Python学习笔记之pandas索引列、过滤、分组、求和功能示例
2019/06/03 Python
Django中如何使用sass的方法步骤
2019/07/09 Python
东南亚地区最大的购物网站Lazada新加坡站点:Lazada.sg
2016/07/17 全球购物
建筑工程自我鉴定
2013/10/18 职场文书
回门宴父母答谢词
2014/01/26 职场文书
会计专业自荐信
2014/06/03 职场文书
Python使用UDP实现720p视频传输的操作
2021/04/24 Python
Windows Server 2022 超融合部署(图文教程)
2022/06/25 Servers