<template>
<div class="home">
{{age}}
<br>
<button @click="add()">change</button>
<br>
{{nameAndAge}}//页面展示计算属性
</div>
</template>
<script>
import{ref,reactive,readonly,toRefs,computed}from 'vue' //引入computed
export default {
setup() {
let user = reactive({
name:'tom',
age:0
});
let nameAndAge = computed(()=>{//使用computed用响应式变量组合一个计算属性
return user.name+" "+user.age;
});
function add(){
user.age=user.age+1;
}
return { ...toRefs(user) ,add,nameAndAge};//返回nameAndAge计算属性
},
};
</script>