• 通过vue按需引入computed
  • 进行属性的复杂计算
<template>
  <div>num:{{ num }}</div>
  <el-button type="primary" @click="handleNumPlus">num++</el-button>
  <div>resNum:{{ resNum }}</div>
</template>

<script>
import { defineComponent, reactive, toRefs, computed } from "vue";

export default defineComponent({
  name: "Box",
  setup() {
    let state = reactive({
      num: 1,
      resNum: computed(()=> state.num*2),
    });

    let handleNumPlus = ()=>{
      ++state.num;
    }
    
    return {
      ...toRefs(state),
      handleNumPlus,
    };
  },
});
</script>