Vue 3源码极客之：`Vue`的`provide/inject`：其实现如何避免响应式依赖的过度收集。

各位靓仔靓女晚上好！我是你们的老朋友，今晚跟大家聊聊Vue 3源码里的一个挺有意思的机制：provide/inject，特别是它怎么避免响应式依赖的过度收集。这玩意儿啊，用好了那是如虎添翼，用不好，那可能就是…嗯…徒增烦恼。咱们争取今晚把它给整明白咯！

开场白：provide/inject是个啥？

简单来说，provide/inject就像Vue组件之间的秘密通道。父组件通过provide提供一些数据或者方法，子组件（以及更深层的后代组件）就可以通过inject来接收这些东西。这避免了逐层传递 props 的麻烦，尤其是在组件层级很深的时候。

举个例子，假设咱们有个应用，最顶层的根组件需要提供一个全局的配置对象：

// App.vue
import { provide, ref } from 'vue';

export default {
  setup() {
    const config = ref({
      theme: 'dark',
      apiEndpoint: 'https://api.example.com'
    });

    provide('app-config', config);

    return {
      config
    };
  }
}

然后，在某个深层的子组件里，我们就可以直接拿到这个配置：

// DeepChild.vue
import { inject, onMounted } from 'vue';

export default {
  setup() {
    const appConfig = inject('app-config');

    onMounted(() => {
      console.log('Current theme:', appConfig.value.theme);
    });

    return {
      appConfig
    };
  }
}

看起来很美好是不是？但是，这里面隐藏着一个潜在的问题：响应式依赖的过度收集。

问题来了：过度收集是怎么回事？

Vue 的响应式系统很强大，但也很敏感。当你在组件的 setup 函数或者 render 函数里访问一个响应式数据时，Vue 会自动建立这个组件和这个数据之间的依赖关系。一旦这个数据发生变化，Vue 就会通知所有依赖它的组件进行更新。

对于provide/inject来说，如果inject接收到的数据是一个响应式对象（比如上面例子里的 config），那么所有使用了 inject 的组件都会自动订阅这个响应式对象的更新。这在某些情况下是好事，但如果子组件仅仅是读取了 config 的某个静态属性，而不需要对整个 config 对象的变化做出响应，那么就会造成过度收集，浪费性能。

比如，DeepChild.vue可能仅仅需要知道 theme 是什么，而对 apiEndpoint 的变化并不关心。但是，由于它直接访问了 appConfig.value.theme，它就订阅了整个 config 对象的变化。只要 config 里的任何属性发生变化，DeepChild.vue 就会被迫更新，即使它并不需要更新。

Vue 3 是怎么解决这个问题的？

Vue 3 在 provide/inject 的实现上做了一些优化，避免了这种过度收集。主要手段是：

1. shallowRef 和 readonly: 在提供数据的时候，可以选择使用 shallowRef 或者 readonly 来包裹数据。
2. 解构的妙用： 在使用 inject 接收数据后，通过解构的方式来访问属性。

咱们逐个分析一下。

1. shallowRef 和 readonly 的妙用

• shallowRef: shallowRef 创建一个浅层的响应式引用。只有当 shallowRef 的 .value 发生改变时，才会触发依赖更新。如果 shallowRef 的 .value 是一个对象，那么对象内部的属性变化不会触发更新。

  如果根组件这样提供数据：

  // App.vue
  import { provide, shallowRef } from 'vue';
  
  export default {
    setup() {
      const config = shallowRef({
        theme: 'dark',
        apiEndpoint: 'https://api.example.com'
      });
  
      provide('app-config', config);
  
      return {
        config
      };
    }
  }

  那么，DeepChild.vue 只有在 appConfig.value 被完全替换成新的对象时，才会更新。config.value.theme 或者 config.value.apiEndpoint 的单独变化不会触发 DeepChild.vue 的更新。

• readonly: readonly 创建一个只读的响应式对象。任何试图修改 readonly 对象的属性的操作都会导致一个警告。使用 readonly 可以防止子组件意外地修改父组件提供的数据。

  // App.vue
  import { provide, ref, readonly } from 'vue';
  
  export default {
    setup() {
      const config = ref({
        theme: 'dark',
        apiEndpoint: 'https://api.example.com'
      });
  
      provide('app-config', readonly(config));
  
      return {
        config
      };
    }
  }

  在这种情况下，DeepChild.vue 仍然可以访问 appConfig.value.theme，但是它无法修改 appConfig.value.theme 的值。虽然 readonly 本身并不能阻止过度收集，但它可以配合解构来达到更好的效果。

2. 解构的妙用

这是最关键的一招！

如果 DeepChild.vue 这样使用 inject 接收到的 config 对象：

// DeepChild.vue
import { inject, onMounted, toRef } from 'vue';

export default {
  setup() {
    const appConfig = inject('app-config');

    // 关键在这里！
    const theme = toRef(appConfig.value, 'theme');

    onMounted(() => {
      console.log('Current theme:', theme.value);
    });

    return {
      theme
    };
  }
}

这里使用了 toRef 函数。toRef 的作用是：它会基于一个响应式对象的某个属性创建一个新的 ref。这个新的 ref 会保持和原始属性的响应式连接，但是它本身是一个独立的 ref。

换句话说，theme 现在是一个独立的 ref，它只依赖于 config.value.theme 这个属性。只有当 config.value.theme 发生变化时，theme 才会更新，DeepChild.vue 才会更新。config.value.apiEndpoint 的变化不会影响到 DeepChild.vue。

为什么 toRef 这么神奇？

这涉及到 Vue 3 响应式系统的底层实现。简单来说，toRef 创建的 ref 只会订阅原始对象特定属性的变化，而不是整个对象的变化。这就像是订阅了一个新闻专栏里的某个特定文章，而不是订阅整个新闻专栏。

完整代码示例：最佳实践

下面是一个结合了 readonly 和 toRef 的完整示例，展示了 provide/inject 的最佳实践：

// App.vue
import { provide, ref, readonly } from 'vue';

export default {
  setup() {
    const config = ref({
      theme: 'dark',
      apiEndpoint: 'https://api.example.com'
    });

    provide('app-config', readonly(config));

    return {
      config
    };
  }
}

// DeepChild.vue
import { inject, onMounted, toRef } from 'vue';

export default {
  setup() {
    const appConfig = inject('app-config');

    const theme = toRef(appConfig, 'theme'); // 注意这里直接传appConfig，toRef会处理.value

    onMounted(() => {
      console.log('Current theme:', theme.value);
    });

    return {
      theme
    };
  }
}

在这个例子中：

• App.vue 使用 readonly 包裹 config，防止子组件修改配置。
• DeepChild.vue 使用 toRef 创建 theme，只订阅 config.theme 的变化。

总结：表格对比

为了更清晰地理解不同方法的优缺点，咱们用一个表格来总结一下：

方法	优点	缺点	适用场景
直接 inject	简单直接	容易导致过度收集，子组件会订阅整个响应式对象的变化。如果父组件提供的数据频繁变化，但子组件只关心其中一部分，那么会导致不必要的更新。	当子组件需要订阅整个响应式对象的变化时。
shallowRef + inject	只有当 shallowRef 的 .value 被完全替换时才会触发更新，减少了不必要的更新。	如果子组件需要响应式地访问对象内部的属性，那么这种方法就不适用了。	当子组件只需要在父组件提供的数据对象被整体替换时才需要更新，而不需要关心对象内部属性的变化时。
readonly + inject	可以防止子组件意外地修改父组件提供的数据，增强了数据的安全性。	本身并不能阻止过度收集，需要配合解构或者 toRef 才能达到更好的效果。	当需要防止子组件修改父组件提供的数据，并且需要配合解构或者 toRef 来优化性能时。
readonly + toRef	既可以防止子组件修改父组件提供的数据，又可以避免过度收集，只订阅需要的属性的变化。这是最推荐的做法，可以最大程度地提高性能和数据的安全性。	相对来说，代码稍微复杂一些，需要理解 toRef 的作用。	当需要防止子组件修改父组件提供的数据，并且子组件只需要订阅部分属性的变化时。这是 provide/inject 的最佳实践。
toRefs	方便地将响应式对象的所有属性都转换为 ref，可以在模板中直接使用，无需 .value。	如果原始对象有很多属性，可能会创建很多 ref，增加内存开销。	当子组件需要访问父组件提供的响应式对象的所有属性，并且希望在模板中直接使用这些属性，而不需要 .value 时。toRefs(readonly(config)) 通常是最佳选择，因为它既提供了只读性，又方便了模板的使用。

toRefs 补充说明

顺便提一下 toRefs。 toRefs 是另一个有用的函数，它可以将一个响应式对象的所有属性都转换为 ref。 比如：

import { provide, ref, readonly, toRefs } from 'vue';

export default {
  setup() {
    const config = ref({
      theme: 'dark',
      apiEndpoint: 'https://api.example.com'
    });

    provide('app-config', toRefs(readonly(config)));

    return {
      config
    };
  }
}

// DeepChild.vue
import { inject, onMounted } from 'vue';

export default {
  setup() {
    const appConfig = inject('app-config');

    onMounted(() => {
      console.log('Current theme:', appConfig.theme.value); // 注意这里直接使用 appConfig.theme
    });

    return {
      appConfig
    };
  }
}

使用 toRefs 之后，DeepChild.vue 就可以直接访问 appConfig.theme，而不需要 appConfig.value.theme。 这在模板中使用时非常方便。但是，需要注意的是，如果原始对象有很多属性，可能会创建很多 ref，增加内存开销。

最后总结：活学活用，举一反三

provide/inject 是一个强大的工具，但也要小心使用。理解响应式依赖的收集机制，选择合适的方法，才能写出高效、可维护的 Vue 代码。记住，没有银弹，只有合适的工具。

希望今天的分享对大家有所帮助！下次再见！