高级vue 组合api setup computed 用法

<script>

import { computed } from '@vue/reactivity';

import {ref,reactive,toRefs} from 'vue'

export default{

    setup(){

      let data=reactive({

        mes:6,

        userObj:{

          userName:'www.96net.com.cn'

        },

      });

      const add=()=>{

        data.mes++;

        console.log(data.mes)

      }

      const countNum=computed(()=>{

        return data.mes*7;

      });

      return {

        ...toRefs(data),

        add,

        countNum,

      }

    }

}

</script>

<template>

  <div id="as">

    {{userObj.userName}}

    <br>

    {{countNum}}

  </div>

  <button @click="add">+</button>

</template>

<style scoped>

</style>

注意  computed()是函数 方法体必须写到里面computed(()=>{})

文章来自 www.96net.com.cn