Vue.js 响应式的注意事项

数组更新检测注意事项

由于 JS 的限制，下列情形数组的更新不能被检测到。

1. 使用数组下标设置一个数组项时
2. 操作数组长度时

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

对于第一种情况，可以使用 Vue.set() 方法和 vm.$set() 方法（vm.$set() 方法其实就是 Vue.set() 全局方法的别名）。同时可以使用 splice() 实现。

Vue.set(vm.arr, 1, 'x')
vm.$set(vm.arr, 1, 'x')
vm.arr.splice(1, 1, 'x')

对于第二种情况也可以使用 splice() 方法实现。

vm.arr.splice(2)

官网链接如下：
数组更新方法-注意事项

对象更新检测注意事项

还是由于 JS 限制，Vue 不能检测对象属性的添加和删除。

var vm = new Vue({
  data: {
    userInfo: {
      name: '简宝玉'
    }
  }
})
// userInfo.name 响应式
vm.userInfo.age = 17
// userInfo.age 非响应式

同样，你可以使用 Vue.set() 和 vm.$set() 解决这个问题。

Vue.set(vm.userInfo, age, 17)
vm.$set(vm.userInfo, age, 17)

当你需要添加多个属性时，正确操作是使用 Object.assign() 或者 lodash 的 extend() 方法。

vm.userInfo = Object.assign({},vm.userInfo,{
  age: 17,
  sex: '男‘
})