跟着官网学 Vue - 依赖注入

直接上代码

<!-- ParentComponent.vue -->
<template>
  <div>
    <p>父组件</p>
    <p>来自父组件的消息: {{ message }}</p>
    <ChildComponent />
  </div>
</template>

<script>
import { provide, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },

// 在Vue 3中，使用setup()函数是一种组织组件逻辑的方式。
// setup()函数是在组件实例创建之前调用的，它接收props和context作为参数。
// 通过setup()函数，我们可以设置响应式数据、计算属性、提供/注入依赖等。

  setup() {
    // 使用 ref 创建响应式数据
    const message = ref('你好，来自父组件的消息！');

    // 使用 provide 提供数据给子孙组件
    provide('message', message);

    // 返回数据，以便在模板中使用
    return {
      message,
    };
  },
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>子组件</p>
    <GrandchildComponent />
  </div>
</template>

<script>
import GrandchildComponent from './GrandchildComponent.vue';

export default {
  components: {
    GrandchildComponent,
  },
};
</script>

<!-- GrandchildComponent.vue -->
<template>
  <div>
    <p>孙子组件</p>
    <p>来自父组件的消息: {{ injectedMessage }}</p>
  </div>
</template>

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

export default {
  setup() {
    // 使用 inject 获取来自父组件的数据，如果没有提供则使用默认值
    const injectedMessage = inject('message', '默认消息');

    // 返回注入的数据，以便在模板中使用
    return {
      injectedMessage,
    };
  },
};
</script>

在这个案例中，ParentComponent 使用 provide 提供了一个名为 'message' 的数据给其子孙组件。ChildComponent 作为子组件，可以直接访问 ParentComponent 提供的数据，而不需要通过 props 层层透传。在 GrandchildComponent 中，通过 inject 可以获取到来自 ParentComponent 的数据。

依赖注入不难想到Spring Boot的依赖注入，那？

Vue 中的 provide 和 inject：

1. 手动传递： 在 Vue 中，通过 provide 提供数据，然后通过 inject 注入依赖。这种注入是显式的，需要在组件之间手动传递。

   // 提供
   provide('message', 'Hello from parent');
   
   // 注入
   const message = inject('message');
   

2. 组件层级： Vue 的 provide 和 inject 是基于组件层级的，提供者组件提供数据，而消费者组件注入依赖。这种关系是通过组件树的层级结构建立的。

Spring Boot 中的依赖注入：

1. 自动装配： 在 Spring Boot 中，依赖注入是自动完成的，不需要手动传递。Spring Boot 使用 @Autowired 或构造函数注入等方式，自动将依赖注入到需要的地方。

   // 通过 @Autowired 注入依赖
   @Autowired
   private MyService myService;
   

2. 容器管理： Spring Boot 中的依赖注入是由 Spring IoC 容器进行管理的。容器负责创建和管理对象，以及将它们注入到其他对象中。

区别和共同点：

• 显式 vs 隐式： Vue 的 provide 和 inject 是显式的，需要手动提供和注入；而 Spring Boot 的依赖注入是隐式的，通过注解和容器自动完成。
• 语言差异： Vue 使用 JavaScript/TypeScript，而 Spring Boot 使用 Java。因此，语法和实现细节会有所不同。
• 依赖关系建立方式： Vue 依赖关系是通过组件树的层级结构建立的，而 Spring Boot 依赖注入是通过注解和容器管理建立的。

虽然具有一些差异，但两者都是实现依赖注入的方式，都有助于解耦组件或类之间的关系，提高代码的可维护性和可测试性。