快捷導(dǎo)航

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

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

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

先看錯(cuò)誤示例（你現(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)錯(cuò)：Write operation failed: computed value is readonly
const clear = () => {
  computedList.value = []  // ? 錯(cuò)誤：直接修改 computed
}
</script>

正確解決方案（2 選 1）

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

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

<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ì)算屬性，手動(dòng)實(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,  // 讀取時(shí)返回原始值
  set: (val) => {  // 賦值時(shí)自動(dòng)執(zhí)行
    list.value = val
  }
})
// 現(xiàn)在可以直接賦值了！
const clear = () => {
  computedList.value = []  // ? 正常運(yùn)行
}
</script>

針對(duì)你的場(chǎng)景：賦值為空最簡代碼

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

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

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

總結(jié)

永遠(yuǎn)不要直接修改 computed，它是只讀的
清空/賦值優(yōu)先改依賴的原始 ref/reactive 數(shù)據(jù)（方案1）
必須直接賦值就用可寫 computed（方案2）
報(bào)錯(cuò)本質(zhì)：試圖修改只讀的計(jì)算屬性

到此這篇關(guān)于Vue3報(bào)錯(cuò)computed value is readonly的解決方案的文章就介紹到這了,更多相關(guān)Vue3報(bào)錯(cuò)解決內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: