Vue 中 provide 和 inject 的特点是什么？

推荐答案

在 Vue 中，provide 和 inject 是一对用于跨层级组件通信的 API。它们的主要特点如下：

1. 跨层级通信：provide 和 inject 允许父组件向任意深度的子组件传递数据，而不需要通过 props 逐层传递。
2. 响应式数据：如果 provide 提供的是响应式数据（如 ref 或 reactive），那么子组件通过 inject 注入的数据也会是响应式的。
3. 非响应式数据：如果 provide 提供的是普通数据（非响应式），则子组件注入的数据也是非响应式的。
4. 依赖注入：inject 可以在子组件中声明依赖，Vue 会自动从父组件链中找到最近的 provide 提供的数据。
5. 灵活性：provide 和 inject 可以用于任何组件关系，不仅仅是父子组件，还可以是祖孙组件等。

本题详细解读

1. provide 的使用

provide 通常在父组件中使用，用于提供数据或方法。它可以是一个对象或返回对象的函数。

// www.javascriptcn.com code example
export default {
  provide() {
    return {
      message: 'Hello from parent',
      count: this.count // 响应式数据
    };
  },
  data() {
    return {
      count: 0
    };
  }
};

2. inject 的使用

inject 在子组件中使用，用于接收父组件提供的数据或方法。它可以是一个数组或对象。

export default {
  inject: ['message', 'count'],
  mounted() {
    console.log(this.message); // 输出: Hello from parent
    console.log(this.count); // 输出: 0
  }
};

3. 响应式数据的传递

如果 provide 提供的是响应式数据（如 ref 或 reactive），则子组件通过 inject 注入的数据也会是响应式的。

// www.javascriptcn.com code example
import { ref, provide } from 'vue';

export default {
  setup() {
    const count = ref(0);
    provide('count', count);
    return { count };
  }
};

在子组件中：

import { inject } from 'vue';

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

4. 非响应式数据的传递

如果 provide 提供的是普通数据（非响应式），则子组件注入的数据也是非响应式的。

export default {
  provide() {
    return {
      message: 'Hello from parent' // 非响应式数据
    };
  }
};

5. 依赖注入的灵活性

inject 可以在子组件中声明依赖，Vue 会自动从父组件链中找到最近的 provide 提供的数据。这使得组件之间的通信更加灵活，不需要显式地通过 props 传递数据。

export default {
  inject: ['message'],
  mounted() {
    console.log(this.message); // 输出: Hello from parent
  }
};

6. 默认值

inject 还可以为注入的数据提供默认值，以防止父组件未提供数据时出现错误。

// www.javascriptcn.com code example
export default {
  inject: {
    message: {
      default: 'Default message'
    }
  },
  mounted() {
    console.log(this.message); // 输出: Default message（如果父组件未提供）
  }
};