开会员与付费前请必须阅读这篇文章，在首页置顶第一篇：（进站必看本站VIP介绍/购买须知）
本站所有源码均为自动秒发货，默认（百度网盘）
本站所有源码均为自动秒发货，默认（百度网盘）
你想知道在 Vue 3 中如何把
computed 计算属性设置为可写的，而不是默认的只读状态，对吧？可写计算属性的实现方式
Vue 3 的
computed 默认是只读的，要实现可写的计算属性，需要给 computed 传入一个包含 get（读取）和 set（设置）方法的对象，而不是单一的回调函数。完整代码示例
vue
<template>
<div>
<!-- 直接修改可写计算属性 -->
<input v-model="fullName" placeholder="输入全名" />
<p>姓：{{ firstName }}</p>
<p>名：{{ lastName }}</p>
<p>全名（可写）：{{ fullName }}</p>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
// 基础响应式数据
const firstName = ref('张')
const lastName = ref('三')
// 可写的计算属性
const fullName = computed({
// get 方法：读取计算属性时触发，返回计算后的值
get() {
return `${firstName.value}${lastName.value}`
},
// set 方法：修改计算属性时触发，接收修改后的值作为参数
set(newValue) {
// 自定义逻辑：把传入的全名拆分为姓和名
const [newFirst, newLast] = newValue.split('')
// 更新基础响应式数据
if (newFirst) firstName.value = newFirst
if (newLast) lastName.value = newLast
}
})
</script>
代码关键解释
-
get方法：- 当读取
fullName时自动触发，逻辑和普通只读计算属性一致，返回基于基础数据计算后的值。 - 这里的逻辑是把
firstName和lastName拼接成全名。
- 当读取
-
set方法：- 当尝试修改
fullName（比如通过v-model输入、直接赋值fullName.value = '李四'）时触发。 - 接收一个参数
newValue，表示修改后的值，你可以在这个方法里自定义逻辑，把新值拆解后更新底层的响应式数据（firstName/lastName）。
- 当尝试修改
-
使用场景：
- 比如表单中需要 “合并 / 拆分” 数据的场景（如示例中的全名拆分）、联动修改多个响应式数据的场景。
测试效果
- 初始显示：全名是 “张三”；
- 在输入框中输入 “李四”，
set方法会触发，拆分出 “李” 和 “四”，分别更新firstName和lastName； - 页面上的 “姓”“名”“全名” 会同步更新为 “李”“四”“李四”。
总结
- 可写计算属性需要给
computed传入包含get和set的对象，而非单一函数； get负责返回计算后的值（只读逻辑），set负责接收新值并更新底层响应式数据；- 修改可写计算属性时（如
xxx.value = 新值或v-model），会触发set方法，而非直接修改计算属性本身。
