vue computed set不生效

在Vue中，computed属性的set方法默认是不会被执行的，只有在对computed属性进行重新赋值时才会触发set方法。这是因为computed属性是根据它所依赖的响应式数据进行计算的，而set方法的作用是用于修改computed属性所依赖的响应式数据。

如果你想要在computed属性的set方法中执行一些操作，可以通过对computed属性进行重新赋值来触发set方法。例如，对于一个名为fullName的computed属性，你可以通过对它进行赋值来触发set方法，如下所示：

app.fullName = "new value";

这样就会触发fullName的set方法，并执行其中的操作。你可以在set方法中使用console.log()方法来输出一些信息，以便在控制台中查看set方法是否被执行。

请注意，如果你只是获取computed属性的值而没有对它进行重新赋值，那么get方法会被执行，而set方法不会被执行。

相关问题

vue3数据双向绑定的 computed不生效

### 解决Vue3中`computed`属性在数据双向绑定时不起作用的问题

当遇到 `v-model` 和 `computed` 属性一起使用时不生效的情况，通常是因为计算属性的 getter/setter 方法未被正确配置。为了实现双向绑定，需要确保计算属性不仅有返回值的方法（getter），还有设置新值的方法（setter）。下面是一个具体的解决方案[^1]。

#### 使用带有 Getter/Setter 的 Computed 实现双向绑定

通过定义具有 getter 和 setter 的 computed 属性来处理输入框的数据变化：

<template>
  <div>
    <!-- 绑定到计算属性 -->
    <input :value="message" @input="updateMessage">
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const originalMessage = ref('Hello');

// 定义带 getter 和 setter 的计算属性
const message = computed({
  get() {
    return originalMessage.value;
  },
  set(newValue) {
    originalMessage.value = newValue.target.value; // 更新原始数据
  }
});

function updateMessage(event){
  message.value = event.target.value;
}
</script>

在这个例子中，`originalMessage` 是存储实际数据的地方；而 `message` 则作为计算属性用于展示以及接收来自用户的更新。每当用户修改 `<input>` 中的内容时，都会触发 `@input` 事件并调用 `updateMessage()` 函数去改变 `message` 的值，进而影响到 `originalMessage` 的状态。

需要注意的是，在 Vue 3 中可以直接利用自定义组件上的 `v-model` 来简化上述过程，只要遵循特定命名约定即可。

对于更复杂的场景或第三方库中的组件，可能还需要查阅相应文档了解如何适配其内部逻辑以支持类似的双向绑定机制[^2]。