Vue中$set用法解析

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值，但是遇到以下情况不会进行数据的双向绑定。

• 当你利用索引直接改变一个数组项时；例如：vm.arr[index] = value;
• 当你修改数组长度时；vm.arr.length = value;

当数据没有被双向绑定的时候，我们就需要使用set了;

<template><div><ul><li v-for="value in user" :key="value">{{ value }}</li></ul><button @click="add">添加属性</button></div>
</template><script>
export default {data() {return {user: {name: "哈利波特",},};},methods: {add() {this.user.sex = "男";console.log(this.user)},},
};
</script>

点击button会发现，obj.b已经成功添加，但是视图层未刷新。这是因为在vue实例创建时，obj.b并未声明，因此就没有被Vue转换为响应式的属性，自然就不会触发视图的更新，这时就需要使用Vue的全局api——$set()了；

        add() {this.$set(this.user,'sex','女')},

$set()方法相当于手动的去把user.sex处理成一个响应式的属性，此时视图也会跟着变了；