Vuejs：無法修改函數內的引用，但可以從範本修改引用

Question

我正在嘗試學習 Vue，並遇到了以下問題。

<template>
    <div>{{ name }}</div>
    <button @click="name = 'changed name'">Change</button>
</template>
<script setup>
    import { ref } from 'vue';
    let name = ref('first');
</script>

以上工作正常，當我單擊按鈕時，div 內的文字更改為更改的名稱。但下面不起作用，變數 name 在函數中不可用嗎？也使用了 defineExpose({name}) ，仍然不起作用。

<template>
    <div>{{ name }}</div>
    <button @click="changeName">Change</button>
</template>
<script setup>
    import { ref } from 'vue';
    let name = ref('first');
    const changeName = () => {
        name = 'changed name';
    }
</script>

Answer 1

在範本內您可以使用參考名稱。但在腳本中您應該使用 name.value。

<script setup>
        import { ref } from 'vue';
        const name = ref('first');
        const changeName = () => {
            name.value = 'changed name';
        }
    </ script>