vue3 provide inject 具备响应式吗

程序员白彬

已于 2025-03-06 11:36:01 修改

阅读量1k

点赞数 18

文章标签： vue.js 前端 javascript

于 2025-02-24 08:50:28 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_41196185/article/details/145819785

版权

Vue 3 的 provide/inject 是否具备响应式？

答案是：取决于你 provide 的内容。

provide 和 inject 机制本身并不直接提供响应式能力。想要实现响应式，你需要 provide 一个响应式对象。

以下是几种情况的详细说明：

提供响应式对象 (推荐):

如果你 provide 的是使用 ref() 或 reactive() 创建的响应式对象，那么在子组件中 inject 获取到的值也是响应式的。
这意味着，当父组件中修改了 provide 的响应式对象时，子组件会自动更新。

示例：

父组件 (Provider):


  父组件: {{ count }}



import { ref, provide } from 'vue';

export default {
  setup() {
    const count = ref(0); // 创建响应式 ref
    provide('count', count); // 提供 'count'

    setInterval(() => {
      count.value++; // 修改响应式数据
    }, 1000);

    return {
      count
    };
  }
};

子组件 (Injector):


  子组件: {{ count }}



import { inject, defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const count = inject('count'); // 注入 'count'

    return {
      count,
    };
  }
});

在这个例子中，count 是一个 ref 对象，所以它是响应式的。父组件每秒钟更新 count 的值，子组件也会自动同步更新。

提供非响应式对象 (不推荐):

如果你 provide 的是普通的 JavaScript 对象或基本类型值（字符串、数字、布尔值等），那么在子组件中 inject 获取到的值不是响应式的。
父组件对原始值的修改不会反映到子组件。

示例：

父组件 (Provider):


  父组件: {{ message }}



import { provide } from 'vue';

export default {
  setup() {
    let message = "Hello"; // 普通字符串

    provide('message', message); // 提供 'message'

    setTimeout(() => {
      message = "World"; // 修改普通字符串 (不会更新子组件)
    }, 2000);

    return {
      message
    };
  }
};

子组件 (Injector):


  子组件: {{ message }}



import { inject, defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const message = inject('message'); // 注入 'message'

    return {
      message,
    };
  }
});

在这个例子中，message 是一个普通的字符串。父组件修改了 message 的值，但子组件不会更新，仍然显示 “Hello”。

提供一个函数 (特殊情况):

你可以 provide 一个函数，子组件调用该函数来获取数据。这本身不提供响应性，但允许子组件从父组件获取动态数据。
父组件通常会在函数内部访问响应式数据，但函数的返回值在 inject 那里不是自动响应的。如果函数返回一个响应式对象，那么可以实现部分响应性。

示例：

父组件 (Provider):


  父组件: {{ count }}



import { ref, provide } from 'vue';

export default {
  setup() {
    const count = ref(0); // 响应式 ref

    provide('getCount', () => count.value); // 提供一个函数

    setInterval(() => {
      count.value++;
    }, 1000);

    return {
      count
    };
  }
};

子组件 (Injector):


  子组件: {{ currentCount }}



import { inject, defineComponent, ref, onMounted } from 'vue';

export default defineComponent({
  setup() {
    const getCount = inject('getCount'); // 注入函数
    const currentCount = ref(getCount()); // 初始值

    onMounted(() => {
      setInterval(() => {
        currentCount.value = getCount(); // 手动更新
      }, 100);
    });

    return {
      currentCount
    };
  }
});