少走弯路之vue3+ts开发摸黑经验

①、 vue3采用compositionAPI

也称组合式API，根据逻辑相关性来组织代码，和vue2的optionsAPI相比，提高了可读性和维护性。
注：打包时未使用的api不会被打入 🔮

②、 跨组件传值使用provide和inject

provide 可以在祖先组件中指定我们想要提供给后代组件的数据或方法，而在任何后代组件中，我们都可以使用 inject 来接收 provide 提供的数据或方法。

provide和inject需要显式导入使用，这对选项是一起使用的，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。

import { provide , inject } from 'vue'
    // a.vue 传值
    provide('msg','Hello')
    // b.vue 取值
    inject('msg')

注意：inject()只能放在setup()的生命周期里运行，不能放在别的生命周期或事件周期里运行（比如异步请求、事件回调等）：

    Promise.resolve().then(()=>{
        console.log(inject('msg')) // 取不到
    })

③、组件import后无需注册

④、setup()函数需要有返回值，可使用语法糖

⑤、setup提供4个全局编译器宏

⑴ 使用defineProps来声明props，它具备完整的类型推断，在<script setup>中可以直接使用
仅限ts的功能 仅能定义默认类型 不能提供默认值

    const props = defineProps<{
        str: string
        num: number
    }>()
    const emits = defineEmits<{
        (e: 'change', id: number): void
        (e: 'update', value: string): void
    }>()

⑵ 仅限类型的defineProps的不足之处在于不能赋予默认值，为了解决这个问题提供了withDefaults的编译器宏 若要定义默认值，需使用以下方法

    interface Props {
        msg: string
        label: string[]
    }
    const props = withDefaults(defineProps<Props>,{
        msg: 'Hello'
        label: ()=> ['a','b']
    })

然鹅我们项目中绝大多数是这样写的……

    const props = defineProps({
        msg: {
            type: string,
            default: 'Hello',
            required: false
        }
    })

⑶ defineExpose：在<script setup>中组件默认是关闭的，通过ref或$parent链能获取到组件的公开实例，不会暴露<script setup>中声明的绑定
⑷ defineEmits声明emits，它具备完整的类型推断，在<script setup>中可以直接使用

⑥、setup模式下使用router、store

    import { useRouter, useRoute } from 'vue-router';
    import { useStore } from '@/store';
    
    const $router = useRouter();
    const store = useStore();

未完待续 …… 🐝