评论

响应式原理解析

数据响应式系统是Vue最显著的一个特性,本篇文章介绍了响应式系统的原理,可以帮助我们对Vue的响应式系统有更深入的了解。

Vue响应式

前言

数据响应式系统是Vue最显著的一个特性,我们通过Vue官方文档回顾一下。

数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时,视图会进行更新。这使得状态管理非常简单直接,不过理解其工作原理同样重要,这样你可以避开一些常见的问题。

现在是时候深入一下了!
本文针对响应式系统的原理进行一个详细介绍。

响应式是什么

我们先来看一个例子

<div id="app">
  <p>{{color}}</p>
  <button @click="changeColor">change color!</button>
</div>

new Vue({
  el: '#app',
  data() {
    color: 'blue'
  },
  methods: {
    changeColor() {
      this.color = 'yellow';
    }
  }
})

当我们点击按钮的时候,视图的p标签文本就会从 blue改变成yellow

Vue要完成这次更新,其实需要做两件事情:

  1. 监听数据color的变化。
  2. 当数据color更新变化时,自动通知依赖该数据的视图。

换成专业那么一点点点的名词就是利用数据劫持/数据代理去进行依赖收集发布订阅模式

我们只需要记住一句话:在getter中收集依赖,在setter中触发依赖

如何追踪侦测数据的变化

首先有个问题,如何侦测一个对象的变化?

目前来说,侦测对象变化有两种方法。大家都知道的!

Object.defineProperty

vue 2.x就是使用Object.defineProperty来数据响应式系统的。但是用此方法来来侦测变化会有很多缺陷。例如:

  1. Object.defineProperty无法监控到数组下标的变化,导致通过数组下标添加元素,不能实时响应;
  2. Object.defineProperty只能劫持对象的属性,从而需要对每个对象,每个属性进行遍历,如果,属性值是对象,还需要深度遍历。

本文也是利用Object.defineProperty来介绍响应式系统。

Proxy

vue3就是通过proxy实现响应式系统的。而且在国庆期间已经发布pre-alpha版本

相比旧的Object.defineProperty, proxy可以代理整个对象,并且提供了多个traps,可以实现诸多功能。此外,Proxy支持代理数组的变化等等

当然proxy也有一个致命的缺点,就是无法通过polyfill模拟,兼容性较差。

依赖收集的重要角色 Dep Watcher

DepWatcher是数据响应式中两个比较重要的角色。

收集依赖的地方 Dep

因为在视图模板上可能有多处地方都引用同一个数据,所以要有一个地方去存放数据的依赖,这个地方就是Dep。

Dep主要维护一个依赖的数组,当我们利用render函数生成VNode的时候,会触发数据的getter,然后则会把依赖push到Dep的依赖数组中。

依赖是Watcher!

我们可以把Watcher理解成一个中介的角色,数据发生变化时,会触发数据的setter,然后通过遍历Dep中的依赖Watcher,然后Watcher通知额外的操作,额外的操作可能是更新视图、更新computed、更新watch等等…

原理实现

还是那句话:在getter中收集依赖,在setter中触发依赖

下面我们看看代码:

代码有点长,下面会有步骤来讲解一次。

/*
 * 劫持数据的getter、setter
 */
function defineReactive(data, key, val) {
  // 1-1:把color数据变成响应式
  const dep = new Dep();
  Object.defineProperty(data, key, {
    enumerable: true,
    configurable: true,
    get() {
      // 3. 因为模板编译watcher访问到了color,从而触发get方法,触发了收集依赖的方法
      dep.depend();
      return val;
    },
    set(newVal) {
      if (val === newVal) {
        return;
      }
      val = newVal;
      // 4-1. 假设我们通过 `this.color = 'yellow';`去更改`color`的值,就会触发set方法。
      dep.notify();
    }
  });
}
/*
 * dep类,收集依赖,和触发依赖
 */
class Dep {
  constructor() {
    this.subs = []; // 收集依赖的数组
  }

  // 收集依赖
  depend() {
    // 3-1. 通过外部的变量来添加到color的依赖中.
    if (window.target && !this.subs.includes(window.target)) {
      this.subs.push(window.target);
    }
  }

  // 通知依赖更新
  notify() {
    // 4-2. 遍历
    this.subs.forEach(watcher => {
      watcher.update();
    });
  }
}

/**
 * 数据与外部的中介
 */
class Watcher {
  constructor(expr, cb) {
    this.cb = cb;
    this.expr = expr;
    // 2-1. 这里触发了get方法
    this.value = this.get();
  }

  get() {
    // 2-2. 这里把自己(watcher)赋值给了外部其中的一个变量
    window.target = this;
    // 2-3. data[this.expr]触发了color的get
    const value = data[this.expr];
    window.target = undefined;
    return value;
  }

  update() {
    this.value = this.get();
    this.cb(this.value);
  }
}

下面我们来走一次流程。
括号里面的1-1,2-2是对应代码的执行点。

1. 把数据变成响应式

利用defineReactive把color数据变成响应式(1-1),执行过这个方法后,我们调用console.log(this.color)的时候可以触发get方法。同理当我们this.color = 'yellow'

注意:在Object.defineProperty上面初始化一个存放依赖的dep,这里其实是把dep作为数据color的一个私有变量,让get和set的方法可以访问到,也是我们经常说的闭包。

2. 编译模板创建watcher

假设我们现在编译模板遇到{{color}}
Vue就会创建一个Watchter,伪代码如下:

new Watcher('color', () => {
  // 当color发生变化的时候,会触发这里的方法。
});

这里高能!!

Watcher的构造函数里面调用了get()方法(2-2),把自己(watcher)赋值给了一个外部变量

然后再触发get方法(2-3)。

3. get中收集依赖

因为模板编译watcher访问到了color,从而触发get方法,触发了收集依赖的方法。

进入到dep.depend方法中(3-1),这里因为在Watcher中把自己存到了外部变量中,所以在dep.depend方法中可以收集到依赖

现在,依赖就被收集了。

4. 通过setter触发依赖

假设我们通过 this.color = 'yellow';去更改color的值,就会触发set方法,执行dep.notify(4-1)。

会遍历依赖数组,从而去触发Watcher的cb方法。 cb就是上面伪代码new Watcher的那个回调函数。

只要回调函数里面运行了操作dom方法,或者触发了diff算法更新dom,都可以把视图进行更新。

响应式简易流程大概就是这样了…

侦测数据变化的类型

其实数据监听变化有两种类型,一种是“”(push),另一种是“”(pull)。

React和Angular中的变化侦测都属于“拉”,就是说在数据发生变化的时候,它不知道哪个数据变了,然后会发送一个信号给框架,框架收到信号后,会进行一个暴力比对来找出那些dom节点需要重新渲染。Angular中使用的是脏检查,在React使用虚拟dom的diff。

vue的数据监听属于“推”。当数据发生变化时,就知道哪个数据发生变化了,从而去更新有此数据依赖的视图。

因此,框架知道的数据更新信息越多,也就可以进行更细粒度的更新。比如,直接通过dom api操作dom。

相对“拉”的力度是最粗的。看到这里,是不是觉得vue的更新效率最快。

我们看看下面的例子

<template>
  <div>{{a}}</div>
  <div>{{b}}</div>
</template>

这里我们看出模板只有a、b两个数据依赖,也就是说我们要创建两个闭包dep去存放两个watcher依赖,我们知道闭包的缺点就是内存泄露。如果有1000个数据依赖在模板上,每个数据所绑定的依赖就越多,依赖追踪在内存上的开销就会越大。

所以,从Vue.js2.0开始,它引入了虚拟dom,一个状态所绑定的依赖不再是具体的dom节点,而是一个组件,即一个组件一个Watcher。 这样状态变化后,会通知到组件,组件内部再使用虚拟 dom进行比对。这可以大大降低依赖数量,从而降低依赖追踪所消耗的内存。但并不是引入虚拟dom后,渲染速度变快了。准确的来说,应该是80%的场景下变得更快了,而剩下的20%反而变慢了

个人觉得,鱼和熊掌不可兼得。
“推”是牺牲内存来换更新速度。
“拉”则是牺牲更新速度来获取内存。

总结

Vue响应式的灵魂:在getter中收集依赖,在setter中触发依赖

我们再看看图,回顾一下整个流程。

  • 通过defineReactive,遍历data里面的属性,把数据的getter/setter劫持,用来收集和触发依赖。
  • 当外界通过Watcher读取数据时,会触发getter从而将Watcher添加到Dep依赖中。
  • 当数据发生变化时,会触发setter,从而Dep会向依赖(Wachter)发送通知。
  • Watcher收到通知后,会向外界发送通知,变化通知到外界后可能接触视图更新,也有可能触发用户的某个回调函数等等。

参考文献:《深入浅出Vue.js》

最后一次编辑于  2019-12-31  
点赞 2
收藏
评论
登录 后发表内容