Vue 3 的组件式开发（3）

1 Vue 3 组件高级特性

1.1 提供/注入（Provide/Inject）

Vue 3中的Provide/Inject是一种高级组件通信方法，允许父组件向其所有子孙组件提供数据或方法，而无需通过props逐层传递。

1.1.1 基本概念

• Provide：父组件通过provide函数提供数据或方法，这些数据或方法可以被其所有子孙组件通过inject函数注入。
• Inject：子孙组件通过inject函数注入由祖先组件提供的数据或方法。

1.1.2 使用方法

1. 在父组件中使用Provide

   • 引入provide函数。
   • 使用provide函数提供数据或方法，通常是在父组件的setup函数中进行。
   • provide函数接收两个参数：第一个参数是注入名（可以是字符串或Symbol），用于标识提供的数据或方法；第二个参数是提供的值（可以是任何类型的数据或方法）。

2. 在子孙组件中使用Inject

   • 引入inject函数。
   • 使用inject函数注入由祖先组件提供的数据或方法，通常是在子孙组件的setup函数中进行。
   • inject函数接收一个参数：注入名（与provide函数中提供的注入名相匹配）。
   • 如果祖先组件没有提供对应的数据或方法，inject函数会返回一个默认值（如果指定了的话）。

1.1.3 应用场景

1. 跨层级通信：当需要在多层嵌套的组件之间进行数据传递时，使用Provide/Inject可以简化数据流，避免在每个中间组件中都使用props进行传递。
2. 避免重复声明：在一些场景下，可能需要在多个组件中使用相同的数据或方法。通过Provide/Inject，可以在一个组件中提供这些数据或方法，并在其他组件中注入使用，从而避免重复声明。
3. 封装通用服务：可以将一些通用的逻辑或数据封装在父组件中，并通过provide提供给需要的子孙组件。这样可以提高代码的可复用性和可维护性。

1.1.4 注意事项

1. 非响应式：Provide和Inject本身不是响应式的。如果父组件提供的值发生变化，子组件不会自动更新。如果需要响应式的数据传递，可以考虑使用Vuex或其他状态管理库。
2. 不可选项：无论父组件是否真的提供了数据，子组件都会尝试注入。如果没有提供对应的provide，则inject的属性将会有一个默认值（如果指定了的话）。
3. 使用Symbol提供独一无二的注册名：为了避免注入名冲突，可以使用Symbol来提供独一无二的注册名。这样可以确保每个组件都正确地注入到所需的数据或方法。

1.1.5 示例代码

以下是一个简单的示例代码，演示了如何在Vue 3中使用Provide/Inject进行组件通信：

<!-- 父组件 -->
<template>
  <div class="parent">
    <h1>父组件</h1>
    <child-component></child-component>
  </div>
</template>

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

const message = ref('Hello from Parent!');

provide('message', message);
</script>

<!-- 子组件 -->
<template>
  <div class="child">
    <h2>子组件</h2>
    <p>{
  
  { injectedMessage }}</p>
  </div>
</template>

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

const injectedMessage = inject('message', 'Default Message'); // 如果没有提供'message'，则使用默认值'Default Message'
</script>

在这个示例中，父组件通过provide函数提供了一个名为’message’的数据，子组件通过inject函数注入了这个数据，并在模板中进行了显示。如果父组件没有提供’message’，则子组件将显示默认值’Default Message’。

1.2 组件的递归调用

在Vue 3中，组件的递归调用指的是一个组件在其模板中调用自身的情况。这种技术通常用于处理具有递归结构的数据，如树形菜单、评论的嵌套回复、文件系统的目录结构等。

1.2.1 基本概念

• 递归组件：一个能够调用自身的Vue组件。
• 递归结构：数据本身具有层次性，每一层的数据结构都与上一层相同或相似，从而可以形成树状结构。

1.2.2 实现步骤

1. 定义递归组件

   首先，你需要定义一个Vue组件，并在其模板中设置递归调用的条件。这通常是通过一个v-for指令来遍历一个数组或对象，并在遍历的过程中调用自身组件。

2. 设置递归终止条件

   递归调用必须有一个终止条件，否则会导致无限递归，最终引发栈溢出错误。在Vue组件中，这个终止条件通常是通过检查数据的某个属性来实现的。例如，对于树形结构的数据，你可以检查节点是否有子节点来决定是否继续递归调用组件。

3. 传递数据

   在递归调用组件时，你需要将当前节点的数据作为props传递给子组件。这样，子组件就可以根据这些数据来渲染自己的内容，并决定是否继续递归调用。

1.2.3 注意事项

1. 性能问题：递归组件可能会导致性能问题，特别是当数据层次很深时。因此，在使用递归组件时，你需要注意性能优化，如使用虚拟滚动、懒加载等技术。

2. 避免无限递归：确保你的递归组件有一个明确的终止条件。如果终止条件设置不当，可能会导致无限递归，从而引发性能问题或错误。

3. 组件命名：在递归调用中，确保组件的命名不会与全局或局部注册的组件冲突。

4. 数据更新：当递归组件的数据发生变化时，Vue会重新渲染组件。但是，由于递归组件的复杂性，有时可能需要手动处理一些更新逻辑，如重置滚动位置等。

1.2.4 示例代码

在Vue 3中，当你想在组件内部递归调用自身时，你需要确保组件已经正确注册，并且能够在模板中被识别。这通常意味着你需要在单文件组件（.vue文件）中定义组件，并为其指定一个name选项，或者在父组件中局部注册该组件。

以下是一个完整的示例，展示了如何在Vue 3中创建一个递归组件来渲染一个树形结构的数据：

TreeMenuItem.vue

<template>
  <div class="tree-menu-item">
    <div>{
  
  { node.name }}</div>
    <div v-if="hasChildren" class="children">