provide vue 响应式_深入理解Vue的数据响应式

什么是响应式

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

Vue的数据响应式

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

举个例子

1const vm = new Vue({
2    el:'#app',
3    data:{
4        name: 'Luna'
5    }
6})

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

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

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

1new Vue({
2  data: {},
3  template: `
4    
{
      {n}}
5  `
6}).$mount("#app");

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

 1new Vue({
 2  data: {
 3    obj: {
 4      a: 0 // obj.a 会被 Vue 监听 & 代理
 5    }
 6  },
 7  template: `
 8    

 9      {
      {obj.b}}
10      set b
11    
12  `,
13  methods: {
14    setB() {
15      this.obj.b = 1; 
16    }
17  }
18}).$mount("#app");

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

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

 1new Vue({
 2  data: {
 3    obj: {
 4      a: 0 // obj.a 会被 Vue 监听 & 代理
 5      b: undefined
 6    }
 7  },
 8  template: `
 9    

10      {
      {obj.b}}
11      set b
12    
13  `,
14  methods: {
15    setB() {
16      this.obj.b = 1; 
17    }
18  }
19}).$mount("#app");

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

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

 1new Vue({
 2  data: {
 3    obj: {
 4      a: 0 // obj.a 会被 Vue 监听 & 代理
 5      b: undefined
 6    }
 7  },
 8  template: `
 9    

10      {
      {obj.b}}
11      set b
12    
13  `,
14  methods: {
15    setB() {
16      Vue.set(this.obj,'b',1); //也可以这么写this.$set(this.obj,'b',1)
17    }
18  }
19}).$mount("#app");

但是！

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

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

 1new Vue({
 2  data: {
 3    array: ["a", "b", "c"]
 4  },
 5  template: `
 6    

 7      {
      {array}}
 8      set d
 9    
10  `,
11  methods: {
12    setD() {
13      this.array.push("d");
14    }
15  }
16}).$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
）章节。