Vue的数据响应式

什么是响应式

当一个物体对外界的变化做出反应就叫响应式的，如“我打你一拳，你会喊疼”。

Vue的数据响应式

就是对数据做出改变时，视图上也会做出相应的变化。

举个例子

const vm = new Vue({
    el:'#app',
    data:{
        name: 'Luna'
    }
})

根据以上代码，页面上对应位置会显示Luna，如执行vm.name='Pola'，则会由Luna变成Pola。

但这是正常情况，还有些变态情况

• 当data为空对象时，Vue会给出警告，例如。

new Vue({
  data: {},
  template: `
    <div>{{n}}</div>
  `
}).$mount("#app");

警告

• 当data为a，却要在页面中显示b，因为Vue只检查第一层，可以消除警告，但不会将它转换为响应式的

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; 
    }
  }
}).$mount("#app");

此时点击 set b，视图中不会显示1，因为Vue没法监听一开始不存在的obj.b

image.png

解决方法
1、提前把key声明好，哪怕是空值。

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

这是再点击set b就会显示1

image.png

2、使用Vue.set或this.$set

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

但是！

当data中有数组怎么办，如果数组长度一直增加，就没有办法提前把key都声明出来，每次改数组，都要用Vue.set或this.$set也很麻烦。

可以直接使用变异方法中的push

new Vue({
  data: {
    array: ["a", "b", "c"]
  },
  template: `
    <div>
      {{array}}
      <button @click="setD">set d</button>
    </div>
  `,
  methods: {
    setD() {
      this.array.push("d");
    }
  }
}).$mount("#app");

尤雨溪篡改了数组的7个API，调用后会更新UI，可参考文档中[变异方法]（https://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E5%BC%82%E6%96%B9%E6%B3%95-mutation-method
）章节。

image.png