Vuejs: Die Referenz innerhalb der Funktion kann nicht geändert werden, die Referenz aus der Vorlage kann jedoch geändert werden

Question

Ich versuche Vue zu lernen und bin auf das folgende Problem gestoßen.

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

Das obige funktioniert einwandfrei. Wenn ich auf die Schaltfläche klicke, ändert sich der Text im Div in „den geänderten Namen“. Aber das Folgende funktioniert nicht, die Variable funktioniert immer noch nicht.

<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>

name 在函数中不可用吗？也使用了 defineExpose({name})

Answer 1

在模板内您可以使用引用名称。但在脚本中您应该使用 name.value。

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