VUE 如何监测对象属性及数组的变化 ？

关于 VUE 数据更新检测的限制官方文档：
https://cn.vuejs.org/v2/guide/list.html#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9

关于数组变化

由于 JavaScript 的限制，Vue 不能检测以下数组的变动：

• 利用索引直接设置一个数组项 vm.items[indexOfItem] = newValue
• 修改数组长度 vm.items.length = newLength

解决办法

方法一：

Vue.set(vm.items, indexOfItem, newValue)

方法二：

vm.items.splice(indexOfItem, 1, newValue)  // items为数组

关于对象变化

由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除

解决办法

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

实际的开发中我需要监听 localStorage 中数据的变化

补充一下
关于 localStorage 和 sessionStorage

Storage 中只能存储字符串的数据，对于数组或对象不能直接存储。我们可以通过 JSON 对象提供的 parse 和 stringify 将其他数据类型转化成字符串，再存储到 Storage 中就可以了

实际开发中的数据结构如下，需要监听 options 数组中对象的 options 属性的变化，属性值为数组类型，存储在 localStorage 中

function getData() {
  return {
    options: [
      {
        label: '默认工作台',
        options: optionsDefault
      },
      {
        label: '其他工作台',
        options: optionsOthers
      }
    ],
    value: optionsDefault ? optionsDefault[0].label : '' //默认选中的选项
  };
}

获取 localStorage 中的数据，赋值给 options 属性，实现页面响应渲染

let  optionsDefault = JSON.parse(localStorage.getItem('optionsDefault'));
let  optionsOthers = JSON.parse(localStorage.getItem('optionsOthers'));
      this.$set(this.options[0], 'options', optionsDefault);
      this.$set(this.options[1], 'options', optionsOthers);