vue(4)vue响应式原理

1、响应式系统

响应式是Vue的核心特征之一，数据驱动视图，我们只需要修改数据，视图就能够获得相应的更新。要实现一个响应式，需要做到以下几点：

• 1、数据劫持：当数据发生变化时，我们能够监听到，并且能够做相应的事情
• 2、依赖收集：我们得知道哪些视图（DOM）依赖了哪些数据
• 3、派发更新：当数据发生变化时，得通知依赖这些数据的DOM

2、vue2响应式系统

• 在Vue响应式系统中，有三个核心的点：observe、watcher、dep
  
  

• observe:它会遍历data中return的所有属性，并且使用Object.defineProperty的getter/setter进行数据劫持（我前面都文章讲过Object.fefineProperty以及Proxy，这里就不详细赘述了）
  
  

• watcher:每一个watcher实例都订阅了它所依赖的数据，当依赖的数据发生变化时（即出发了Object.defineProperty的setter），watcher实例便会接收到数据发生变化这个消息，然后执行一个回调函数来实现某些功能，比如更新页面
  
  

• dep:每一个响应式的数据都有一个属于自己的数组dep，数组dep上面存放了依赖自己的watcher。当数据发生变化的时候，就去dep中把watcher的回调函数都执行一遍。

3、为什么Vue2新增响应式属性要通过额外的API

• vue2的响应式原理是使用Object.defineProperty,当访问对象的一个属性时触发getter,修改一个对象的属性时触发setter

• 但是给对象新添加一个属性时，Object.defineProperty是检测不到的，所以会出现直接给对对象添加响应式属性响应式不生效的问题

• 为实现新增响应式属性，可以用vm.$set(对象名,‘属性名’,属性值)

• 删除一个响应式属性，可以使用vm.$delete

4、Vue2中是怎样监听数据的变化的

• 首先需要说说Object.defineProperty

• Object.defineProperty是可以检测到数据的变化的，但是这种变化的场景是指通过数组的下标来获取元素。

• 而且即使Object.defineProperty可以对数组进行监听，但也监听不了push、pop、shift等方法对数据的操作
  
  

• 在vue2中，它是直接放弃了Object.defineProperty对数据进行监测。这是因为开发者往往用遍历的方式来使用数组，如果对数组中的每一个元素都设置一个getter/setter的话，开销会特别大，影响性能。

• 同时vue也该改写了数组原型上的7个方法：pop push shift unshift splice sort reverse

• vue改写的原理是：

• 使用Object.defineProperty来对Array.prototype上的方法进行拦截

• 把需要被拦截的Array类型的数据原型指向改造后原型。

• 这样之后再去使用Array原型上的方法时，实际上是在使用拦截器提供的方法

5、Vue3的响应式原理

• Vue3是通过Proxy来对数据实现代理的。Proxy与Object.defineProperty很大的不同在于Obejct.defineProperty是对对象的某一个属性进行监听，而Proxy是对代理整个对象
• 当读取响应式数据时，就会触发handler里面的getter，当修改响应式属性时就会触发handelr里面的setter