Vue2.x 响应式的缺点

先看一下我们怎么样写才算是响应式属性：

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

vm.b = 2 ，如果我们这样添加的属性，哪怕以后b的值发生了改变，页面也不会更新

因此Vue2.x 也给我们提供了对应的API来解决这个问题

Vue.set(vm.someObject, 'b', 2)

this.$set(this.someObject,'b',2)

还有一种情况是关于数组的

如果你有以下操作，vue则无法检测数组的变化，也就是无法做到响应式：

• 当你利用索引直接修改一个数组项的时候，例如 vm.items[indexOfItem] = newValue
• 当你修改数组的长度时，例如：vm.items.length = newLength

实际例子：

var vm = new Vue({  
  data: {  
    items: ['a', 'b', 'c']  
  }  
})  

vm.items[1] = 'x' // 不是响应性的  
vm.items.length = 2 // 不是响应性的

为了解决vm.items[indexOfItem] = newValue, 可以使用以下的方法

// Vue.set  
Vue.set(vm.items, indexOfItem, newValue)
======================
// Array.prototype.splice  
vm.items.splice(indexOfItem, 1, newValue)

// 或者
vm.$set(vm.items, indexOfItem, newValue)

为了解决vm.items.length = newLength

vm.items.splice(newLength)

说到此，再顺便说一下，除了以下的数组API能做到响应式，其它都不可以

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()