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