「这是我参与11月更文挑战的第19天，活动详情查看：2021最后一次更文挑战」。

1. Vue.set

向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。这个对象不能是 Vue 实例，也不能是 Vue 实例的根数据对象。

Vue.set( target, propertyName/index, value )

参数：

target：Object | Array，要修改的对象、数组
propertyName/index：string | number，对象属性、索引值
value：修改后的值

返回值：设置的值。

2. vm.$set

这是全局Vue.set的别名，功能和用法与Vue.set相同。

3. 监测对象

Vue 会监视data中所有层次的数据，通过setter实现监测，且要在new Vue时就传入要监测的数据。

若在new Vue后，向对象中追加属性，Vue 默认不作处理。

若要给添加的属性做响应式处理，需要用到Vue.set方法，且添加的对象不能是 Vue 实例，也不能是 Vue 实例的根数据对象。

例如，在data中的student对象内，追加sex属性并作响应式处理：

data: {
    student: {
        name: 'tom',
        age: 18
    }
}

this.$set(this.student, 'sex', '男');

4. 监测数组

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。

这些包裹过的方法，实际上做了两件事：

调用原生的对应方法，对数组进行更新
重新解析模板，更新页面

这些被包裹过的方法包括：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

除此之外，若想使用不改变原数组的方法，例如filter()、concat()、slice()等，它们不会改变原数组，而是返回一个新的数组。当使用这些方法时，可以将得到的新数组，再赋值给相应的数据。

Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的启发式方法，用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

5. 数组中的对象

Vue 没有给数组中的元素作响应式处理，这是因为数组中的元素没有相应的getter和setter，例如，有如下数据：

data: {
    student: {
        name: 'Jone',
        age: 18,
        friends: [
            { name: 'Jack', age: 25 },
            { name: 'Tom', age: 16 }
        ]
    }
}

但是，若数组中的元素是对象，那么，Vue 会对数组中的对象作响应式处理：

可以直接修改数组中对象的属性值，会触发页面更新：

this.student.friends[0].name = '张三';

Vue 学习笔记 —— 监测数据（五）

1. Vue.set

2. vm.$set

3. 监测对象

4. 监测数组

5. 数组中的对象