useSet 应用：操作列表与渲染列表

export default function usePopForm (props, ctx){

    const localNotifie = ref(props.notifie)
    // 列表set映射
    const [ set, { add, remove, update } ] = useSet(localNotifie.value.target)

    // 响应props
    watch(() => props.notifie, () => {
        localNotifie.value = cloneDeep(props.notifie)
        update(props.notifie.target)
    })
    
    // 同步set到渲染列表
    watch(() => set.value, () =>{
        localNotifie.value.target = [...set.value]
    })

    const onAddHandler = () => {
        add({
            label:"new tag",
            key: 10
        })
    }
    
    const onDelHandler = (val) =>{
        remove(val)
    }

    const onDialogEnterHandler = () => {
        ctx.emit('enter', localNotifie.value)
    }

    const onDialogCancelHandler = () => {
        ctx.emit('cancel')
    }
    

    return {
        localNotifie,
        onAddHandler,
        onDelHandler,
        onDialogEnterHandler,
        onDialogCancelHandler
    }
   
}