【Vuejs】952- 一文带你了解vue2之响应式原理

Bertha 。 2023-01-19 09:55 24阅读 0赞

![6504a27d94e803461c05032e35a35e97.png][]

在面试的过程中也会问到：`请阐述vue2的响应式原理？`，凡是出现阐述或者理解，一般都是知无不言言无不尽，知道多少说多少。接下来，我来谈谈自己的理解，切记不要去背，一定要理解之后，用自己的语言来描述出来。

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

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

1.  Observer
2.  Dep
3.  Watcher
4.  Scheduler

## ???? Observer ##

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

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

![55f78f708f390c463f9a8f71edf8a162.png][] image.png

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方法。如果对象中还存在对象，那么它会深度递归遍历，让所有的数据都是响应式的数据。

![ec55879c91e2e7b2f3739684bed21c82.png][] image.png

如果说在组件当中，配置中的`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>
             
          <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>

**「运行结果」**：

![62568322d8458b36fc3ab98f5ca0ec15.gif][] GIF.gif

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

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

<body>
        <div id="app">
          <p>昵称：{
        {obj.name}}</p>
          <p>年龄：{
        {obj.age}}</p>
          
          <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>

**「运行结果」**：

![a41b011a257c7e87ec8e10197ba5d863.gif][] GIF222.gif

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

同理，我们来看看`$set`和`set`

<body>
        <div id="app">
          <p>昵称：{
        {obj.name}}</p>
          <p>年龄：{
        {obj.age}}</p>
          
          <button @click="$delete(obj,'name')">删除昵称</button>
           
          <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>

**「运行结果」**：

![85bf17642724b06090e29d5dcc709d33.gif][] GIF 2021-4-19 23-37-22.gif

当使用传统方式`obj.age=100`向对象添加属性的时候，其实可以添加成功的，只是数据并不是响应式的，页面上没有显示年龄。

接下来就使用`$set`添加属性：

<body>
        <div id="app">
          <p>昵称：{
        {obj.name}}</p>
          <p>年龄：{
        {obj.age}}</p>
          
          <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>

**「运行结果」**：

![ca58c73ac79bf5a9fd71b2a7fd5f9751.gif][] GIF 2021-4-19 23-41-57.gif

一目了然，使用`$set`添加的属性是响应式的，`age:(...)`三个点很明显。

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

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

![fe9a159726130577bb369898af3485be.png][] image.png

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

## ???? Dep ##

现在有两个问题没有解决，就是读取属性时要做什么事情？属性变化时要做什么事情？这个问题就需要`Dep`来解决。

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

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

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

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

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

![4d0bd97ea76489f22f6256b2dfc81037.png][] image.png

## Watcher ##

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

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

当某个函数执行的过程中，用到了响应式数据，响应式数据是无法知道是哪个函数在用自己，因此，vue通过一种巧妙的办法来解决这个问题：

我们不要直接执行函数，而是把函数交给一个叫做watcher的东西去执行，watcher是一个对象，每个这样的函数执行时都应该创建一个watcher，通过watcher去执行。watcher会创建一个全局变量，让全局变量记录当前负责执行的watcher等于自己，然后再去执行函数，在函数执行的过程中，如果发生了依赖记录`dep.depend()`，那么Dep就会把这个全局变量记录下来，表示：有一个watcher用到了我这个属性

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

![3bb950d905a05afbe29d3659387165ee.png][] image.png

每一个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";
    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函数的执行是异步的，并且在微队列中

## ???? 总体流程图 ##

![b235c6fb932b58b975f63c2ecffecfca.png][] image.png

我们简单过一遍这个流程图：

1.  原始对象通过`Observer`将转换成一个响应式的对象，具有`getter`和`setter`方法，然后就静静等待着。
2.  突然有一天，雷雨交加，有一个render函数要执行，但不是直接就执行了，而是交给watcher来执行，watcher通过设置全局变量的方式读取数据，因为读取了数据，所以会触发响应式对象的getter，随后getter会从全局变量的位置读取到当前正在读取的watcher并把watcher收集到Dep中。
3.  通过以上步骤页面就会被渲染出来了。
4.  又是突然的一天哈，风和日丽，我触发了一个按钮或者事件，不管干了什么，反正是数据改变了，进行新的步骤——`派发更新`，随后通知watcher，我变了哦，你给我马上搞定这件事情，但是watcher并不是立即就执行的，因为数据变动有时候不是一个，而是很多，立即执行的话会重复执行很多render函数或者其它数据变动的函数，执行效率会变低。然而watcher把自己交给调度器`Scheduler`
5.  调度器会把watcher添加到队列中，当然在队列中也不会执行的，而是将队列交给`nextTick`队列，nextTick里面的函数全是在微队列的，等同步代码执行完成后，会异步地执行函数fn1、fn2、watcher等等，这一步相当于重新执行了watcher，然后又重新执行了render函数，就这样地循环往复。

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

记得点赞 ???? 支持一下哦～ ????

![e7afa5e953f9acf85fdb88f891da21f3.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 120[\+篇原创系列汇总][Link 1]

![26b90f996bae9ad25be68442ef787982.gif][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 120+ 篇原创文章

[6504a27d94e803461c05032e35a35e97.png]: /images/20221021/3123aace6e964b779fd37a22ad4059ae.png
[55f78f708f390c463f9a8f71edf8a162.png]: /images/20221021/fccfbbe13779421f9ed5c02fe87e2c96.png
[ec55879c91e2e7b2f3739684bed21c82.png]: /images/20221021/497fc278f8014ccdb5f95e5977514d5b.png
[62568322d8458b36fc3ab98f5ca0ec15.gif]: /images/20221021/46bd071e97c2498da4dcf443a267ed03.png
[a41b011a257c7e87ec8e10197ba5d863.gif]: /images/20221021/8a5d736dc02c4e8487785ee544a4fb37.png
[85bf17642724b06090e29d5dcc709d33.gif]: /images/20221021/68b0527301e54fac88bb9b5d973d4e39.png
[ca58c73ac79bf5a9fd71b2a7fd5f9751.gif]: /images/20221021/f02b2dcde4664482a7349786bb144069.png
[fe9a159726130577bb369898af3485be.png]: /images/20221021/153148d499b44338a513eda393fb54f0.png
[4d0bd97ea76489f22f6256b2dfc81037.png]: /images/20221021/a022ab131d234cd4870604ef8418e267.png
[3bb950d905a05afbe29d3659387165ee.png]: /images/20221021/d19362681a5e415eb93ad1ce10ed78c1.png
[b235c6fb932b58b975f63c2ecffecfca.png]: /images/20221021/33335fbb18cd48e7bf912e93b12285d0.png
[e7afa5e953f9acf85fdb88f891da21f3.gif]: /images/20221021/0ad7d8fd6289418da32825262c9e1714.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[26b90f996bae9ad25be68442ef787982.gif]: /images/20221021/a5e3d372d7ee4102b97028482bbe0abb.png