在 Vue 3 模板中调用含 ref 参数的函数时，需注意模板内自动解包（unref）特性：传入的是 ref 的值而非 ref 本身，直接修改 .value 会报错；推荐改用索引管理 + computed 的响应式方案。
在 vue 3 模板中调用含 ref 参数的函数时，需注意模板内自动解包（unref）特性：传入的是 ref 的值而非 ref 本身，直接修改 `.value` 会报错；推荐改用索引管理 + `computed` 的响应式方案。
在 Vue 3 的组合式 API（Composition API）中，模板表达式对 ref 的使用遵循自动解包规则：当 ref 作为普通参数传递给事件处理器（如 @click）时，Vue 会自动将其解包为内部值（即 ref.value），而非保留 ref 对象本身。这正是你遇到错误的根本原因：
// ❌ 错误根源：模板中 @click="nextType(clothingTypes, selectedClothingType)" // 实际传入的是：clothingTypes（数组） 和 "blazerAndShirt"（字符串） // 所以函数体内 refVariable === "blazerAndShirt" // 导致 refVariable.value = ... → 报错："can't assign to property 'value' on string"
✅ 正确实践：避免传 ref，改用索引驱动
更简洁、更符合 Vue 3 响应式设计哲学的方式是——不传递 ref，而是维护一个当前索引 ref，并通过 computed 衍生当前值：
import { ref, computed } from 'vue'
const clothingTypes = ['blazerAndShirt', 'blazerAndSweater', 'collarAndSweater', 'graphicShirt']
const currentItemIndex = ref(0) // ? 维护数字索引，非字符串值
// ✅ 安全更新：直接操作 ref.value（数字）
const nextItem = () => {
currentItemIndex.value = (currentItemIndex.value + 1) % clothingTypes.length
}
// ✅ 响应式派生：自动随 currentItemIndex 变化
const currentItem = computed(() => clothingTypes[currentItemIndex.value])模板中直接绑定方法名即可（无需箭头函数或手动调用）：
<!-- ✅ 正确：@click="nextItem" -->
<button @click="nextItem">Next Clothing Type</button>
<p>Current: {{ currentItem }}</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><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>⚠️ 注意事项与补充说明
-
不要在模板中用
() => fn(...)包裹带 ref 参数的函数：虽然能避免解包，但每次渲染都会创建新函数，影响性能且未解决根本逻辑问题； -
若必须传参操作 ref，请在 setup 内部封装（例如返回一个闭包）：
const nextType = (array, targetRef) => () => { const idx = array.indexOf(targetRef.value) targetRef.value = array[(idx + 1) % array.length] } // 模板中：@click="nextType(clothingTypes, selectedClothingType)"但此方式冗余，不如索引方案清晰可维护；
-
始终区分
ref与ref.value：在<script setup></script>中操作响应式数据必须显式使用.value；在模板中插值或绑定属性时 Vue 自动解包，无需.value。
综上，Vue 3 的最佳实践是让响应式逻辑内聚于组合式函数内部，模板仅负责触发行为，状态派生交由 computed 或 watch 处理——既规避解包陷阱，又提升代码可读性与可测试性。
