Vue-数据响应式原理

一朵盆栽

已于 2024-05-22 13:57:08 修改

阅读量1.4k

点赞数 1

分类专栏： vue 文章标签： vue js javascript vue.js

于 2021-04-25 16:29:57 首次发布

本文链接：https://blog.csdn.net/s8806479/article/details/116132345

版权

vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

编程是常看常新的东西
Vue最大的特点是视图和数据的关联，
创建视图的函数（render，渲染函数）和数据的关联，那假如只改数据呢？
函数和数据的关联，
函数和函数用到的数据，的关联，
函数和函数运行过程中用到的数据，的关联，1需要监听数据的读取和修改（defineProperty兼容性好Vue2/Proxy监听更广Vue3），2如何知晓数据对应的函数？
函数和函数运行过程中用到的对象，的关联
函数和函数运行过程中用到的响应式数据，的关联

什么是数据响应式？

数据变化，页面重新渲染。×不准确
数据是在对象里面，就是改变了对象的一个属性，运行了render函数。√稍微准确
改变了对象，运行了某些函数。√准确

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

vue数据响应式设计的初衷是为了实现数据和函数的联动，当数据变化后，用到该数据的联动函数会自动重新运行。
具体在vue的开发中，数据和组件的render函数关联在一起，从而实现了数据变化自动运行render,在感官上就看到了组件的重新渲染。
除了vue自动关联的render函数，其他还有很多使用到vue响应式的场景，比如computed. watch等等，不能仅把vue的数据响应式想象成和render的关联。

在这里插入图片描述

以上两张图证明了对象改变，运行了某些函数。
在具体实现上，vue用到了几个核心部件:

0bserver
Dep
Watcher
Scheduler

1、0bserver

我们先来思考，对象改变，怎么联动地运行某些函数？
ES5数据劫持，Object.defineProperty(对象,‘属性名字’,{配置})

和正常的在对象中定义属性有什么区别？可以配置属性

get

在这里插入图片描述

点开…打印get
假如控制台输出obj.age则直接打印get，输出17

set

在这里插入图片描述

此时再次调用obj.age还是输出17

如果想getter值显示在setter上，那么得这么写↓

假如写this.age=newVal

则会导致死循环，赋值→运行setter，运行setter→赋值

和Vue的关系

这个时候当我们在set里赋值，那么就会调用method方法
在这里插入图片描述

因此，Vue可以监听到属性的变化

这边再次回到最开始讲的
在这里插入图片描述
vm对象下的title↓

vm对象下的_data↓

_data对应鼠标选中区域↓

给title赋值就是给_data下title赋值

重归正题

0bserver要实现的目标非常简单，就是把一个普通的对象转换为响应式的对象（对象中每个属性包含getter和setter）。
为了实现这一点，0bserver把对象的每个属性（遍历）通过0bject.defineProperty 转换为带有getter 和setter 的属性，这样一来，当访问或设置属性时， vue 就有机会做一些别的事情。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210425141252395.png
Observer是Vue内部的构造器，我们可以通过Vue提供的静态方法Vue.observable( object )间接的使用该功能，可以把整个对象转成响应式
在组件生命周期中，这件事发生在beforeCreate之后，created之前。
具体实现上，它会递归遍历对象的所有属性，以完成深度的属性转换。
由于遍历时只能遍历到对象的当前属性，因此无法监测到将来动态增加或删除的属性，因此Vue提供了 $se t 和$ delete两个实例方法，来对已有响应式对象添加或删除属性。
对于数组，重写了一部分能改变原数组的隐式的原型方法（如push，pop，shift，unshift），Vue会更改它的隐式原型，之所以这样做，是因为Vue需要监听那些可能改变数组内容的方法。
总之，Observer的目标就是要让一个对象，它属性的读取，赋值，内部数组的变化都要能够被Vue感知到。
——————————————————————下面写的太乱了——————————————————————

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

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

  function haha(){
    console.log(user.name)
  }
</script>

在这里插入图片描述
无论嵌套多少重都会变成响应式

第一种情况
user.sex = ‘女’;
这里不是响应式属性，Object.defineProperty()深度遍历属性，当时是没有sex属性存在的
考点Vue2的defineProperty弊端
深度的遍历就会有效率的损失，由于在观察过程中，就已经完成了深度遍历，里面有的属性都改成了getset，再去新增就不知道了，一旦完成了监听后续再进行添加属性
第二种情况
也不能监控删除数据delete user.age;因为一个getter是读数据，一个setter是赋值
同上

（题外：在组件生命周期中，这件事发生在beforeCreate之后，created之前。）

所以，由于遍历时只能遍历到对象的当前属性，因此无法监测到将来动态增加或删除的属性，因此vue2提供了$set和$delete两个实例方法，让开发者通过这两个实例方法对已有响应式对象添加或删除属性。
Vue3直接没有$set和$delete两个方法了。
Vue3Proxy，抛弃Vue2监听属性，不需要遍历了，改为监听整个对象

const proxy=new Proxy(obj,{
	get(target,key){},
	set(target,key,val){},
	deleteProperty(){}
})
proxy.a=3
proxy.b=4

在这里插入图片描述

↓仅供了解
在这里插入图片描述
第三种情况
对于数组，vue会更改它的隐式原型，之所以这样做，是因为vue需要监听那些可能改变数组内容的方法

页面刷新，但调用push方法，页面是怎么知道的

原本是数组→Array.prototype

这个push方法是调用Vue里面的push方法
在这里插入图片描述

重新改造了原型链，原型链拦截

选中区域就是Vue自定义的对象

监控了所有会导致数组变化的方法，nb

但是存在一个小缺陷，通过下标改值无法响应式，数据变，而页面不变
是Object.defineProperty()的缺陷
在这里插入图片描述
现在可以用下面这种方式改成响应式
0bject.defineProperty( vm.hobbies,“0"”，{})
但是，数组本身有许多filter和map之类的方法，改动后就不再是响应式，因此不建议

user.students[0].name = ‘xiao wang’;//响应式
user.students[0] ={};//无响应式

但是如果实在要修改，那么：
①
在这里插入图片描述
②

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

2、Dep

这里有两个问题没解决，就是读取属性时要做什么事，而属性变化时要做什么事，这个问题需要依靠Dep来解决。Dep的含义是Dependency，表示依赖的意思。
__ob__观察者
在这里插入图片描述
Vue会为响应式对象中的每个属性、对象本身、数组本身创建一个Dep实例，每个Dep实例都有能力做以下两件事：

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

每个dep都是new Dep()构造函数创建出来的↓

{//对象本身有个dep
          title: 'Hello Vue',//每个属性会有一个dep
          //user本身一个dep，当给user赋值的时候
          user: {//对象一个dep，加一个属性this.$set(user, "name", "monica")
            age: '',//dep
          },
          //hobbies属性本身一个dep，给hobbies改值
          hobbies: ['读书', '音乐', '钢管'],//字符串原始值，数组本身一个dep，给数组push
        },

当读取响应式对象的某个属性时，它会进行依赖收集：有人用到了我
当改变某个属性时，它会派发更新：那些用我的人听好了，我变了

在这里插入图片描述

depend记录（getter里）谁在用，之前用的谁，再运行一次notify，即运用render

源码
在这里插入图片描述

一个例子↓

不会运行render，Vue有依赖收集，只有改动用到的才会变，没用到不会变

现在有这么一道面试题
在这里插入图片描述

？？会运行
上面控制台添加的，触发光标选中处的render

因为this.user后面属性是啥，万一this.user后面读的是不存在的属性，↑
如果不记录图中第一个render，那删除name属性时候（$delete(user,‘name’)），就会通知不到
所以建议不使用set/delete

3、Watcher（$watch）

这里又出现一个问题，就是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函数，从而让界面重新渲染同时重新记录当前的依赖。
watcher和函数关联在一起，一开始会运行一次watcher里面的函数，运行过程中就会记录依赖，记录watcher，将来数据变了重新通知watcher，重新运行函数

下面这块扩展。

<body>
    <div id="app">
      <h1>{{title}}</h1>
    </div>

    <script src="./vue.min.js"></script>
    <script>
      //vm.$set(vm.user, "age", 17)
      var vm = new Vue({
        el: '#app',
        data: {
          title: 'Hello Vue',
          user: {
            name: 'monica',
          },
          hobbies: ['读书', '音乐', '钢管'],
        },
        created() {
	//this.$watch内部new Watcher
          this.$watch(() => {
            console.log('watcher run');
            console.log(this.user.name);
          });
        },
        render(h) {
          console.log('render');
          return h('h1', `${this.user.name} ${this.title} ${this.hobbies}`);
        },
      });
    </script>
  </body>

在这里插入图片描述
watcher伪代码↑

把$watch里面的() => {}当fn传进去，run里this就是↓
() => {
console.log(‘watcher run’);
console.log(this.user.name);
}
把this保存到全局变量global，所以收集依赖的时候，只需要访问global，记录该变量即可，函数运行完置null

由于每个组件都有render函数，render函数也是放在watcher里面运行的，每个组件至少有一个watcher，

4、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 的具体处理方式见：https://cn.vuejs.org/v2/guide/reactivity.html#%E5%BC%82%E6%AD%A5%E6%9B%B4%E6%96%B0%E9%98%9F%E5%88%97

也就是说，当响应式数据变化时，render函数的执行是异步的（除了第一次同步），并且在微队列中

nextTick也容易出面试题，例如↓
在这里插入图片描述

nextTick伪代码

render返回值就是模板里一毛一样
问题一、最开始输出？
先render再1，因为是同步，render先放在watcher执行
问题二、点击按钮后，输出啥？
1,2,3,4 render
nextTick和render都是异步，为什么render在后，因为this.a=10是后面改变的
在这里插入图片描述
执行到console.log行，此时界面未更新
问题三、第二次点击输出啥？
10111213
问题四、点击按钮输出？

1 1234 render
1同步
问题五、点击后顺序

1234 render 1
问题六、点击输出啥？

render 10,11,12,13
为什么？微队列：render（this.a），nextTick 同步：this.b/c/d

总体流程

一开始运行render函数，交给watcher运行，watcher过程执行render函数，render函数执行会用到数据，运行getter，是原始对象通过Observer的Object.defineProperty转成getter和setter，触发getter会依赖收集，会记录watcher用到哪些数据。数据发生变化，通知watcher把数据重新运行一遍，走调度器，去重进队列，加到nextTick里，微队列，nextTick方法全是异步的，exec watchers就是执行队列的，exec watchers重新执行watcher，又重新运行render函数，周而复始。
响应式数据怎么和页面挂钩呢？模板里所有东西都会变成render函数，当运行render函数，可能会用到一些数据，就会用到getter，用到这个属性就会记录，这叫做依赖收集（collect as dependency），收集的是观察者watchers，发布订阅模式，watchers会观察这些数据，会运行setter，就会通知他notify，叫做派发更新，会重新触发render函数的执行，重新生成虚拟dom树

vue3响应式的五个问题

在这里插入图片描述

1、count变化后doubleCount会不会变化？
在这里插入图片描述
不会，响应式不是数据与数据的关联
2、count变化后doubleCount会不会变化？

会
3、count变化后doubleCount会不会变化？

不会，原始类型不能是响应式数据，改成props会

4、count变化后doubleCount会不会变化？
在这里插入图片描述
会
5、count变化后doubleCount会不会变化？

不会，原始类型不能是响应式数据，改成props会

——————————————
响应式是（被监控）函数与数据的关联，被监控的函数↓
在这里插入图片描述
2、函数运行期间用到了响应式数据
3、响应式数据变化会导致函数重新运行

一朵盆栽

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
Vue-数据响应式原理

什么是数据响应式？数据变化，页面重新渲染。×不准确数据是在对象里面，就是改变了对象的一个属性，运行了render函数。√稍微准确改变了对象，运行了某些函数。√准确响应式数据的最终目标，是当对象本身或对象属性发生变化时，将会运行一些函数，最常见的就是render函数。以上两张图证明了对象改变，运行了某些函数。在具体实现上，vue用到了几个核心部件:0bserverDepWatcherScheduler0bserver我们先来思考，对象改变，怎么联动地运行某些函数？ES5数据劫持
复制链接

扫一扫

专栏目录