vue3 $set用法

`$set`是Vue 3中的一个重要工具，它用于在响应式系统中动态添加或修改数据属性。在Vue中，直接修改data对象的已声明属性不会触发视图更新，但使用`$set`方法却可以。

$set的基本用法如下：

this.$set(obj, key, value);

- `obj`：你需要操作的目标对象，通常是Vue实例的data对象。
- `key`：你想要添加或修改的属性名。
- `value`：你想要设置的新值。

例如：

// 初始化对象
const app = new Vue({
  data: {
    user: {
      name: 'John'
    }
  }
});

// 使用 $set 添加新的嵌套属性
app.$set(app.user, 'address', '123 Street');

// 这样做会触发视图更新，因为`address`是在运行时添加的
console.log(app.user); // { name: 'John', address: '123 Street' }

值得注意的是，`$set`对数组的处理也有所不同。当你需要在数组的特定索引处插入或删除元素时，`$set`会自动处理数组的更新，而直接使用数组的索引操作（如`arr[index] = value`）则不会。

相关问题

vue2 $set的用法

`$set` 是 Vue.js 2.x 版本中的一个辅助函数，它用于在响应式系统中安全地更新一个已观测的对象属性，特别是在深层次嵌套的数据结构中。当你直接使用 `obj.key = value` 更新对象时，Vue 可能无法检测到这个变化；而通过 `$set` 函数，你可以确保属性的变化被记录下来，并触发视图更新。

使用 `$set` 的基本语法如下：

this.$set(obj, key, value);

这里的 `obj` 是目标对象，`key` 是你想要设置的新属性名，`value` 是新值。例如：

// 初始化数据
data() {
  return {
    user: { name: 'John' }
  };
}

// 使用 $set 更新
methods: {
  updateName(newName) {
    this.$set(this.user, 'name', newName);
  }
}

在这个例子中，如果你调用 `updateName('Jane')`，Vue 将会正确地感知到并更新 UI 中的 `name` 属性。

vue中$set的用法

在Vue中，$set是用来更新数组或对象的方法。它的语法为：

Vue.set(target, key, value)

其中，target是要更新的数组或对象，key是要更新的属性名或数组下标，value是要更新的值。

使用$set的好处在于，它能够触发响应式更新。换句话说，当我们直接使用下标或属性名来更新数组或对象时，Vue无法检测到这个变化，从而无法更新视图。而使用$set可以告诉Vue有一个新的属性被添加或已经被更新，从而触发视图的更新。

举个例子，我们有一个数组：

data: {
  list: ['a', 'b', 'c']
}

如果我们直接使用下标来更新数组：

this.list[0] = 'd'

这个变化不会被Vue检测到，因此视图不会更新。而如果我们使用$set来更新数组：

Vue.set(this.list, 0, 'd')

这个变化就会被Vue检测到，并触发视图的更新。

同样的，如果我们有一个对象：

data: {
  obj: {
    name: 'Tom',
    age: 18
  }
}

如果我们直接使用属性名来更新对象：

this.obj.name = 'Jerry'

这个变化也不会被Vue检测到。而如果我们使用$set来更新对象：

Vue.set(this.obj, 'name', 'Jerry')

这个变化就会被Vue检测到，并触发视图的更新。

总之，$set方法能够让我们在更新数组或对象时，让Vue能够检测到变化，从而触发视图的更新。