一文带你了解vue2之响应式原理

人生不止有技术

共 10217字,需浏览 21分钟

 ·

2021-04-21 15:41









前端猎手
 链接每一位开发者,让编程更有趣儿!
关注


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

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

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

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

🌟 Observer

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

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

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

image.png

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

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

「示例」

通过对昵称的删除和年龄的添加,对比$set$deletedeleteset


<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>

「运行结果」

GIF.gif

从运行结果来看,在没有点击删除昵称按钮之前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>

「运行结果」

GIF222.gif

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

同理,我们来看看$setset

 <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>

「运行结果」

GIF 2021-4-19 23-37-22.gif

当使用传统方式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>

「运行结果」

GIF 2021-4-19 23-41-57.gif

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

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

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

image.png

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

🌼 Dep

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

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

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

  • 记录依赖:是谁在用我
  • 派发更新:我变了,我要通知那些用到我的人

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

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

image.png

Watcher

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

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

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

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

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

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函数的执行是异步的,并且在微队列中

👋 总体流程图

image.png

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

  1. 原始对象通过Observer将转换成一个响应式的对象,具有gettersetter方法,然后就静静等待着。
  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响应式原理还有什么问题可以在评论区讨论鸭~

记得点赞 👍 支持一下哦~ 😘

浏览 21
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报