!22 merge xingyan/fix-tree into dev

fix(Tree): 优化性能

Created-by: xingyan
Commit-by: xingyan
Merged-by: GreatZP
Description: fix(Tree): 优化性能

See merge request: DevCloudFE/vue-devui!22

Author: GreatZPP

packages/devui-vue/devui/tree/src/composables/use-core.ts

@@ -1,4 +1,4 @@
-import { computed, ComputedRef, Ref, onUnmounted } from 'vue';
+import { computed, ComputedRef, Ref, onUnmounted, shallowRef, toRaw, toValue } from 'vue';
 import { IInnerTreeNode, ITreeNode, IUseCore, valueof } from './use-tree-types';
 import { generateInnerTree } from './utils';
 
@@ -10,8 +10,70 @@ const DEFAULT_CONFIG = {
 export function useCore(): (data: Ref<IInnerTreeNode[]>) => IUseCore {
   const nodeMap = new Map<string, IInnerTreeNode[]>();
   return function useCoreFn(data: Ref<IInnerTreeNode[]>): IUseCore {
-    const getLevel = (node: IInnerTreeNode): number => {
-      return data.value.find((item) => item.id === node.id)?.level;
+    const hashTreeData = shallowRef<Record<string | number, IInnerTreeNode>>({});
+
+    const updateHashTreeData = () => {
+      hashTreeData.value = {};
+      for (let i = 0; i < data.value.length; i++) {
+        const item = data.value[i];
+        if (hashTreeData.value[item.id]) {
+          console.error(`节点id【${item.id}】重复`);
+        } else {
+          hashTreeData.value[item.id] = item;
+        }
+      }
+    };
+
+    const getInnerNode = (node: IInnerTreeNode | ITreeNode) => {
+      if (!node) {
+        return null;
+      }
+      if (node.id != undefined && hashTreeData.value[node.id]) {
+        return hashTreeData.value[node.id];
+      }
+      return null;
+    };
+    const getLevel = (node: IInnerTreeNode) => {
+      const innerNode = getInnerNode(node);
+      if (innerNode) {
+        return innerNode.level;
+      }
+      return undefined;
+    };
+
+    const toggleChildNodeVisible = (node: IInnerTreeNode, visible: boolean) => {
+      if (!node.childList?.length) {
+        return;
+      }
+      const nodeList = [...node.childList];
+      while (nodeList.length) {
+        const item = nodeList.shift();
+        if (item) {
+          item.showNode = visible;
+          if ((visible && item.expanded) || (!visible && item.childNodeCount)) {
+            const temp = item.childList || [];
+            nodeList.push(...temp);
+          }
+        }
+      }
+    };
+
+    const getInnerExpendedTree = (): ComputedRef<IInnerTreeNode[]> => {
+      return computed(() => {
+        let excludeNodes: IInnerTreeNode[] = [];
+        const result = [];
+        for (let i = 0, len = data?.value.length; i < len; i++) {
+          const item = data?.value[i];
+          if (excludeNodes.map((innerNode) => innerNode.id).includes(item.id)) {
+            continue;
+          }
+          if (item.expanded !== true && !item.isLeaf) {
+            excludeNodes = getChildren(item);
+          }
+          result.push(item);
+        }
+        return result;
+      });
     };
 
     const getChildren = (node: IInnerTreeNode, userConfig = DEFAULT_CONFIG): IInnerTreeNode[] => {
@@ -31,32 +93,17 @@ export function useCore(): (data: Ref<IInnerTreeNode[]>) => IUseCore {
           return cacheNode;
         }
       }
-      const getInnerExpendedTree = (): ComputedRef<IInnerTreeNode[]> => {
-        return computed(() => {
-          let excludeNodes: IInnerTreeNode[] = [];
-          const result = [];
-          for (let i = 0, len = data?.value.length; i < len; i++) {
-            const item = data?.value[i];
-            if (excludeNodes.map((innerNode) => innerNode.id).includes(item.id)) {
-              continue;
-            }
-            if (item.expanded !== true && !item.isLeaf) {
-              excludeNodes = getChildren(item);
-            }
-            result.push(item);
-          }
-          return result;
-        });
-      };
+
       const result = [];
       const config = { ...DEFAULT_CONFIG, ...userConfig };
       const treeData = config.expanded ? getInnerExpendedTree() : data;
       const startIndex = treeData.value.findIndex((item) => item.id === node.id);
+      const nodeLevel = node.level;
 
-      for (let i = startIndex + 1; i < treeData.value.length && getLevel(node) < treeData.value[i].level; i++) {
+      for (let i = startIndex + 1; i < treeData.value.length && nodeLevel < treeData.value[i].level; i++) {
         if (config.recursive && !treeData.value[i].isHide) {
           result.push(treeData.value[i]);
-        } else if (getLevel(node) === treeData.value[i].level - 1 && !treeData.value[i].isHide) {
+        } else if (nodeLevel === treeData.value[i].level - 1 && !treeData.value[i].isHide) {
           result.push(treeData.value[i]);
         }
       }
@@ -70,26 +117,43 @@ export function useCore(): (data: Ref<IInnerTreeNode[]>) => IUseCore {
       nodeMap.clear();
     };
 
-    const getParent = (node: IInnerTreeNode): IInnerTreeNode => {
-      return data.value.find((item) => item.id === node.parentId);
+    const getParent = (node: IInnerTreeNode) => {
+      if (node.parentId !== undefined) {
+        return hashTreeData.value[node.parentId];
+      }
+      return undefined;
+    };
+
+    const getLastChild = (node: IInnerTreeNode) => {
+      const children = getChildren(node, { recursive: false });
+      const lastChild = children[children.length - 1];
+      return lastChild?.childNodeCount ? getLastChild(lastChild) : lastChild;
     };
 
+    const getFlattenChildren = (node: IInnerTreeNode) => {
+      const lastChild = getLastChild(node);
+      const startPos = getIndex(node) + 1;
+      const endPos = lastChild ? getIndex(lastChild) + 1 : startPos;
+      return data.value.slice(startPos, endPos);
+    };
+
+    let showTreeList: ComputedRef<IInnerTreeNode[]>;
+
     const getExpendedTree = (): ComputedRef<IInnerTreeNode[]> => {
-      return computed(() => {
-        let excludeNodes: IInnerTreeNode[] = [];
-        const result = [];
-        for (let i = 0, len = data?.value.length; i < len; i++) {
-          const item = data?.value[i];
-          if (excludeNodes.map((node) => node.id).includes(item.id) || item.isHide) {
-            continue;
-          }
-          if (item.expanded !== true) {
-            excludeNodes = getChildren(item);
+      if (showTreeList) {
+        return showTreeList;
+      }
+      showTreeList = computed(() => {
+        const res: IInnerTreeNode[] = [];
+        const originDataVal = toValue(data);
+        for (const item of originDataVal) {
+          if (!item.isHide && item.showNode) {
+            res.push(item);
           }
-          result.push(item);
         }
-        return result;
+        return res;
       });
+      return showTreeList;
     };
 
     const getIndex = (node: IInnerTreeNode): number => {
@@ -100,20 +164,27 @@ export function useCore(): (data: Ref<IInnerTreeNode[]>) => IUseCore {
       return data.value.findIndex((item) => item.id === node.id);
     };
 
-    const getNode = (node: IInnerTreeNode): IInnerTreeNode => {
-      return data.value.find((item) => item.id === node.id);
+    const getNode = (node: IInnerTreeNode | string | number) => {
+      if (typeof node === 'string' || typeof node === 'number') {
+        return hashTreeData.value[node];
+      } else {
+        return getInnerNode(node) ?? undefined;
+      }
     };
 
     const setNodeValue = (node: IInnerTreeNode, key: keyof IInnerTreeNode, value: valueof<IInnerTreeNode>): void => {
       clearNodeMap();
-      if (getIndex(node) !== -1) {
-        data.value[getIndex(node)][key] = value;
+      const innerNode = getInnerNode(node);
+      if (!innerNode) {
+        return;
       }
+      innerNode[key] = value;
     };
 
     const setTree = (newTree: ITreeNode[]): void => {
       clearNodeMap();
       data.value = generateInnerTree(newTree);
+      updateHashTreeData();
     };
 
     const getTree = () => {
@@ -135,6 +206,10 @@ export function useCore(): (data: Ref<IInnerTreeNode[]>) => IUseCore {
       setNodeValue,
       setTree,
       getTree,
+      updateHashTreeData,
+      toggleChildNodeVisible,
+      hashTreeData,
+      getFlattenChildren,
     };
   };
 }

packages/devui-vue/devui/tree/src/composables/use-lazy-load.ts

@@ -4,7 +4,7 @@ import { generateInnerTree } from './utils';
 
 export function useLazyLoad() {
   return function useLazyLoadFn(data: Ref<IInnerTreeNode[]>, core: IUseCore, context: SetupContext): IUseLazyLoad {
-    const { getNode, setNodeValue, getIndex, getChildren } = core;
+    const { getNode, setNodeValue, getIndex, getChildren, updateHashTreeData, toggleChildNodeVisible } = core;
 
     const setCommonParent = (node: IInnerTreeNode, nodes: Ref<IInnerTreeNode[]>) => {
       nodes.value.forEach((item) => {
@@ -21,6 +21,12 @@ export function useLazyLoad() {
       }
     };
 
+    // 更新childList
+    const setChildList = (parent: IInnerTreeNode, nodes: Ref<IInnerTreeNode[]>) => {
+      const childList = nodes.value.filter((node) => node.parentId === parent.id);
+      parent.childList = [...childList];
+    };
+
     const dealChildNodes = (result: LazyNodeResult) => {
       const node = getNode(result.node);
       setNodeValue(node, 'loading', false);
@@ -29,9 +35,15 @@ export function useLazyLoad() {
       setCommonParent(node, childNodes);
       // 插入children
       insertChildrenNodes(node, childNodes);
+      // 更新hashTreeData
+      updateHashTreeData();
       // 更新childrenNodes数量
       const childrenNodes = getChildren(node);
       setNodeValue(node, 'childNodeCount', childrenNodes.length);
+      // 更新childList
+      setChildList(node, childNodes);
+      // 更新子节点展开状态
+      toggleChildNodeVisible(node, true);
     };
 
     const lazyLoadNodes = (node: IInnerTreeNode): void => {

packages/devui-vue/devui/tree/src/composables/use-operate.ts

@@ -1,12 +1,12 @@
-import { Ref, ref } from 'vue';
+import { Ref, ref, toRaw } from 'vue';
 import { randomId } from '../../../shared/utils';
 import { IInnerTreeNode, ITreeNode, IUseCore, IUseOperate } from './use-tree-types';
 
 export function useOperate() {
   return function useOperateFn(data: Ref<IInnerTreeNode[]>, core: IUseCore): IUseOperate {
-    const { setNodeValue, getChildren, getIndex, getLevel, getParent } = core;
+    const { setNodeValue, getChildren, getIndex, getLevel, getParent, updateHashTreeData, getFlattenChildren } = core;
 
-    const insertBefore = (parentNode: ITreeNode, node: ITreeNode, referenceNode?: ITreeNode): void => {
+    const insertBefore = (parentNode: IInnerTreeNode, node: IInnerTreeNode, referenceNode?: IInnerTreeNode): void => {
       const children = getChildren(parentNode, {
         recursive: false,
       });
@@ -36,6 +36,7 @@ export function useOperate() {
         level: getLevel(parentNode) + 1,
         parentId: parentNode.id,
         isLeaf: true,
+        showNode: true,
         parentChildNodeCount: children.length + 1,
         currentIndex: lastChild && typeof lastChild.currentIndex === 'number' ? lastChild.currentIndex + 1 : 0,
       });
@@ -44,7 +45,18 @@ export function useOperate() {
         currentNode.value.id = randomId();
       }
 
+      parentNode.childList = [];
       data.value = data.value.slice(0, insertedIndex).concat(currentNode.value, data.value.slice(insertedIndex, data.value.length));
+      data.value.forEach((item) => {
+        if (item.parentId === parentNode.id) {
+          setNodeValue(item, 'parentChildNodeCount', children.length + 1);
+          parentNode.childList?.push(toRaw(item));
+        }
+      });
+      parentNode.childList.forEach((v, i) => (v.currentIndex = i));
+      parentNode.children = parentNode.childList;
+      parentNode.isLeaf = !parentNode.children.length;
+      updateHashTreeData();
     };
 
     const removeNode = (node: IInnerTreeNode, config = { recursive: true }): void => {
@@ -54,23 +66,28 @@ export function useOperate() {
         });
       }
 
-      data.value = data.value.filter((item) => {
-        if (config.recursive) {
-          return (
-            item.id !== node.id &&
-            !getChildren(node)
-              .map((nodeItem) => nodeItem.id)
-              .includes(item.id)
-          );
+      const children = getFlattenChildren(node);
+      const removeIds = [node.id, ...children.map((v) => v.id)];
+      data.value = data.value.filter((item) => !removeIds.includes(item.id));
+
+      const parentNode = getParent(node);
+      const originParentNode = toRaw(parentNode);
+      if (parentNode && originParentNode) {
+        const parentChildren = getChildren(parentNode);
+        if (parentChildren?.length) {
+          const list = originParentNode.childList || [];
+          parentNode.childList = list.filter((item) => item.id !== node.id) ?? [];
+          setNodeValue(parentNode, 'childNodeCount', list.length);
         } else {
-          return item.id !== node.id;
+          parentNode.childList = [];
+          setNodeValue(parentNode, 'childNodeCount', 0);
+          setNodeValue(parentNode, 'isLeaf', true);
+          setNodeValue(parentNode, 'expanded', false);
         }
-      });
-
-      // 子节点全部删完了，应该设置父节点为叶子结点(isLeaf)
-      if (getParent(node) && getChildren(getParent(node)).length === 0) {
-        setNodeValue(getParent(node), 'isLeaf', true);
+        parentNode.children = originParentNode.children;
       }
+
+      updateHashTreeData();
     };
 
     const editNode = (node: IInnerTreeNode, label: string): void => {