关于前端:一文带你了解vue2之响应式原理

7次阅读

共计 4746 个字符，预计需要花费 12 分钟才能阅读完成。

在面试的过程中也会问到：请论述 vue2 的响应式原理？，但凡呈现论述或者了解，个别都是知无不言言无不尽，晓得多少说多少。接下来，我来谈谈本人的了解，切记不要去背，肯定要了解之后，用本人的语言来形容进去。

那什么是响应式呢？响应式就是当对象自身（对象的增删值）或者对象属性（从新赋值）发生变化时，将会运行一些函数，最常见的就是 render 函数。

在具体实现上，vue 用到了几个核心部件，每一个部件都解决一个问题：

Observer
Dep
Watcher
Scheduler

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

为了实现这一点，Observer 把对象的每个属性通过 Object.defineProperty 转换为带有 getter 和setter的属性，这样一来，咱们拜访或设置属性时，会别离调用 getter 和 setter 办法，vue 就有机会做一些别的事件。

Observer 是 vue 外部的结构器，咱们能够通过 Vue 提供的静态方法 Vue.observable(object) 间接的应用该性能。

示例：

<body>
    <script src="./vue.min.js"></script>
    <script>
      let obj = {
        name:"法医",
        age:100,
        like:{
          a:"琴",
          b:"棋"
        },
        character:[{c:"性情好"},{d:"真帅哦"}]
      }
      Vue.observable(obj);
    </script>
  </body>

运行后果：

输入后果中的 ... 代表数据是响应式的，Invoke property getter示意调用了属性的 getter 办法。如果对象中还存在对象，那么它会深度递归遍历，让所有的数据都是响应式的数据。

如果说在组件当中，配置中的 data 也会返回一个响应式数据，这一过程在组件生命周期中产生在 beforeCreate 之后，created之后

Observer 在具体实现上，它会递归遍历对象的所有属性，以实现数据响应式的转换。如果说一个属性一开始并不存在于对象中，是前面增加上的，那么这种属性是检测不到的，所以像之前应用 obj.e = 3 新增一个 e:3 也是检测不到的，因为之前对象中没有。然而到了 vue3，应用了 proxy，那就能够检测到了。因而在 vue2 中提供了 $set 和$delete两个实例办法，咱们能够通过这两个实例办法对已有响应式对象增加或删除属性。

示例：

通过对昵称的删除和年龄的增加，比照 $set、$delete 和delete、set


<body>
    <div id="app">
      <p> 昵称：{{obj.name}}</p>
      <p> 年龄：{{obj.age}}</p>
         <!-- 首先通过 delete obj.name 形式进行昵称的删除 -->
      <button @click="delete obj.name"> 删除昵称 </button>
      <button> 增加年龄 </button>
    </div>

    <script src="./vue.min.js"></script>
    <script>
     let vm = new Vue({
        el:"#app",
        data(){
          return{
            obj:{name:"法医"}
          }
        }
      })
    </script>
  </body>

运行后果：

从运行后果来看，在没有点击 删除昵称 按钮之前 vm.obj 输入的 name 是响应式数据，点击删除昵称按钮之后再次打印 vm.obj 此时数据曾经被删除，然而页面上昵称法医并未删除，vue 收不到属性被删除的告诉，因为 delete obj.name 是不会被检测到的

接下来应用 $delete 进行昵称的删除操作：

<body>
    <div id="app">
      <p> 昵称：{{obj.name}}</p>
      <p> 年龄：{{obj.age}}</p>
      <!-- 应用 $delete 删除昵称 -->
      <button @click="$delete(obj,'name')"> 删除昵称 </button>
      <button> 增加年龄 </button>
    </div>

    <script src="./vue.min.js"></script>
    <script>
     let vm = new Vue({
        el:"#app",
        data(){
          return{
            obj:{name:"法医"}
          }
        }
      })
    </script>
  </body>

运行后果：

当应用 $delete 的时候 vue 就会收到告诉了，进行昵称删除操作，页面也会及时响应。

同理，咱们来看看 $set 和set

 <body>
    <div id="app">
      <p> 昵称：{{obj.name}}</p>
      <p> 年龄：{{obj.age}}</p>
      <!--  -->
      <button @click="$delete(obj,'name')"> 删除昵称 </button>
       <!-- 应用 obj.age=100 增加年龄 -->
      <button @click="obj.age=100"> 增加年龄 </button>
    </div>

    <script src="./vue.min.js"></script>
    <script>
     let vm = new Vue({
        el:"#app",
        data(){
          return{
            obj:{name:"法医"}
          }
        }
      })
    </script>
  </body>

运行后果：

当应用传统形式 obj.age=100 向对象增加属性的时候，其实能够增加胜利的，只是数据并不是响应式的，页面上没有显示年龄。

接下来就应用 $set 增加属性：

<body>
    <div id="app">
      <p> 昵称：{{obj.name}}</p>
      <p> 年龄：{{obj.age}}</p>
      <!-- 应用 $set 增加年龄 -->
      <button @click="$delete(obj,'name')"> 删除昵称 </button>
      <button @click="$set(obj,'age','100')"> 增加年龄 </button>
    </div>

    <script src="./vue.min.js"></script>
    <script>
     let vm = new Vue({
        el:"#app",
        data(){
          return{
            obj:{name:"法医"}
          }
        }
      })
    </script>
  </body>

运行后果：

高深莫测，应用 $set 增加的属性是响应式的，age:(...)三个点很显著。

以上就是针对对象的检测，那么数组呢？数组又是怎么检测的呢？Object 和 Array 的变化检测解决形式是不同的。

对于数组,vue 会更改它的隐式原型，之所以这样做，是因为 vue 须要监听那些可能扭转数组内容的办法。

总之，Observer 的指标，就是要让一个对象，它的属性的读取、赋值，外部数组的变动都要可能被 vue 检测到，这样能力让数据转换为响应式数据。

## 🌼 Dep

当初有两个问题没有解决，就是读取属性时要做什么事件？属性变动时要做什么事件？这个问题就须要 Dep 来解决。

Dep 的全称是 Dependency，示意 依赖 的意思，

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

记录依赖：是谁在用我
派发更新：我变了，我要告诉那些用到我的人

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

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

当初又有一个问题，就是 Dep 如何晓得是谁在用我？

要解决这个问题，须要依附另一个货色，就是 Watcher

当某个函数执行的过程中，用到了响应式数据，响应式数据是无奈晓得是哪个函数在用本人，因而，vue 通过一种奇妙的方法来解决这个问题：

咱们不要间接执行函数，而是把函数交给一个叫做 watcher 的货色去执行，watcher 是一个对象，每个这样的函数执行时都应该创立一个 watcher，通过 watcher 去执行。watcher 会创立一个全局变量，让全局变量记录以后负责执行的 watcher 等于本人，而后再去执行函数，在函数执行的过程中，如果产生了依赖记录dep.depend()，那么 Dep 就会把这个全局变量记录下来，示意：有一个 watcher 用到了我这个属性

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

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

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

当数据变动时，dep 就会告诉该 watcher，而 watcher 将从新运行 render 函数，从而让界面从新渲染，同时从新记录以后的依赖。

当初还剩最初一个问题，就是 Dep 告诉 watcher 之后，响应数据又屡次扭转，造成 watcher 执行反复运行对应函数，就有可能导致函数频繁运行，从而导致效率低下

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

state.a = "new data";
state.b = "new data";
state.c = "new data";
state.d = "new data";

这样必定是不行的，因而，watcher 收到派发更新的告诉后，它不会立刻执行对应 render 函数，当然不仅仅是 render 函数，还有可能是其它的函数，而是把本人交给一个叫 调度器 的货色，在调度器外面有个队列，能够认为是一个数组，这个队列数组中记录了以后要运行哪些 watcher，调度器保护一个执行队列，在队列中同一个 watcher 只会存在一次，队列中的 watcher 不是立刻执行，它会通过一个叫做 nextTick 的工具办法，把这些须要执行的 watcher 放入到 事件循环的微队列 中，nextTick 的具体做法是通过 Promise 实现的，nextTick 其实就是一个函数

nextTick((fn)=>{Promise.resolve().then(fn);// 通过这种形式就跑到微队列中去了
})

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

咱们简略过一遍这个流程图：

原始对象通过 Observer 将转换成一个响应式的对象，具备 getter 和setter办法，而后就静静期待着。
忽然有一天，雷雨交加，有一个 render 函数要执行，但不是间接就执行了，而是交给 watcher 来执行，watcher 通过设置全局变量的形式读取数据，因为读取了数据，所以会触发响应式对象的 getter，随后 getter 会从全局变量的地位读取到以后正在读取的 watcher 并把 watcher 收集到 Dep 中。
通过以上步骤页面就会被渲染进去了。
又是忽然的一天哈，风和日丽，我触发了一个按钮或者事件，不论干了什么，反正是数据扭转了，进行新的步骤——派发更新，随后告诉 watcher，我变了哦，你给我马上搞定这件事件，然而 watcher 并不是立刻就执行的，因为数据变动有时候不是一个，而是很多，立刻执行的话会反复执行很多 render 函数或者其它数据变动的函数，执行效率会变低。然而 watcher 把本人交给调度器Scheduler
调度器会把 watcher 增加到队列中，当然在队列中也不会执行的，而是将队列交给 nextTick 队列，nextTick 外面的函数全是在微队列的，等同步代码执行实现后，会异步地执行函数 fn1、fn2、watcher 等等，这一步相当于从新执行了 watcher，而后又从新执行了 render 函数，就这样地周而复始。

😛 好了，以上就是我明天的分享，大家对于 vue2 响应式原理还有什么问题能够在评论区探讨鸭～

记得点赞 👍 反对一下哦～ 😘

正文完