Vue数据响应式浅析

1. 什么是响应式

“响应式”，是指当数据改变后，Vue 会通知到使用该数据的代码。例如，视图渲染中使用了数据，数据改变后，视图也会自动更新。

2. Vue的data响应式

 const vm = new Vue({data:{n:0}})

以上面的例子来说，我如果修改vm.n，那么UI中的n就会来响应我。Vue中的数据响应式是通过Object.defineProperty来实现的，语法如下

Object.defineProperty(obj,"n",{...})

注意：上面的代码一定要有n，才能监听和代理obj.n。

3. Vue.set和this.$set

当属性或者方法n 没有定义在实例上面，但是你却引用了它，或者是你在视图里使用的是obj.b，而你在data中没有声明b,这时b就无法在页面中显示，这时因为vue没有监听到obj里的b，你根本就没写。

Vue中的Vue.set和this.$set可以解决上面的场景。

new Vue({
  data: {
    obj: {
      a: 0 // obj.a 会被 Vue 监听 & 代理
    }
  },
  template: `
    <div>
      {{obj.b}}
      <button @click="setB">set b</button>
    </div>
  `,
 methods: {    setB() {
      //this.obj.b = 1; 老代码 
      Vue.set(this.obj,"b",1)
    }
  }
}).$mount("#app");

如果一开始知道这个b是不存在的，那么我们在使用的时候就先通知一下vue，你要set一个新值，这时点击button，新的值就可以在页面上显示。新增key会自动创建代理和监听，并且触发UI更新（但是并不会立即更新）

4. 响应式页面

当你改变窗口的大小，网页内容会做出响应，那就是响应式网页。一般当网页小到一定程度无法再小了。