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>
posted @ 2021-07-20 16:40  maycpou  阅读(326)  评论(0编辑  收藏  举报