【前端】vue响应式原理

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/cheidou123/article/details/91400647

一 什么是响应式

“响应式”，是指当数据改变后，Vue 会通知到使用该数据的代码。例如，视图渲染中使用了数据，数据改变后，视图也会自动更新。
举例:
对于模板:

<div id="root">{{ name }}</div>

创建vue组件

var vm = new Vue({
  el: '#root',
  data: {
    name: 'luobo'
  }
})

代码执行后，页面上会显示luobo
如果我们想改变显示，只需要vm.name= ‘heidou’，而不需要手动去更新属性。

二 响应式原理

vue的响应式的原理的核心是观察者模式。

1.Object.defineProperty方法

使用 Object.defineProperty 可以为对象中的每一个属性，设置 get 和 set 方法
Object.defineProperty 可以为属性设置很多特性，例如 configurable，enumerable，但是现在不过多解释，重点只放在 get 和 set
当属性被访问时，触发get函数，当属性被赋值时，触发set函数。

2.依赖收集

data中声明的每一个属性都拥有一个数组，保存着谁使用了它。
比如name属性页面A,B,C是用了它，则name把A,B,C的watch保存在数组里。这样当它改变时就会通知依赖它的界面进行更新。不仅仅是页面，也有可能是computed等，我们暂且全都用页面来说。
专业点就是两步:

• data 中每个声明的属性，都会有一个 专属的依赖收集器 subs
• 当页面使用到 某个属性时，触发get函数，此时页面的 watcher 就会被 放到 依赖收集器 subs 中

3.依赖更新

当属性进行改变时，会使用set方法，那么属性就会遍历自己的依赖收集器，让它们通知对应的页面重新读取属性，然后完成渲染。