面试题：Vue中Provide/Inject在父子组件通信场景下的使用细节

Question

在Vue项目里，有一个父组件Parent和子组件Child，使用Provide/Inject实现父组件向子组件传递数据，要求在父组件中提供一个名为'message'的数据，并在子组件中正确接收并展示，同时说明Provide/Inject在这种父子组件通信中的优势与局限性。

Answer 1

1. 父组件Parent代码

<template>
  <div>
    <Child />
  </div>
</template>

<script setup>
import Child from './Child.vue'

const message = '这是来自父组件的数据'

provide('message', message)
</script>

2. 子组件Child代码

<template>
  <div>
    <p>{{ injectedMessage }}</p>
  </div>
</template>

<script setup>
const injectedMessage = inject('message')
</script>

3. Provide/Inject优势

• 跨层级传递数据方便：对于多层嵌套的组件结构，不需要在每层中间组件都传递数据，减少了中间组件的代码冗余，提高开发效率。例如一个多层级菜单组件，顶层组件通过Provide传递数据，底层菜单项组件直接Inject接收，无需中间层传递。
• 解耦父子组件：父组件不需要知道哪些子组件使用了它提供的数据，子组件也不需要关心数据具体来自哪个父组件，降低了组件间的耦合度。

4. Provide/Inject局限性

• 数据响应式问题：默认情况下，通过Provide传递的数据不是响应式的。如果传递的是普通数据类型，子组件无法感知父组件数据的变化。若要实现响应式，需要传递ref或reactive定义的数据。
• 调试困难：由于数据传递是隐式的，在大型项目中追踪数据来源和流向变得困难，不利于代码的维护和调试。