面试题：Vue Provide/Inject中的响应式处理

Question

在使用Vue Provide/Inject进行跨层级组件通信时，如何确保注入的数据是响应式的？如果注入的数据发生变化，子组件如何实时感知并更新？请结合代码示例说明。

Answer 1

1. 确保注入数据响应式的方法：
   • 使用 reactive 或 ref 创建响应式数据。在 provide 时，传递这些响应式数据。
   • 例如，在父组件中：

<template>
  <div>
    <child - component></child - component>
  </div>
</template>

<script setup>
import { reactive, provide } from 'vue';
const sharedData = reactive({
  message: '初始消息'
});
provide('sharedData', sharedData);
</script>

2. 子组件实时感知并更新：
   • 在子组件中，通过 inject 获取数据。由于获取的是响应式数据，当数据变化时，子组件会自动更新。
   • 例如，子组件代码如下：

<template>
  <div>
    <p>{{ sharedData.message }}</p>
  </div>
</template>

<script setup>
import { inject } from 'vue';
const sharedData = inject('sharedData');
</script>

• 当在父组件中修改 sharedData.message 时，子组件中的显示会实时更新。例如，在父组件中添加一个按钮来修改数据：

<template>
  <div>
    <button @click="updateMessage">更新消息</button>
    <child - component></child - component>
  </div>
</template>

<script setup>
import { reactive, provide } from 'vue';
const sharedData = reactive({
  message: '初始消息'
});
provide('sharedData', sharedData);
const updateMessage = () => {
  sharedData.message = '更新后的消息';
};
</script>

此时点击按钮，子组件中的消息会实时更新。