vue3中的setup与计算属性

export default {
    name:'Cloud',
    props:['name'],//没有完全接收，控制台会出错
    emits:[],
    setup(props,ctx){//setup在beforeCreate之前执行一次，this是undefined
        console.log(props)//props组件外部传递过来，组件内部声明接收的属性
        console.log(ctx.attrs)//与vue2中$attrs相似,组件内部没有声明接收的属性
        console.log(ctx.slots)//收到的插槽内容，与this.$solt
        console.log(ctx.emit)//相当于this.$emit

        const person = reactive({
            leftname:'left',
            rightname:'right'
        })
        // person.fullname = computed(()=>{
        //     return person.leftname + person.rightname
        // })//简写
        person.fullname = computed({
            get(){
                return person.leftname +'-'+ person.rightname
            },
            set(value){
                let newarr = value.split('-')
                person.leftname = newarr[0]
                person.rightname = newarr[1]
            },
        })//完整写法
        return{
            person
        }
    }
}