数组、对象更新检测

一.数组更新检测

1.变异方法（更改原数组），同JavaScript数组方法一致。
如： - push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()

2.非变异方法（不更改原数组），替换数组
如： -filter()，concat()， slice()

注意：由于 JavaScript 的限制

1. Vue 不能检测以下变动的数组

1. 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
   解决方法：

 // Vue.set
Vue.set(example1.items, indexOfItem, newValue)

// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)

2 . 当你修改数组的长度时，例如：vm.items.length = newLength.
解决方法：

example1.items.splice(newLength)

二、对象更改检测注意事项

1.还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除。
对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。
解决办法：Vue.set(object, key, value)
例如：

  data: {
    userProfile: {
      name: 'Anika'
    }
  }
})

添加新属性

方法一：Vue.set(vm.userProfile, 'age', 27)

方法二：vm.$set(this.userProfile, 'age', 27)

赋予多个新属性
方法：Object.assign()或 _.extend()

Object.assign(this.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

this.userProfile = Object.assign({}, this.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

两种用法的区别：是什么？？？？