Vue3.0 computed()使用

<template>
    <input type="text" v-model="firstName"/>
    <input type="text" v-model="lastName"/>
    <b>{{fullName}}</b>
</template>

<script>
import {computed, reactive, toRefs} from 'vue';
export default {
    name: "Computed",
    setup(){
        const userName = reactive({
            firstName: "张",
            lastName: "大哈",
        });
        // 不使用 computed
        const fullName = userName.firstName + userName.lastName;
        // 使用 computed
        const fullName = computed(()=>{
            return userName.firstName + userName.lastName;
        });
        return {
            ...toRefs(userName),
            fullName,
        };
    },
}
</script>