Vue3报错computed value is readonly的解决方案

<script setup>
import { computed, ref } from 'vue'
const list = ref([1,2,3])
// 计算属性是只读的！
const computedList = computed(() => list.value)
// 点击清空 → 报错：Write operation failed: computed value is readonly
const clear = () => {
  computedList.value = []  // ❌ 错误：直接修改 computed
}
</script>

<script setup>
import { computed, ref } from 'vue'
// 原始响应式数据
const list = ref([1,2,3])
const computedList = computed(() => list.value)
// 正确：修改原始值
const clear = () => {
  list.value = []  // ✅ 正确
}
</script>
<template>
  <button @click="clear">清空</button>
</template>

<script setup>
import { computed, ref } from 'vue'
const list = ref([1,2,3])
// 可写计算属性
const computedList = computed({
  get: () => list.value,  // 读取时返回原始值
  set: (val) => {  // 赋值时自动执行
    list.value = val
  }
})
// 现在可以直接赋值了！
const clear = () => {
  computedList.value = []  // ✅ 正常运行
}
</script>

// 原始数据
const formData = ref({ name: 'test' })
const computedForm = computed(() => formData.value)

// 清空函数
const reset = () => {
  formData.value = {} // ✅ 不报错，计算属性自动更新
}