vue官方阐述

cn.vuejs.org/v2/guide/re…

首先说明vue2之响应式原理不是响应式页面, 那是CSS3的媒体查询

我们这叫数据响应式

数据响应式并不仅限于，数据变化导致 视图页面 变化

响应式数据的最终目标，是当对象本身或对象属性发生变化时，将会运行一些函数，最常见的就是render函数。

例子：数据变化时，运行render和watcher

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h1>{{title}}</h1>
    </div>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          title: 'Hello Vue'
        },
        created() {
          // 传入一个函数，它会立即运行该函数，之后，如果它里面的数据有变化，会重新运行
          this.$watch(() => {
            console.log('watcher run', this.title);
          });
        },
        render(h) {
          console.log('render');
          return h('h1', this.title);
        },
      });
    </script>
  </body>
</html>

效果图如下：

例子：响应式实现原理1 Object.defineProperty

数据劫持 ES5 API Object.defineProperty

在具体实现上，vue用到了几个核心部件：

Observer
Dep
Watcher
Scheduler

Observer

Observer要实现的目标非常简单，就是把一个普通的对象转换为响应式的对象

为了实现这一点，Observer把对象的每个属性通过Object.defineProperty转换为带有getter和setter的属性，这样一来，当访问或设置属性时，vue就有机会做一些别的事情。

`Vue.observable( object )`

Observer是vue内部的构造器，我们可以通过Vue提供的静态方法Vue.observable( object )间接的使用该功能。

在组件生命周期中，这件事发生在beforeCreate之后，created之前。

具体实现上，它会递归遍历对象的所有属性，以完成深度的属性转换。

例子

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
  var user = {
    name: 'monica',
    age: 17,
    addr: {
      province: '黑龙江',
      city: '哈尔滨',
    },
    students: [
      { name: '小王', age: 5 },
      { name: '小张', age: 6 },
    ],
  };
  Vue.observable(user);
</script>

对象

由于遍历时只能遍历到对象的当前属性，因此无法监测到将来动态增加或删除的属性，因此vue提供了$set和$delete两个实例方法，让开发者通过这两个实例方法对已有响应式对象添加或删除属性。

  var user = {
    name: 'monica',
    age: 17,
    addr: {
      province: '黑龙江',
      city: '哈尔滨',
    },
    students: [
      { name: '小王', age: 5 },
      { name: '小张', age: 6 },
    ],
  };
  Vue.observable(user);
  // 从此以后，user里面所有的东西都是响应式的

  // 真的如此吗？
  // user.sex = '女'; // 此时，数据响应式的处理已经结束了，此时属性是一个普通属性
  // delete user.age; // vue能知道我删除了属性吗？不能！

例子：使用`$set`和`$delete`两个实例方法

数组

对于数组，vue会更改它的隐式原型，之所以这样做，是因为vue需要监听那些可能改变数组内容的方法

例子1 数组的隐式原型不等于Array的原型

例子2 查看vue中数组原型链

例子3 数组针对下标的读取和修改没有响应式

例子4 如何通过响应式修改数组索引为0（n）的元素

法1： Vue.$set

法2：可监控的方法

Observer的目标

总之，Observer的目标，就是要让一个对象，它属性的读取、赋值，内部数组的变化都要能够被vue感知到。

Dep

这里有两个问题没解决，就是读取属性时要做什么事，而属性变化时要做什么事，这个问题需要依靠Dep来解决。

Dep的含义是Dependency，表示依赖的意思。

例子

Dep实例

Vue会为响应式对象中的每个属性、对象本身、数组本身创建一个Dep实例，每个Dep实例都有能力做以下两件事：

记录依赖：

是谁在用我

派发更新：

我变了，我要通知那些用到我的人

例子有多少个dep

对象本身有dep,每一个属性有dep，dep是根据构造函数new Dep()创建的

下面user对象本身也有一个dep,比如 this.$set(user, "name", "monica")时

下面共有8个

this.hobbies = ["唱歌"] dep7在监听

this.hobbies.push("唱歌") dep8在监听

{ // 对象本身的dep1
  title: 'Hello Vue',  //title属性的dep2
  //user属性的dep3
  user: { // user对象本身的dep4
      age: '', //age属性的dep5
  },
  name:'monica',//name属性的dep6
  //hobbies属性的dep7
  hobbies: ['读书', '音乐', '钢管'], //hobbies数组的dep8
}

源码 vue/src/core/observer/index.js

dep.depend() 收集依赖

dep.notify() 派发更新

  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      const value = getter ? getter.call(obj) : val
      if (Dep.target) {
        dep.depend()
        if (childOb) {
          childOb.dep.depend()
          if (Array.isArray(value)) {
            dependArray(value)
          }
        }
      }
      return value
    },
    set: function reactiveSetter (newVal) {
      const value = getter ? getter.call(obj) : val
      /* eslint-disable no-self-compare */
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      /* eslint-enable no-self-compare */
      if (process.env.NODE_ENV !== 'production' && customSetter) {
        customSetter()
      }
      // #7981: for accessor properties without setter
      if (getter && !setter) return
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      childOb = !shallow && observe(newVal)
      dep.notify()
    }
  })

当读取响应式对象的某个属性时，它会进行依赖收集：有人用到了我

当改变某个属性时，它会派发更新：那些用我的人听好了，我变了

例子数据更新没调用render

例子为啥设置一个render中没有的数据会触发render

因为这个user对象也会触发render

Watcher

这里又出现一个问题，就是Dep如何知道是谁在用我？

要解决这个问题，需要依靠另一个东西，就是Watcher。

当某个函数执行的过程中，用到了响应式数据，响应式数据是无法知道是哪个函数在用自己的

因此，vue通过一种巧妙的办法来解决这个问题

我们不要直接执行函数，而是把函数交给一个叫做watcher的东西去执行，watcher是一个对象，每个这样的函数执行时都应该创建一个watcher，通过watcher去执行

watcher会设置一个全局变量，让全局变量记录当前负责执行的watcher等于自己，然后再去执行函数，在函数的执行过程中，如果发生了依赖记录dep.depend()，那么Dep就会把这个全局变量记录下来，表示：有一个watcher用到了我这个属性

例子

源码：vue/src/core/observer/watcher.js

当Dep进行派发更新时，它会通知之前记录的所有watcher：我变了

每一个vue组件实例，都至少对应一个watcher，该watcher中记录了该组件的render函数。

watcher首先会把render函数运行一次以收集依赖，于是那些在render中用到的响应式数据就会记录这个watcher。

当数据变化时，dep就会通知该watcher，而watcher将重新运行render函数，从而让界面重新渲染同时重新记录当前的依赖。

Scheduler调度器

现在还剩下最后一个问题，就是Dep通知watcher之后，如果watcher执行重运行对应的函数，就有可能导致函数频繁运行，从而导致效率低下

试想，如果一个交给watcher的函数，它里面用到了属性a、b、c、d，那么a、b、c、d属性都会记录依赖，于是下面的代码将触发4次更新：

state.a = "new data"; // 某些 watcher 想运行了，给调度器
state.b = "new data"; // 某些 watcher 想运行了，给调度器
state.c = "new data"; // 某些 watcher 想运行了，给调度器
state.d = "new data"; // 某些 watcher 想运行了，给调度器

这样显然是不合适的，因此，watcher收到派发更新的通知后，实际上不是立即执行对应函数，而是把自己交给一个叫调度器的东西

调度器维护一个执行队列，该队列同一个watcher仅会存在一次，队列中的watcher不是立即执行，它会通过一个叫做nextTick的工具方法，把这些需要执行的watcher放入到事件循环的微队列中，nextTick的具体做法是通过Promise完成的

nextTick 通过 this.$nextTick 暴露给开发者

nextTick 的具体处理方式见：cn.vuejs.org/v2/guide/re…

源码：vue/src/core/util/next-tick.js

export function nextTick (cb?: Function, ctx?: Object) {
  let _resolve
  callbacks.push(() => {
    if (cb) {
      try {
        cb.call(ctx)
      } catch (e) {
        handleError(e, ctx, 'nextTick')
      }
    } else if (_resolve) {
      _resolve(ctx)
    }
  })
  if (!pending) {
    pending = true
    timerFunc()
  }
  // $flow-disable-line
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}

也就是说，当响应式数据变化时，render函数的执行是异步的，并且在微队列中

总体流程

测试题点击2次按钮console一共有啥？

题目1

回答：第一次创造实例的时候是同步的，第一次点击按钮从微队列中取，第二次点击的时候不会触发render函数，因为值没变

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h1 id="title">{{a}}, {{b}}, {{c}}, {{d}}</h1>
      <button @click="handleChange">change all</button>
    </div>
    <script src="./vue.min.js"></script>
    <script>
      new Vue({
        el: '#app',
        data() {
          return {
            a: 1,
            b: 2,
            c: 3,
            d: 4,
          };
        },
        created() {
          console.log(this);
        },
        methods: {
          handleChange() {
            this.$nextTick(() => {
              var app = document.getElementById('title');
              console.log(app.innerText); // 此时 界面更新了吗？
            });
            this.a = 10; // render被添加到nextTick
            this.b = 11; // render被添加到nextTick
            this.c = 12; // render被添加到nextTick
            this.d = 13; // render被添加到nextTick
          },
        },
        render(h) {
          console.log('render');
          return h('div', [
            h(
              'h1',
              { attrs: { id: 'title' } },
              `${this.a},${this.b},${this.c},${this.d}`
            ),
            h(
              'button',
              {
                on: {
                  click: this.handleChange,
                },
              },
              'change all'
            ),
          ]);
        },
      });

      console.log('1');
    </script>
  </body>
</html>

题目2

handleChange() {
  this.a = 10; // render被添加到nextTick
  this.$nextTick(() => {
    var app = document.getElementById('title');
    console.log(app.innerText); // 此时 界面更新了吗？
  });
  // this.a = 10; // render被添加到nextTick
  this.b = 11; // render被添加到nextTick
  this.c = 12; // render被添加到nextTick
  this.d = 13; // render被添加到nextTick
},

Vue2之响应式原理