vue3 setup 语法糖的项目实战用法

vue3.2 之后语法糖

起初 Vue3.0 暴露变量必须 return 出来，template中才能使用；
这样会导致在页面上变量会出现很多次。
很不友好，vue3.2只需在script标签中添加setup。
可以帮助我们解决这个问题。

1.组件只需引入不用注册，属性和方法也不用返回，
也不用写setup函数，也不用写export default ，
甚至是自定义指令也可以在我们的template中自动获得。

1变量、方法不需要 return 出来
2组件不需要在注册
3新增 defineProps（语法糖默认引用  defineProps，不用import）

4子组件怎么向父组件抛出事件？defineEmits的到来！

5 子组件向父组件暴露方法 defineExpose（默认引用）

创建子组件的ref 调用方法

6 hooks 初用 （逻辑抽离复用，不用使用minxin方法）统一使用use开头
如果看过react的hooks 的一般用法 很好理解 vue的hooks用法
封装七牛云的图片上传 

import * as qiniu from "qiniu-js";
import {Toast} from 'vant'
import {ref} from 'vue'

export default function useUpload(){
    const  fileKey = ref('')
    const steUpload = async (token,file)=>{
        let percent = 0
        const config = {
            useCdnDomain: true,        //表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
            region: qiniu.region.z2,      //选择上传域名区域；当为 null 或 undefined 时，自动分析上传域名区域。  我这里是华东区
            domain: process.env["VUE_APP_UPLOAD_URL"] + '/upImg', //配置好的七牛云域名  如   https://cdn.qniyun.com/
            chunkSize: 1000,     //每个分片的大小，单位mb，默认值3
            forceDirect: true  ,  //直传还是断点续传方式，true为直传
            debugLogLevel:'INFO'
        }
        const putExtra = {
            fname: file.name,    //文件原始文件名
            params: {},
            mimeType: [] || null
        }
        const observable = await qiniu.upload(file, null , token, putExtra, config);

        fileKey.value = await new Promise((resolve,reject)=>{
            observable.subscribe({
                next: (result) => {
                    Toast.clear();
                    percent = result.total.percent.toFixed(0)
                    Toast.loading({
                        message: `上传进度${percent}%...`,
                        forbidClick: true,
                        loadingType: 'spinner',
                    });
                },
                error: (err) => {
                    //上传错误后触发
                    console.log(err,1111111111111111);
                    Toast.clear();
                    reject(false)
                },
                complete: (result) => {

                    Toast.clear();
                    resolve(result.key)
                },
            });
        })
    }
    return {
        fileKey,
        steUpload
    }
}