快捷導(dǎo)航

Vue3報(bào)錯computed?value?is?readonly的解決方案

更新時間：2026年03月26日 08:49:59 作者：還是大劍師蘭特

這篇文章主要為大家詳細(xì)介紹了Vue3報(bào)錯computed?value?is?readonly的原因排查和解決方法,文中的示例代碼講解詳細(xì),有需要的小伙伴可以了解下

先看錯誤示例（你現(xiàn)在的代碼）

<script setup>
import { computed, ref } from 'vue'
const list = ref([1,2,3])
// 計(jì)算屬性是只讀的！
const computedList = computed(() => list.value)
// 點(diǎn)擊清空 → 報(bào)錯：Write operation failed: computed value is readonly
const clear = () => {
  computedList.value = []  // ? 錯誤：直接修改 computed
}
</script>

正確解決方案（2 選 1）

方案 1：直接修改 computed 依賴的原始值（推薦）

computed 的值來自原始響應(yīng)式數(shù)據(jù)，你清空原始值即可，計(jì)算屬性會自動更新。

<script setup>
import { computed, ref } from 'vue'
// 原始響應(yīng)式數(shù)據(jù)
const list = ref([1,2,3])
const computedList = computed(() => list.value)
// 正確：修改原始值
const clear = () => {
  list.value = []  // ? 正確
}
</script>
<template>
  <button @click="clear">清空</button>
</template>

方案 2：使用可寫的 computed（writable computed）

如果你必須直接給計(jì)算屬性賦值，就用可寫計(jì)算屬性，手動實(shí)現(xiàn) get 和 set。

<script setup>
import { computed, ref } from 'vue'
const list = ref([1,2,3])
// 可寫計(jì)算屬性
const computedList = computed({
  get: () => list.value,  // 讀取時返回原始值
  set: (val) => {  // 賦值時自動執(zhí)行
    list.value = val
  }
})
// 現(xiàn)在可以直接賦值了！
const clear = () => {
  computedList.value = []  // ? 正常運(yùn)行
}
</script>

針對你的場景：賦值為空最簡代碼

如果你是要清空成空字符串/空數(shù)組/空對象，直接用方案 1：

// 原始數(shù)據(jù)
const formData = ref({ name: 'test' })
const computedForm = computed(() => formData.value)

// 清空函數(shù)
const reset = () => {
  formData.value = {} // ? 不報(bào)錯，計(jì)算屬性自動更新
}