6.15作业

1.hook

        -- hook本质是一个函数，把setup函数中使用的Composition API进行了封装。类似于vue2.x中的mixin。
        -- 自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。

2.Teleport

Teleport 是一种能够将我们的组件html结构移动到指定位置的技术。

<teleport to="移动位置">
    <div v-if="isShow" class="mask">
        <div class="dialog">
            <h3>我是一个弹窗</h3>
            <button @click="isShow = false">关闭弹窗</button>
        </div>
    </div>
</teleport>

3.vue2的mixins和vue3的hook有什么区别

        mixins是什么？
                开发中常常会遇到一些具有相同逻辑和功能的组件，mixins就是将这些多个相同的逻辑抽离出来，各个组件只需要引入mixins，就能实现一次写代码，多组件收益的效果
                特性1:mixins中的生命周期会与引入mixins的组件的生命周期整合在一起调用，但是mixins的生命周期比组件快
                特性2:组件的data/methods/filters会覆盖mixins里的同名data/methods/filters
                缺点
                        1、变量和方法来源不明确，隐式传入
                        2、多个mixins融合到一起会有冲突

        hook函数是什么？
                特性1:hook是使用vue3的组合API封装的可复用的功能函数
                特性2:类似于vue2的mixin技术
                优点:变量和方法都是显示传入，解决了来源不明的问题

4.Suspense

        等待异步组件时渲染一些额外内容，让应用有更好的用户体验
        使用步骤：
                异步引入组件
                 import {defineAsyncComponent} from ‘vue’
                 const Child = defineAsyncComponent(()=>import(‘./components/Child.vue’))
                 使用Suspense包裹组件，并配置好default 与 fallback

<template>
    <div class="app">
        <h3>我是App组件</h3>
        <Suspense>
            <template v-slot:default>
                <Child/>
            </template>
            <template v-slot:fallback>
                <h3>加载中.....</h3>
            </template>
        </Suspense>
    </div>
</template>

5.vue3响应式数据的判断？

        isRef: 检查一个值是否为一个 ref 对象
        isReactive: 检查一个对象是否是由 reactive 创建的响应式代理
        isReadonly: 检查一个对象是否是由 readonly 创建的只读代理
        isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理