From a36c560810719a1f5f6100d8e459b757b110536b Mon Sep 17 00:00:00 2001
From: pany <939630029@qq.com>
Date: Fri, 22 Sep 2023 17:34:52 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E5=AE=8C=E5=96=84=20CompConsumer=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=B3=A8=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/components/CompConsumer/index.ts | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/layouts/components/CompConsumer/index.ts b/src/layouts/components/CompConsumer/index.ts
index 7f71ec7..276dae1 100644
--- a/src/layouts/components/CompConsumer/index.ts
+++ b/src/layouts/components/CompConsumer/index.ts
@@ -6,23 +6,35 @@ interface CompConsumerProps {
   component: VNode
 }
 
+/** 定义 compMap 对象，用于存储路由名称和对应的组件 */
 const compMap = new Map<string, VNode>()
 
+/**
+ * CompConsumer 组件
+ * 用法：替换 <keep-alive> 标签以及内部代码，变成：<CompConsumer :component="Component" />
+ * 优点：缓存路由时只需写路由 Name，无需再写组件 Name
+ * 缺点：当路由表有动态路由匹配时（指向同一个组件），会出现复用组件的情况（例如修改 /info/1 时 /info/2 也会跟着改变）
+ */
 export const CompConsumer = defineComponent(
   (props: CompConsumerProps) => {
     const tagsViewStore = useTagsViewStore()
     const route = useRoute()
     return () => {
+      // 获取传入的组件
       const component = props.component
-      // 判断当前是否包含 name，如果不包含name，那就直接处理掉 name
+      // 判断当前是否包含 name，如果不包含 name，那就直接处理掉 name
       if (!route.name) return component
-      // 获取当前组件的 name
+      // 获取当前组件的名称
       const compName = (component.type as any)?.name
+      // 获取当前路由的名称
       const routeName = route.name as string
       let Comp: VNode
+      // 检查 compMap 中是否已经存在对应的组件
       if (compMap.has(routeName)) {
+        // 如果存在，则直接使用该组件进行渲染
         Comp = compMap.get(routeName)!
       } else {
+        // 如果不存在，则克隆传入的组件并创建一个新的组件，将其添加到 compMap 中
         const node = cloneVNode(component)
         if (compName && compName === routeName) {
           ;(node.type as any).name = `__${compName}__CUSTOM_NAME`
@@ -36,6 +48,7 @@ export const CompConsumer = defineComponent(
         })
         compMap.set(routeName, Comp)
       }
+      // 使用 createVNode 函数创建一个 KeepAlive 组件，并缓存 cachedViews 数组中对应的组件
       return createVNode(
         KeepAlive,
         {