VUE数据data更新而列表不更新，VUE的响应式原理的几个小例

在Vue中，一般只有在data选项中声明的属性（或者是属性的属性）才是具有响应特性的。如果需要在data选项之外对已有属性添加（Vue 不允许动态添加根级响应式属性）具有响应特性的属性，需要用到Vue的set方法。

var vm = new Vue({
  data: {
    a: {              //a就是根级属性，不可动态添加
      b: 0          //b就是属性的属性，可以动态添加
    }
  }
})

何为响应特性？就是当我们更改data中的值的时候，HTML与之绑定的部分会随之更新的特性。

例1，Vue文档中的例子

var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 现在是响应式的
vm.b = 2
// `vm.b` 不是响应式的

例1中的a就是在data中声明的具有响应特性的属性，而b就不是。

例2，把上面的例子修改一下

var vm = new Vue({
  data: {
    a: {
      a1:''
    }
  },
  methods: {
    change: function () {
      this.a.a1 = "test"    //a1就是响应式的
      this.a.a2 = "testtest"    //a2就不是响应式的
    }
  }
})

在实际操作中，例2的a2虽然不是响应式的，但他却是可以在HTML部分被渲染更新出来。这里就是一个比较容易掉进去的坑了。由于Vue是异步执行DOM更新，虽然更新的动作是由this.a.a1 = "test"触发，可动作的完成是在this.a.a2 = "testtest"之后。

例3，一个更加完整的例子

var vm = new Vue({
  data: {
    a: {
      a1:''
    }
  },
  methods: {
    change: function () {
      this.a.a1 = "test"    //a1就是响应式的
      this.a.a2 = "testtest"    //a2就不是响应式的
      var that = this;
      setTimeout(function () {
        that.a.a3 = 'new text'; //这里与a2是相同的，却别在于这里的a3并不会被渲染到DOM中
        that.$set(that.a, 'a4', 'new text');    //这是正确的添加属性的方法
        that.a = {                              //这种写法与a2不同，a5可以被更新到DOM中
          a5: 'hahaha'
        }
      }, 1);
    }
  }
})

参考资料：

Vue官方文档;