vue(34)vue中CompositionAPI中计算属性computed的使用

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