vue3中computed set 方法参数来源

在Vue 3中，`set` 方法主要用于响应式系统中的数据劫持，通常它是与 `get` 方法一起使用的，组成计算属性（Computed）。当你在一个 `computed` 中定义了一个 `set` 方法时，这个方法会在依赖的数据改变时自动被调用。

`set` 方法的基本语法如下：

this.$set(object, key, value)

其中：
- `object`：你需要修改的对象，它需要是一个响应式的实例或对象字面量。
- `key`：你想设置的新值的键。
- `value`：新的值，可以是任意类型的值。

当你通过`.sync`修饰符去设置 computed 的值时，Vue 会尝试将该操作变成一个同步操作，这意味着 `set` 方法会被立即触发，并且在当前的运行时周期内更新视图。

例如：

data() {
  return {
    count: 0,
  }
},
computed: {
  doubledCount: {
    get() {
      return this.count * 2;
    },
    set(value) {
      // 当外部直接设置 doubledCount，this.count 也会同步更新
      this.$set(this, 'count', Math.floor(value / 2));
    },
  },
}

相关问题

vue3computed set的参数

Vue3中的`set`方法是响应式数据系统的一部分，它主要用于Vue `reactive`对象上，也就是当你通过`defineProperty`创建了一个可观测的数据时，可以使用`set`来更新这个数据并触发视图的更新。`set`方法的主要参数包括：

1. **key**（必需）：要设置的新键名。
2. **value**（必需）：新的值。当提供新值时，会触发`getter`到`setter`的转换过程，如果`setter`存在的话。
3. **oldValue**（可选）：旧的值。这是`set`内部用来比较新旧值是否改变的参数。通常不需要直接传递。

`this.$set(obj, key, value)`的形式用于Vue实例对象中动态添加或更新响应式的属性。例如：

data() {
  return {
    obj: { prop: 'initial' }
  }
}

methods: {
  updateProp() {
    this.$set(this.obj, 'prop', 'new value');
  }
}

在这个例子中，调用`updateProp`函数会触发`obj.prop`的更新，并使得视图相应地更新。

vue3 computed get set

Vue3中的computed属性可以通过get和set方法来实现对计算属性的读取和修改。其中get方法用于获取计算属性的值，set方法用于设置计算属性的值。在使用computed属性时，可以直接修改get方法中所依赖的响应式数据的值，从而触发计算属性的重新计算。而对于set方法，可以在修改计算属性的值时进行一些额外的操作，例如打印日志等。需要注意的是，set方法必须返回一个值，否则会导致计算属性的值无法被修改。

在上述两个引用中，第一个引用展示了computed属性中get和set方法的用法，可以直接修改nextYear的值。而第二个引用展示了computed属性的基本用法，修改year，nextYear会跟着自动+1，但不能直接修改nextYear的值。