这是我参与11月更文挑战的第26天，活动详情查看：2021最后一次更文挑战

provide 与 inject

作用：实现祖孙组件间通信
套路：父组件有一个provide 选项来提供数据，子组件有一个inject选项来开始使用这些数据

具体写法：

1：祖组件中：

setup(){
    ....
    let car = reactive({name:'liudan',price:40})
    provide('car',car)
}

2:孙组件中：

setup(){
    ....
    const car = inject('car')
    return{
        car
    }
    ...
}

响应式数据的判断

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

setup(){
    let car = reactive({name:'liudan',price:90})
    let sum = ref(0)
    let car2 = readonly(car)
    
    console.log(isRef(sum))//true
    console.log(isReactive(car))//true
    console.log(isReadonly(car2))//true
    console.log(isProxy(car))//true
    console.log(isProxy(sum))//false
}

optionsAPI存在的问题

使用传统optionsAPI中，新增或者修改一个需求就需要分别在data，methods，computed里面修改（所有功能的组成部分都拆散了）

compositionAPI的优势

我们可以更加优雅地组织我们的代码，函数，让相关功能的代码更加有序的组织在一起（hooks）

新的组件

Fragment

在vue2中：组件必须有一个根标签在vue3中：组件可以没有根标签，内部会将多个标签包含在一个Fragment虚拟元素中好处：减少标签层级，减少内存占用

Teleport

什么是Teleport？------是一种能够将我们的组件HTML结构移动到指定位置的技术

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

我们可以看到，在代码中写在同一个组件中的内容，实际渲染到浏览器上的结构并不在同一个层级下，我们通过Teleport这个技术将部分内容移动到了body这个层级下，同时我们的样式也可以根据要移动到层级来写了，很方便，很有用！！

vue3 provide 与 inject、Fragment、 Teleport、响应式数据的判断