vue3 中inject如何实现数据响应式

在Vue3中，可以使用`reactive`和`provide/inject`结合来实现响应式的数据传递。

具体来说，可以在`provide`中使用`reactive`创建一个响应式的对象，然后在`inject`中引入这个对象，就可以实现响应式数据的传递。

父组件中使用`provide`传递响应式数据：

import { reactive, provide } from 'vue';

export default {
  setup() {
    const state = reactive({
      data: 'Hello, Vue3',
    });
    provide('state', state);
    ...
  }
}

子组件中使用`inject`接收响应式数据：

import { inject, watchEffect } from 'vue';

export default {
  setup() {
    const state = inject('state');
    watchEffect(() => {
      console.log(state.data);
    });
    ...
  }
}

在子组件中对`state`的修改会触发父组件中的响应式更新。

需要注意的是，如果需要在子组件中修改父组件的响应式数据，可以使用`toRefs`将响应式对象转化为普通对象，然后再进行修改。

import { inject, toRefs } from 'vue';

export default {
  setup() {
    const { state } = toRefs(inject('state'));
    state.data = 'Hello, world';
    ...
  }
}

这样就可以实现在子组件中修改父组件的响应式数据了。