inject/provide 是否具备响应式能力？

在 Vue中，inject 和 provide 是实现组件之间依赖共享。

它们允许祖先组件通过 provide 提供依赖，后代组件通过 inject 注入依赖，从而实现跨组件的通信。

但是，有一个常见问题是：inject 和 provide 共享的数据是否具备响应式能力？ 这个问题不仅涉及到 Vue 内部的实现原理，还关乎在实际项目中如何正确使用它们。

---

一、inject 和 provide 的基本用法

1.1 提供数据 (provide)

provide 用于定义在祖先组件中需要被共享的数据：

export default {
  setup() {
    const sharedData = ref('Hello, Vue!');
    provide('sharedData', sharedData);
  },
};

在上述代码中，sharedData 是通过 provide 暴露给后代组件的。

1.2 注入数据 (inject)

inject 用于在后代组件中接收祖先组件共享的数据：

export default {
  setup() {
    const sharedData = inject('sharedData');
    return { sharedData };
  },
};

在这个例子中，sharedData 被成功注入到后代组件中。如果一切正常，后代组件可以访问到祖先组件提供的数据。

---

二、inject 和 provide 是否具备响应式能力？

在使用过程中，有个问题：如果祖先组件修改了 provide 的值，后代组件是否会实时更新？

这需要从两种不同场景来分析。

2.1 场景 1：提供的值本身是响应式的

如果通过 provide 传递的是响应式对象（如 ref 或 reactive），inject 接收到的值同样是响应式的。

示例：

// 祖先组件
export default {
  setup() {
    const count = ref(0);
    provide('count', count);

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

// 后代组件
export default {
  setup() {
    const count = inject('count'); // 注入响应式数据
    return { count };
  },
};

结果：

• 在后代组件中，count 是响应式的。
• 祖先组件每次修改 count 的值，后代组件都会自动更新。

原因：
provide 和 inject 并不会破坏 Vue 的响应式系统。如果传递的是响应式对象（如 ref 或 reactive），后代组件会直接引用该响应式对象，自然具备响应式能力。

---

2.2 场景 2：提供的值是普通的非响应式对象

如果通过 provide 传递的是普通对象或非响应式值，inject 接收到的值将是该对象的引用，但不会具备响应式能力。

示例：

// 祖先组件
export default {
  setup() {
    const count = 0; // 非响应式数据
    provide('count', count);
  },
};

// 后代组件
export default {
  setup() {
    const count = inject('count'); // 注入非响应式数据
    return { count };
  },
};

结果：

• 在后代组件中，count 是一个普通值。
• 祖先组件修改 count 的值，后代组件不会自动更新。

原因：
provide 传递的是一个普通值，后代组件只是接收了该值的引用。由于这个值没有被 Vue 的响应式系统追踪，任何变更都不会触发视图更新。

---

三、深入理解 inject 和 provide 的响应式特性

想真正理解其响应式行为，我们还要从 Vue 的内部实现原理出发。

3.1 provide 的实现原理

provide 的本质是将一个键值对存储到当前组件实例的 provides 对象中。代码如下：

function provide(key, value) {
  const instance = getCurrentInstance(); // 获取当前组件实例
  if (instance) {
    instance.provides[key] = value;
  }
}

其中，provides 是一个普通的 JavaScript 对象，存储所有通过 provide 提供的依赖。

3.2 inject 的实现原理

inject 的本质是从当前组件的父组件中查找 provides 对象对应的值：

function inject(key) {
  const instance = getCurrentInstance(); // 获取当前组件实例
  if (instance) {
    const parentProvides = instance.parent?.provides; // 获取父组件的 provides
    return parentProvides[key]; // 返回对应的值
  }
}

关键点：

• inject 返回的是 provides[key] 中存储的值。
• 如果存储的值是响应式对象（如 ref 或 reactive），则后代组件可以直接享受到响应式能力。
• 如果存储的值是普通值，则后代组件接收的只是一个静态引用。

---

四、如何确保 inject 和 provide 的响应式能力？

根据上面的分析，我们得出结论：inject 和 provide 本身并不自动添加响应式能力，响应式取决于提供的值是否是响应式对象。

下面举个例子，确保 inject 和 provide 的数据能够具备响应式能力。

4.1 提供响应式对象

优先通过 ref 或 reactive 创建响应式对象，然后通过 provide 提供数据：

// 祖先组件
export default {
  setup() {
    const user = reactive({ name: 'Alice', age: 25 });
    provide('user', user); // 提供响应式对象
  },
};

// 后代组件
export default {
  setup() {
    const user = inject('user'); // 注入响应式对象
    return { user };
  },
};

这种方式最为推荐，因为响应式能力完全由 Vue 的响应式系统保证。

---

4.2 使用计算属性增强响应式

如果需要注入的数据本身不是响应式的，可以通过计算属性封装成响应式值：

// 祖先组件
export default {
  setup() {
    const count = 0; // 非响应式数据
    const reactiveCount = computed(() => count); // 转换为响应式
    provide('count', reactiveCount);
  },
};

// 后代组件
export default {
  setup() {
    const count = inject('count');
    return { count };
  },
};

---

4.3 用 watch 手动追踪非响应式数据

如果传递的值无法直接变为响应式对象，可以借助 watch 手动追踪变化，并同步更新注入的值：

// 祖先组件
export default {
  setup() {
    let count = 0; // 普通值
    const reactiveCount = ref(count); // 创建响应式包装

    // 手动追踪 count 的变化
    setInterval(() => {
      count++;
      reactiveCount.value = count;
    }, 1000);

    provide('count', reactiveCount);
  },
};

---

五、总结

5.1 核心

1. inject 和 provide 本身不负责响应式：

• • 它们只是用来传递依赖，是否具备响应式能力取决于提供的值。
  • 如果提供的是响应式对象，后代组件也能享受响应式能力。
  • 如果提供的是普通值，后代组件将无法响应变化。

2. 推荐使用响应式对象：
   始终通过 ref 或 reactive 提供数据，避免在后代组件中处理复杂的逻辑。

---

5.2 常见面试问题

1. inject 和 provide 是否具备响应式能力？
   具备，但前提是提供的值本身是响应式的。如果提供的是普通值，则不具备响应式能力。
2. 如何确保注入的数据具备响应式？
   可以通过 ref 或 reactive 包装数据，也可以使用计算属性或 watch 手动处理。
3. provide 的数据会被深拷贝吗？
   不会，inject 接收到的是原始对象的引用。