vue $set使用

Vue.js是一个MVVM框架，它通过数据绑定来实现视图和数据的同步。在Vue.js中，当我们需要动态添加一个属性到一个已经创建的对象上时，Vue.js并不会检测到这个变化，因为Vue.js在初始化实例时对属性进行了预处理，所以新添加的属性不会被观察到。这时候我们就需要使用Vue.js提供的$set方法来解决这个问题。

$set方法是Vue.js实例的一个方法，它可以用来向一个已经创建的对象添加一个新的属性，并且能够触发视图的更新。$set方法的语法如下：

this.$set(object, propertyName, value)

其中，object是要添加属性的对象，propertyName是要添加的属性名，value是要添加的属性值。

举个例子，假设我们有一个data对象，它包含一个数组list和一个对象userProfile：

data: {
  list: [1, 2, 3],
  userProfile: {
    name: 'Tom',
    gender: 'male'
  }
}

如果我们想要向userProfile对象中添加一个age属性，我们可以使用$set方法：

this.$set(this.userProfile, 'age', 27)

这样就可以向userProfile对象中添加一个age属性，并且能够触发视图的更新。

相关问题

vue $set原理

$是Vue框架中的一个方法，它的作用是在改变对象或数组的属性值时触发视图的更新。具体原理如下：

1. 首先，Vue在原型上添加了$set方法，该方法接收三个参数：目标对象、属性名和属性值。

2. 当需要改变对象的已有属性时，$set方法会直接修改目标对象中对应属性的值。

3. 当目标对象是数组时，$set方法会利用Vue内部拦截处理后的数组的splice方法进行赋值。Vue对数组的'push'、'pop'、'shift'、'unshift'、'splice'、'sort'、'reverse'方法进行拦截处理，使其成为响应式的。通过调用这些方法，可以触发视图的更新。但是直接通过下标赋值的方式如arr=2是不会触发视图更新的。

4. 当需要新增属性时，$set方法会通过defineReactive将数据转化为getter和setter的方式，并触发数据变化通知。这样新增的属性也能被观察并触发视图的更新。

综上所述，$set方法通过不同的处理方式来实现对目标对象的属性更新并触发视图的更新。

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]