Vue.js问题：模板可修改ref值，函数内修改ref无效

你的问题核心是ref变量在<script setup>的函数中需要通过.value访问和修改，模板里的自动解包机制在函数内不生效。

为什么第一段代码有效？ #

在Vue模板中，ref变量会被自动解包，所以你写name = 'changed name'时，Vue实际上帮你处理成了name.value = 'changed name'，因此能触发响应式更新。

第二段代码无效的原因 #

在<script setup>的函数内部，ref不会自动解包。你写name = 'changed name'时，是把原来的ref对象直接替换成了一个普通字符串，这相当于切断了原有的响应式关联，页面自然不会更新。defineExpose在这里没用，因为问题和组件外部访问变量无关，是你修改变量的方式错了。

修正后的代码 #

<template>
    <div>{{ name }}</div>
    <button @click="changeName">Change</button>
</template>
<script setup>
    import { ref } from 'vue';
    let name = ref('first');
    const changeName = () => {
        // 必须通过.value修改ref内部的值
        name.value = 'changed name';
    }
</script>

补充提醒 #

• 所有在<script setup>的函数、计算属性等逻辑中操作ref变量时，都必须使用.value来访问和修改其值。
• 只有在模板和reactive对象中嵌套的ref才会自动解包，其他场景都需要手动写.value。

内容的提问来源于stack exchange，提问作者WebNovice