什么是响应式

在 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 ，然后完成渲染；

Vue响应式原理总结

• Object.defineProperty - get ，用于 依赖收集
• Object.defineProperty - set，用于 依赖更新
• 每个 data 声明的属性，都拥有一个的专属依赖收集器 subs
• 依赖收集器 subs 保存的依赖是 watcher
• watcher可用于 进行视图更新