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

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

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