跟着官网学 Vue - 依赖注入

小咪咪 2024-02-05 16:12 17阅读 0赞

## 直接上代码 ##

<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>

<template>
      <div>
        <p>子组件</p>
        <GrandchildComponent />
      </div>
    </template>
    
    <script>
    import GrandchildComponent from './GrandchildComponent.vue';
    
    export default {
      components: {
        GrandchildComponent,
      },
    };
    </script>

<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 依赖注入是通过注解和容器管理建立的。

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