Vuejs: Tidak boleh mengubah suai rujukan dalam fungsi, tetapi boleh mengubah suai rujukan daripada templat

Question

Saya cuba belajar Vue dan menghadapi masalah berikut.

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

Perkara di atas berfungsi dengan baik, apabila saya mengklik butang, teks di dalam div bertukar kepada nama yang ditukar. Tetapi yang berikut tidak berfungsi, pembolehubah name 在函数中不可用吗？也使用了 defineExpose({name}) , masih tidak berfungsi.

<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

Dalam templat anda boleh menggunakan nama rujukan. Tetapi dalam skrip anda harus menggunakan name.value.

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