一、响应式系统

响应式系统，指的是，当一个 Vue 实例被创建时，它会将 data 对象中的所有的数据加入到 Vue 的响应式系统中。当这些数据的值发生改变时，响应式系统会立马检测到数据的变化，然后自动更新页面。
数据更新检测 - 图1

二、无法检测的数据变化

虽然大部分的数据变化，响应式系统都能检测到，但是有四种特殊情况，是响应式系统无法检测的。
针对对象，Vue 无法检测到以下两种变化：

  1. 给对象中新增属性；
  2. 删除对象中的某一个属性；

针对数组，Vue 无法检测到以下两种变化：

  1. 通过下标操作数组元素；
  2. 修改数组的长度；

    解决方案

    给对象新增属性，可以采用以下几种方式：
    1. this.student = {
    2.  ...this.student,
    3.  gender: '男'
    4. }
    5. // 方法二
    6. this.$set(this.student, 'gender', '男');
    7. // 方法三
    8. this.student = Object.assign({}, this.student, { gender: '男' });
    通过下标修改数组的元素，或者修改数组的长度，可以采用以下几种方式：
    1. // 修改数组元素方法一：
    2. this.arr.splice(0, 1, 'd');
    3. // 修改数组元素方法二：
    4. this.$set(this.arr, 0, 'd');
    5. // 清空数组：
    6. this.arr = [];
    7. // 修改数组的长度
    8. this.arr.splice(0)