Vue中改变对象响应式注意事项

数组更改注意事项

Vue无法检测到以下方式变动的数组

• 当你利用索引直接设置一个项时，例如：vm.items[index] = newValue
• 当你修改数组的长度时，例如：vm.items.length = newLength
• 针对问题一，解决方案有两种：

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
// 问题
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的
//  解决方案
Vue.set(vm.items, indexOfItem, newValue);//方案一
vm.$set(vm.items, indexOfItem, newValue);//等同于方案一
vm.items.splice(indexOfItem, 1, newValue);//方案二

对象更改注意事项

Vue无法检测到对象属性的添加和删除。对于已经创建的实例，Vue 不能动态添加根级别的响应式属性，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。

Vue 不能动态添加根级别的响应式属性：

var vm = new Vue({
  data: {
    a: 1
  }
})
vm.b = 2