Vue3中provide/inject 和expose/import的差别

provide/inject 和直接expose/import的差别

我的理解在于主要在于provide/inject构造了树形结构，比如这样的一个例子：

App.vue

<template>
<com-one-vue>
  <com-two-vue></com-two-vue>
</com-one-vue>
<com-one-vue>
  <com-three-vue></com-three-vue>
</com-one-vue>
</template>
<script setup>
import { provide, ref } from '@vue/runtime-core';
import comOneVue from './components/comOne.vue';
import comTwoVue from './components/comTwo.vue';
import comThreeVue from './components/comThree.vue';
</script>

comOne.vue

<template>
    <slot></slot>
</template>
<script setup>
import { provide, ref } from "@vue/runtime-core";
provide('name',ref('one'))
</script>

comTwo.vue

<template>
<div style="background:green;">
<p>comTwo</p>
{{name}}
</div>
</template>
<script setup>
import { inject, ref } from "@vue/runtime-core";
const name = inject('name')
</script>

comThree.vue

<template>
<div style="background:red;">
<p>comThree</p>
{{name}} 
</div>   
</template>
<script setup>
import { inject } from "@vue/runtime-core";
    const name = inject('name')
    name.value = 'one for three'
</script>

那么此时：

现在的结构为：

<com-one-vue>
  <com-two-vue></com-two-vue>
</com-one-vue>
<com-one-vue>
  <com-three-vue></com-three-vue>
</com-one-vue>

构造了两个“组件树”中的数据是不会互相影响的。在comTwo中的数据依旧是由自己本身的父辈传来的。

而如果我们此时使用export和import的方式，显然是会影响所有的子组件，即使他们不是同一个组件。