什么是响应式

在 Vue 实例中声明过的数据，这些数据就是响应式的。什么是响应式，也即是说，数据发生改变的时候，视图会重新渲染，匹配更新为最新的值。

理解响应式

Vue是如何追踪变化得呢，那么我们就要弄懂以下三个问题：

Vue是怎么知道数据发生了改变？
Vue是怎么知道去更新哪些视图？
Vue是怎么知道在什么时间更新视图？

Vue通过Object.defineProperty知道数据发生了改变

Object.defineProperty是 Vue 响应式系统的精髓；Vue使用 Object.defineProperty 为对象中的每一个属性，设置 get 和 set 方法，进行数据劫持/监听；get 值是一个函数,当属性被访问时，会触发 get 函数，set 值同样是一个函数，当属性被赋值时，会触发 set 函数；

var obj={    
    name:Vue是响应式吗？
}
Object.defineProperty(obj,"name",{
    get(){        
        console.log("get方法被触发")
    },
    set(val){        
        console.log("set方法被触发")
    }
})
var str = obj.name  //get方法被触发
obj.name = "Vue是响应式的"  // set方法被触发

因而当数据改变时，触发属性的 set 方法，Vue 就能知道数据有改变；

Vue通过依赖收集去更新视图

data 中每个声明的属性都会有一个专属的依赖收集器dep.subs数组，当页面使用到某个属性时，触发 ObjectdefineProperty - get函数，页面的 watcher 就会被放到属性的依赖收集器 subs 中进行保存。它知道谁依赖它之后，它就可以在发生改变的时候，通知依赖它的页面，从而让页面完成更新；

<template>
     <p> Vue是响应式吗?</p>
      //此节点是name的订阅者watch，vue也把此节点存在name的依赖收集器；
    <p>{
   {name}}</p>  
</template>
<script>
   export default{
     data(){
       name:"Vue是响应式的"
     }
    mounted(){
     //当数据发生改变时，vue会遍历观察者列表（dep.subs），通知所有的watch，
       让订阅者执行自己的update逻辑,去让页面完成更新
      this.name ="Vue必须是响应式的" 
    }
  }
</script>

在这里插入图片描述

Vue通过依赖更新时去更新视图

依赖更新，就是，通知所有的依赖进行更新；
我们都知道，每个属性都会保存有一个依赖收集器 subs ，而这个依赖收集器，是用来在数据变化时，通知更新的；
关键在于Object.defineProperty - set，当 name 改变的时候，name 会遍历自己的依赖收集器 subs，逐个通知订阅者watcher，让订阅者watcher 完成更新；这里 name 会通知订阅者节点，节点重新读取新的 name ，然后完成渲染；