Vue——对象和数组操作的注意事项

前言

Vue是响应式的，所谓的“响应式”，是指当数据改变后，Vue 会通知到使用该数据的代码。例如，视图渲染中使用了数据，数据改变后，视图也会自动更新。对于引用类型的数组和对象而言，如下操作Vue不能做出响应.

对于数组而言，Vue 不能检测以下变动：

1. 当你利用索引直接设置一个项时，例如：
2. 当你修改数组的长度时，例如：vm.items.length = newLength

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

对于对象而言，Vue不能检测以下变动：

1. Vue 不能检测对象属性的添加或删除

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

Vue对上述问题提供的解决方法

数组操作

1.对于数组的元素的修改和增加

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

2.对于数组的长度修改

vm.items.splice(newLength)

注意：array.splice(index,howmany,item1,.....,itemX)；index：从数组的第几个下标开始操作；howmany：从index开始往后删除多少个元素；item1,...，itemX:新增元素

对象操作

//单个属性的操作
Vue.set(vm.userProfile, 'age', 27)
//多个属性的操作
vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})