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