2020-12-25

Vue数据响应式

响应式：当一个物体对外界刺激做出反应，就是响应式。例如：我打你一拳你知道躲。

Vue 数据响应式：就是对Vue数据的操作，能够响应到相应的视图UI上

举个栗子
此时页面对应位置显示的是merry，当执行vm.name = 'Christmas'，页面显示就会merry变为Christmas，这就是数据响应式

const vm = new Vue({
  data: {
    name: "marry"
  },
  //el: '#app',
  template: `
      <div>{{name}}</div>
    `
}).$mount("#app") //与el: '#app'功能相同

有几个特例，
1、例如：当data为空对象时，Vue会给出警告，渲染n时找不到n

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

image.png

2、当要显示的数据b不在data中，却要显示这个数据b，由于Vue只检查数据的第一层，警告会消除，但是不会转化为响应式，因为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; //请问，页面中会显示 1 吗？
    }
  }
}).$mount("#app");

解决办法一、提前声明key

  data: {
    obj: {
      a: 0 ,// obj.a 会被 Vue 监听 & 代理
      b:undefined
    }
  }

解决办法二、用Vue.set或this.$set

Vue.set或this.$set来新增Key会自动创建代理和监听

  methods: {
    setB() {
      Vue.set(this.obj,'b',1) //或 this.$set(this.obj,'b',1)  Vue.set===this.$set
    }
  }

3、当data是一个数组时，数组长度不固定，且下标就是key，没办法提前声明，每次改Vue.set或this.$set又不太好

用Vue.set或this.$set新增数组的key不会创建代理和监听

就可以用到Vue的篡改的部分数组API，push

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

如下图尤雨溪篡改的七个API详见官方文档

image.png