写点什么

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

用户头像
法医
关注
发布于: 2021 年 06 月 14 日
一文带你了解vue2之响应式原理

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


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


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


  1. Observer

  2. Dep

  3. Watcher

  4. Scheduler

🌟 Observer

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


为了实现这一点,Observer 把对象的每个属性通过Object.defineProperty转换为带有gettersetter的属性,这样一来,我们访问或设置属性时,会分别调用 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$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>
复制代码


运行结果



从运行结果来看,在没有点击删除昵称按钮之前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 就会收到通知了,进行昵称删除操作,页面也会及时响应。


同理,我们来看看$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>
复制代码


运行结果



当使用传统方式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 实例都有能力做以下两件事:


  • 记录依赖:是谁在用我

  • 派发更新:我变了,我要通知那些用到我的人


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


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


🔥 Watcher

现在又有一个问题,就是 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 函数,从而让界面重新渲染,同时重新记录当前的依赖。

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

👋 总体流程图


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


  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 响应式原理还有什么问题可以在评论区讨论鸭~


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

发布于: 2021 年 06 月 14 日阅读数: 384
用户头像

法医

关注

公众号@前端猎手 2020.07.17 加入

喜欢用写作记录自己技术成长过程

评论 (2 条评论)

发布
用户头像
现在该弄vue3,这是更先进的
2021 年 06 月 15 日 16:37
回复
虽然vue3是最新的,但原理方面是不会变的,vue3后面抽时间更
2021 年 06 月 15 日 18:44
回复
没有更多了
一文带你了解vue2之响应式原理