面试题：什么是 Vue 的 provide 和 inject？

provide 和 inject 是 Vue 提供的一种高级组件通信方式，主要用于跨层级组件之间的数据传递。它们通常用于解决 prop 逐级透传（prop drilling）的问题，即在多层嵌套组件中，避免通过 props 一层层传递数据。

1. `provide` 和 `inject` 的作用

provide：在父组件或祖先组件中定义需要提供给后代组件的数据或方法。
inject：在后代组件中接收祖先组件通过 provide 提供的数据或方法。

provide 和 inject 是一对多的关系：一个组件可以通过 provide 提供数据，而任意层级的后代组件都可以通过 inject 接收这些数据。

2. 基本用法

父组件（提供数据）

在父组件中使用 provide 提供数据：

export default {
  provide() {
    return {
      message: 'Hello from parent',
      user: {
        name: 'Alice',
        age: 25
      }
    };
  }
};

子组件（注入数据）

在后代组件中使用 inject 接收数据：

export default {
  inject: ['message', 'user'],
  mounted() {
    console.log(this.message); // 输出: Hello from parent
    console.log(this.user.name); // 输出: Alice
  }
};

3. 响应式数据

默认情况下，provide 提供的数据是非响应式的。如果需要提供响应式数据，可以使用 computed 或 ref/reactive（Vue 3）。

Vue 2 中使用 `computed`

export default {
  data() {
    return {
      count: 0
    };
  },
  provide() {
    return {
      count: computed(() => this.count) // 使用 computed 实现响应式
    };
  }
};

Vue 3 中使用 `ref`/`reactive`

import { ref, provide } from 'vue';

export default {
  setup() {
    const count = ref(0);
    provide('count', count); // 提供响应式数据
    return { count };
  }
};

4. 适用场景

provide 和 inject 适用于以下场景：

跨层级组件通信：
- 当组件层级较深时，避免通过 props 逐层传递数据。
- 例如，在大型表单或复杂布局中，某些数据需要被多个嵌套组件共享。
全局状态管理：
- 在小型项目中，可以用 provide 和 inject 替代 Vuex 或 Pinia，实现简单的全局状态管理。
插件或组件库开发：
- 在开发插件或组件库时，可以通过 provide 向用户组件注入一些方法或配置。

5. 注意事项

非响应式问题：默认情况下，provide 提供的数据是非响应式的。如果需要响应式数据，需手动处理（如使用 computed 或 ref/reactive）。
命名冲突：inject 的数据名称可能与组件自身的属性或方法冲突，需注意命名规范。
过度使用问题：provide 和 inject 会破坏组件的封装性，过度使用可能导致代码难以维护。建议仅在必要时使用。

6. 示例：跨层级组件通信

父组件

<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  provide() {
    return {
      theme: 'dark'
    };
  }
};
</script>

子组件

<template>
  <div>
    <GrandChildComponent />
  </div>
</template>

<script>
import GrandChildComponent from './GrandChildComponent.vue';

export default {
  components: { GrandChildComponent }
};
</script>

孙子组件

<template>
  <div :class="theme">
    Current theme: {{ theme }}
  </div>
</template>

<script>
export default {
  inject: ['theme']
};
</script>

总结

provide：在祖先组件中提供数据或方法。
inject：在后代组件中注入数据或方法。
适用场景：跨层级组件通信、全局状态管理、插件开发等。
注意事项：默认非响应式，需手动处理响应式数据；避免过度使用。

provide 和 inject 是 Vue 中非常强大的特性，能够有效解决复杂组件树中的数据传递问题。

THE END

Vue 进阶面试题