在 Vue 3 模板中调用带参数的函数时，需注意 ref 会被自动解包（unwrapped），导致传入的是原始值而非响应式引用，从而引发 Cannot assign to property 'value' 错误。正确做法是避免在模板中直接传递 ref，改用计算属性 + 索引管理或闭包封装。
在 vue 3 模板中调用带参数的函数时，需注意 `ref` 会被自动解包（unwrapped），导致传入的是原始值而非响应式引用，从而引发 `cannot assign to property 'value'` 错误。正确做法是避免在模板中直接传递 `ref`，改用计算属性 + 索引管理或闭包封装。
Vue 3 的模板表达式会对 ref 进行自动解包（auto-unwrapping）：当你在 @click 中写 nextType(clothingTypes, selectedClothingType) 时，Vue 不会传入 ref 对象本身，而是将其 .value（即字符串 'blazerAndShirt'）作为第二个参数传入。因此函数体内执行 refVariable.value = ... 实际等价于 'blazerAndShirt'.value = ... —— 这在 JavaScript 中非法，自然抛出 TypeError。
✅ 正确且推荐的解决方案是分离状态与逻辑：用 ref 管理索引（而非直接存储值），再通过 computed 衍生当前项。这种方式更符合 Vue 的响应式设计哲学，也避免了模板中复杂的函数调用和参数传递：
import { ref, computed } from 'vue'
const clothingTypes = ['blazerAndShirt', 'blazerAndSweater', 'collarAndSweater', 'graphicShirt']
const currentItemIndex = ref(0) // ✅ 存储数字索引，非字符串值
// ✅ 自动响应索引变化，安全高效
const currentItem = computed(() => clothingTypes[currentItemIndex.value])
// ✅ 模板中直接调用，无需传参
function nextItem() {
currentItemIndex.value = (currentItemIndex.value + 1) % clothingTypes.length
}
function prevItem() {
currentItemIndex.value = (currentItemIndex.value - 1 + clothingTypes.length) % clothingTypes.length
}模板中使用简洁明了：
<button @click="nextItem">Next</button>
<button @click="prevItem">Prev</button>
<p>Current: {{ currentItem }}</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill8748" title="vue-composition-api-best-practices"><img
src="https://img.php.cn/upload/skill/000/000/081/179222222327548.jpg" alt="vue-composition-api-best-practices" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill8748" title="vue-composition-api-best-practices">vue-composition-api-best-practices</a>
<p>Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。</p>
</div>
<a href="/xiazai/skill8748" title="vue-composition-api-best-practices" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>⚠️ 注意事项：
- 若必须在模板中传参（如通用切换器），可改用箭头函数闭包方式保留
ref引用（但不推荐用于高频操作）：<!-- 仅当无法重构逻辑时使用 --> <button @click="() => nextType(clothingTypes, selectedClothingType)">Next</button>
并确保函数定义中不修改传入参数本身，而是显式访问
.value：const nextType = (array, refVar) => { const idx = array.indexOf(refVar.value) refVar.value = array[(idx + 1) % array.length] }⚠️ 此写法虽能工作，但违背 Vue 模板解包语义，易引发理解偏差，应优先采用索引+计算属性方案。
总结：Vue 3 模板中的函数调用本质是执行上下文内的普通 JS 表达式，而 ref 解包是其核心机制之一。掌握这一原理，就能避开“value 不可赋值”的典型陷阱，并写出更清晰、可维护的响应式逻辑。
