$set和$delete

数组、对象要改变某一个项的值

直接用下标更改数组的某一项无法导致视图更新。为什么：因为Vue的底层原因，察觉不到数组某一项的变化。

Vue能够检测到数组的变化是7个方法：

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

说白了，就是数组的上面7个方法，能够引发视图更新。
但是，“用下标直接改变某个数组项”的这个行为是无法被检测到的。

解决办法①：使用Vue提供的$set()

this.$set(this.arr, 2, 'X');

表示我要改变this.arr的下标为2的项，改为X。

解决办法②：使用“map”

this.arr = this.arr.map((item, index) => index == 2 ? "X" : item);

对象要增加属性

this.$set() 还有一种使用情形，就是给对象添加键名的时候，也不会引发视图更新：

解决方法①：使用Vue提供的$set()

this.$set(this.obj, 'd', 4);

解决办法②：使用 ... 运算符

this.obj = { ...this.obj, c: 9 };

this.$delete

删除对象的键名，无法引发视图更新。

delete this.obj.a; // 这句话是一个正确的语句，功能是删除a属性，但是Vue中不引发
视图更新

使用方法是使用this.$delete：

this.$delete(this.obj, 'a');

也可以用于数组删除项

this.$delete(this.arr, 2); // 删除了下标为2的项，等价于this.arr.splice(2, 1)。而
splice能够引发视图更新，所以数组删除某项，splice就行，不用$delete。