Vue 注意事项---数组和对象的更新检测

1、数组的更新检测

• 变异方法，总是可以被检测的。
  注：数组的变异方法指的是会改变原始数组的方法。 能改变原始数组方法总结

• 非变异方法，需要将返回的数组赋值给原始数组。

// 这时array指向的地址发生了变化，那当然是可以被检测的咯
array = array.map(item => item+1)

• 由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
  • 修改数组长度
  • 通过下标去修改数组中某个值

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.$set是Vue.set方法的一个别名
vm.items.splice(indexOfItem, 1, newValue)

// 意思是当你在写一个组件的时候，vm就代表你正在写的这个组件(一个Vue示例)，所以你需要这样写
Vue.set(this.items, indexOfItem, newValue)
this.$set(this.items, indexOfItem, newValue) 
this.items.splice(indexOfItem, 1, newValue)  // 使用变异方法

// 目前只知道要用Vue的方法时是需要$符号的

对美元符号$的一个小总结

• Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀$，以便与用户定义的属性区分开来
• es6中也可以采用${XXX}来在字符串中插入变量
• jquery利用$作为选择器库，是对原生JavaScript对选择元素进行的一种封装

2、对象的更新检测

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

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

解决方案

var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika'
    }
  }
})

// 添加age属性
Vue.set(vm.userProfile, 'age', 27)
vm.$set(vm.userProfile, 'age', 27)

// 为已有对象赋予多个新属性，使用Object.assign()或_.extend()。
// 你应该用两个对象的属性创建一个新的对象。
vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})