Vue.js 的核心包括一套“响应式系统”。
数据响应式：是指当数据改变后，Vue 会通知使用该数据的代码，并作出响应。例如，视图渲染中使用了数据，数据改变后，视图也会自动更新。

vue是如何知道数据变化的

当数据传入vue的实例中作为data数据时，vue将遍历此对象的所有property,并且使用Object.defineProperty把他们转化为getter和setter方法,而get和set正是对属性的读写进行监控

  1. var  obj1 = {}
  2. var _xxx=0
  3. Object.defineProperty(obj1,'xxx',{
  4.     get(){
  5.         //不返回xxx的原因是会造成死循环（ovj1.xxx会再次调用get方法）
  6.         return _xxx
  7.     }
  8.     set(value){
  9.         _xxx = value
  10.     }
  11. })
  12. console.log(obj1.xxx)  // 0

上述代码浓缩为，下面的代码； getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖

  1. vm = new Vue（{data：myData}）
  1. 会让vm成为myData的代理（proxy）
  2. 会对myData的所有属性进行监控为什么要监控，为了防止myData的属性变了，vm不知道vm知道了又如何？知道属性变了就可以调用render（data）进行渲染

image.png
image.png
image.png