什么是 Vue 数据响应式

什么是Vue数据响应式？首先我们要知道什么是响应，举个例子，西瓜和石头一起砸头，哪个会更疼？好家伙，那肯定是头呀，好了回归正题，头被砸了，那么疼就是你给的响应，那么什么是数据响应呢？那当然是修改数据后给出的回应。Vue就是利用了这么特点，在数据更新的时候，就进行视图更新。下面将用代码展示以下什么是数据响应式。

<div id="app">
    {{n}}
    <button @click="add">+1</button>
  </div>

new Vue({
  el: '#app',
  data:{
    n: 0
  },
  methods:{
    add(){
      this.n += 1
    }
  }
})

我们给按钮添加一个点击事件，当按钮被点击时，对数据n进行加一操作，我们只操作了数据data中的n，页面上的n也会随之更新，这就是vue数据响应，但是我们仅仅是对数据n进行了操作，vue是怎么知道我们在更新数据呢？

官方给出来的解释是：当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在 property 被访问和修改时通知变更。
从官网的解释我们可以知道，vue实例会遍历所有传进来的数据加上getter和setter方法使得每个数据都被追踪到。

const n ={n:0}
console.log(n)

一个普通的对象输出结果是

const n ={n:0}
let vm = new Vue({
  el: '#app',
  data:{
    n: n
  }
})
console.log(n)

被vue实例进行监听后的n输出结果是

vue就是对数据进行监控从而达到数据更新页面也随之更新，那有没有可能存在监听不到的情况呢？当然是有的。
当你在操作在vue中data中没有定义的数据时，页面会报错，提示n1未定义，这个是符合逻辑的。

new Vue({
  el: "#app",
  data: {
   n : 1
  },
   template: `
    <div>
      {{ n1 }}
    </div>
 `,//提示n1未定义
})

但是你一旦将代码放入到obj中，vue将无法检测到obj中的n1是否存在，且不会报错，在这里我们可以得到一个结论，就是vue只能监听一级的属性，无法监听二级属性，所以写的时候，我们千万要注意不要使用data中未定义的属性。

new Vue({
  el: "#app",
  data: {
   obj:{
     n : 0
   }
  },
   template: `
    <div>
      {{ obj.n1 }}
    </div>
 `,//不会提示obj中的n1未定义
})

前面我们只说了无法监听到未定义的二级属性，那么如果我们直接操作未定义的二级属性会怎么样，由于vue是通过Object.defineProperty进行监听。你必须传一个属性名才可以进行监听，所以直接操作未定义的属性值当然也是无法监听。

//使用方法
Object.defineProperty(object1, 'property1', {
  value: 42,
  writable: false
});

但是我们一定要新增一个响应式属性呢，且属性没有事先定义呢？根据这个问题，vue也提供了一个解决办法那么是使用Vue.set(object, propertyName, value)新增响应式属性

new Vue({
  el: "#app",
  data: {
    obj:{
      n:1
    }
  },
   template: `
    <div>
      <span>{{obj.c}}</span>
      <button @click="add">增加元素c</button>
    </div>
 `,
  methods:{
    add(){     
      this.obj.c=1 //操作失败，vue监听不到c
      Vue.set(this.obj ,'c',2)  //操作成功，vue监听到c，等同于this.$set(this.obj ,'c',2) 
    }
  }
})