vue$set的用法

Vue的$set方法是为了解决双向绑定失效而生的。它是Vue的全局方法Vue.set的别名。使用$set方法时，我们只需要关注双向绑定失效的情况，然后使用$set来解决这个问题。[1]

一个示例的用法是，我们有一个示例数据info，其中包含了一些对象，每个对象有一个name和age属性。我们想要将这些数据格式化为一个新的对象newInfo，其中name作为键，age作为值。我们可以使用$set方法来实现这个目标。首先，我们对info进行循环遍历，然后使用$set方法将需要的数据格式添加到newInfo中。这样，我们就可以得到我们想要的数据格式。具体的代码如下所示：

newInfo: [],
info: [
  { age: 20, name: '张三' },
  { age: 30, name: '李四' },
  { age: 40, name: '王五' },
],

this.info.map((item) => {
  this.$set(this.newInfo, item.name, item.age);
});

console.log(this.newInfo); // this.newInfo: [{'张三', 20}, {'李四', 30}, {'王五', 40}]

这样，我们就可以得到格式化后的数据newInfo。[2]

另外，有时候我们可能会遇到一个问题，即新增的属性不是响应式的。在这种情况下，我们应该使用$set方法来添加属性。例如，我们有一个对象myInfo，我们想要添加一个age属性，并使其成为响应式的。我们可以使用$set方法来实现这个目标，代码如下所示：

this.$set(this.myInfo, 'age', 24);

这样，对象数据就变成了响应式的。[3]