如何利用 `Vue` 的 `provide`/`inject` 机制，在组件树深层传递数据或功能，同时保持可维护性？ - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

大家好！今天咱们来聊聊 Vue 里一个挺有意思的工具：provide/inject。这哥俩，用好了能让你在组件树里穿梭自如地传递数据，省去一层层 props 传递的麻烦。但用不好，也容易让你的代码变得跟意大利面一样混乱。所以，今天咱们就好好盘盘它，争取让大家用得顺手，用得漂亮。

一、啥是 provide/inject？

简单来说，provide 允许你在一个组件中提供数据或者方法，而 inject 允许组件树中任何后代组件直接获取这些数据或方法，不需要通过 props 一层层传递。

你可以把 provide 想象成一个大广播，它把消息广播出去。而 inject 就像一个接收器，谁想听，谁就打开接收器接收消息。

二、provide/inject 的基本用法

先来看一个最简单的例子。假设我们有一个根组件 App.vue，它想给所有后代组件提供一个全局的主题颜色：

// App.vue
<template>
  <div>
    <Header />
    <Content />
    <Footer />
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import Header from './components/Header.vue';
import Content from './components/Content.vue';
import Footer from './components/Footer.vue';

export default defineComponent({
  name: 'App',
  components: {
    Header,
    Content,
    Footer
  },
  provide: {
    themeColor: 'lightcoral'
  }
});
</script>

这里，我们在 App.vue 中使用了 provide，提供了一个名为 themeColor 的数据，值为 'lightcoral'。

现在，假设 Footer.vue 组件想使用这个主题颜色：

// Footer.vue
<template>
  <div :style="{ backgroundColor: themeColor }">
    Footer Component
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Footer',
  inject: ['themeColor']
});
</script>

在 Footer.vue 中，我们使用了 inject，声明了需要注入 themeColor。这样，Footer.vue 就可以直接使用 themeColor 这个数据了，而不需要通过 props 传递。

三、provide 可以提供啥？

provide 不仅仅可以提供简单的数据，还可以提供函数、响应式数据，甚至整个 Vue 实例。

提供函数

// App.vue
<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'App',
  provide() {
    return {
      showAlert: (message) => {
        alert(message);
      }
    }
  }
});
</script>

// SomeChildComponent.vue
<script>
import { defineComponent } from 'vue';

export default defineComponent({
  inject: ['showAlert'],
  mounted() {
    this.showAlert('Hello from child component!');
  }
});
</script>

提供响应式数据

想要提供响应式的数据，需要使用 reactive 或者 ref：

// App.vue
<script>
import { defineComponent, reactive } from 'vue';

export default defineComponent({
  name: 'App',
  setup() {
    const theme = reactive({
      color: 'lightcoral',
      fontSize: '16px'
    });

    return {
      theme
    }
  },
  provide() {
    return {
      theme: this.theme // 注意这里要使用 this.theme
    }
  }
});
</script>

// SomeChildComponent.vue
<template>
  <div :style="{ color: theme.color, fontSize: theme.fontSize }">
    Child Component
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  inject: ['theme']
});
</script>

这样，当 theme.color 或者 theme.fontSize 改变时，SomeChildComponent.vue 中的样式也会跟着改变。

四、inject 的高级用法

提供默认值

有时候，我们希望即使 provide 没有提供对应的数据，inject 也能有一个默认值。可以使用以下方式：
```
// SomeComponent.vue
<script>
import { defineComponent } from 'vue';

export default defineComponent({
  inject: {
    apiURL: {
      from: 'apiUrl', // 可以指定从哪个 provide 注入
      default: 'http://localhost:3000'
    }
  }
});
</script>
```
如果 provide 中没有提供 apiUrl，那么 apiURL 的值就会是 'http://localhost:3000'。
如果你不指定 from，inject 会直接寻找名为 apiURL 的 provide。

注入响应式数据的注意事项

直接修改 inject 注入的响应式数据是不推荐的，因为这可能会导致状态管理混乱。更好的做法是，在 provide 中提供修改数据的方法：

// App.vue
<script>
import { defineComponent, reactive } from 'vue';

export default defineComponent({
  name: 'App',
  setup() {
    const state = reactive({
      count: 0
    });

    const increment = () => {
      state.count++;
    };

    return {
      state,
      increment
    }
  },
  provide() {
    return {
      appState: this.state,
      increment: this.increment
    }
  }
});
</script>

// SomeChildComponent.vue
<template>
  <div>
    <p>Count: {{ appState.count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  inject: ['appState', 'increment']
});
</script>

这样，子组件可以通过调用 increment 方法来修改 appState.count，而不是直接修改 appState.count。

五、provide/inject 的优缺点

特性	优点	缺点
优点	1. 避免了深层组件之间繁琐的 `props` 传递。	1. 依赖关系不明显，难以追踪数据来源。
	2. 方便了全局配置、主题设置等数据的共享。	2. 组件之间的耦合度增加，降低了组件的独立性。
	3. 可以提供函数，方便子组件调用父组件的方法。	3. 如果 `provide` 提供的数据类型不明确，容易导致类型错误。
	4. 可以结合 `reactive` 和 `ref` 提供响应式数据，实现状态共享。	4. 大规模使用可能导致代码可读性和可维护性下降，难以进行单元测试。

六、provide/inject 的最佳实践

明确 provide 的目的

在使用 provide 之前，要明确你想要解决什么问题。是为了避免 props 传递，还是为了提供全局配置？
限制 provide 的范围

尽量将 provide 的范围限制在必要的组件范围内，避免滥用。

提供明确的类型声明

使用 TypeScript 时，为 provide 提供的数据添加类型声明，可以避免类型错误。

// App.vue
import { defineComponent, reactive, InjectionKey } from 'vue';

interface Theme {
  color: string;
  fontSize: string;
}

const ThemeKey: InjectionKey<Theme> = Symbol();

export default defineComponent({
  name: 'App',
  setup() {
    const theme = reactive<Theme>({
      color: 'lightcoral',
      fontSize: '16px'
    });

    return {
      theme
    }
  },
  provide() {
    return {
    }
  }
});

// SomeChildComponent.vue
import { defineComponent, inject, InjectionKey } from 'vue';

interface Theme {
  color: string;
  fontSize: string;
}

const ThemeKey: InjectionKey<Theme> = Symbol();

export default defineComponent({
  inject: {
    theme: {
      from: ThemeKey,
      default: () => ({ color: 'black', fontSize: '12px' })
    }
  }
});

不要直接修改 inject 注入的响应式数据

在 provide 中提供修改数据的方法，子组件通过调用这些方法来修改数据。
谨慎使用 provide/inject

provide/inject 并非万能药，过度使用可能会导致代码难以维护。在可以使用 props 传递的情况下，尽量使用 props。
结合 Vuex 等状态管理工具
对于复杂的状态管理，provide/inject 可能力不从心。可以考虑结合 Vuex 或 Pinia 等状态管理工具，将 provide/inject 用作辅助手段。

七、应用场景举例

主题切换

// App.vue
<template>
  <div>
    <button @click="toggleTheme">Toggle Theme</button>
    <Header />
    <Content />
    <Footer />
  </div>
</template>

<script>
import { defineComponent, reactive } from 'vue';
import Header from './components/Header.vue';
import Content from './components/Content.vue';
import Footer from './components/Footer.vue';

export default defineComponent({
  name: 'App',
  components: {
    Header,
    Content,
    Footer
  },
  setup() {
    const theme = reactive({
      isDark: false,
      colors: {
        background: 'white',
        text: 'black'
      }
    });

    const toggleTheme = () => {
      theme.isDark = !theme.isDark;
      theme.colors = {
        background: theme.isDark ? 'black' : 'white',
        text: theme.isDark ? 'white' : 'black'
      };
    };

    return {
      theme,
      toggleTheme
    };
  },
  provide() {
    return {
      theme: this.theme,
      toggleTheme: this.toggleTheme
    };
  }
});
</script>

// Footer.vue
<template>
  <div :style="{ backgroundColor: theme.colors.background, color: theme.colors.text }">
    Footer Component
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Footer',
  inject: ['theme']
});
</script>

全局配置

// main.js
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

app.provide('apiURL', 'https://api.example.com');
app.mount('#app');

// SomeComponent.vue
<script>
import { defineComponent } from 'vue';

export default defineComponent({
  inject: ['apiURL'],
  mounted() {
    console.log('API URL:', this.apiURL);
  }
});
</script>

插件系统

可以通过 provide/inject 实现简单的插件系统。例如，提供一个插件注册函数，并在需要的组件中使用注入的插件。

八、总结

provide/inject 是 Vue 中一个强大的工具，可以简化组件之间的数据传递。但是，也需要谨慎使用，避免滥用导致代码难以维护。记住，使用 provide/inject 的关键是明确目的、限制范围、提供类型声明，并且不要直接修改注入的响应式数据。

总而言之，provide/inject 就像一把双刃剑，用得好能让你事半功倍，用不好可能会伤到自己。希望通过今天的讲解，大家能更好地理解和使用 provide/inject，写出更优雅、更可维护的 Vue 代码。

今天的分享就到这里，谢谢大家！

发表回复 取消回复

发表回复取消回复