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