perf(BasicTree): 外部获取treeData不必通过treeDataRef.value (#3353)

vbenjs · Dec 4, 2023 · 943f500 · 943f500
1 parent 7207a0b
commit 943f500
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 8 deletions.
diff --git a/src/components/Tree/src/BasicTree.vue b/src/components/Tree/src/BasicTree.vue
@@ -110,12 +110,12 @@
         return omit(propsData, 'treeData', 'class') as TreeProps;
       });
 
-      const getTreeData = computed((): TreeItem[] =>
+      const getTreeSearchData = computed((): TreeItem[] =>
         searchState.startSearch ? searchState.searchData : unref(treeDataRef),
       );
 
       const getNotFound = computed((): boolean => {
-        return !getTreeData.value || getTreeData.value.length === 0;
+        return !getTreeSearchData.value || getTreeSearchData.value.length === 0;
       });
 
       const {
@@ -158,6 +158,10 @@
         createContextMenu(contextMenuOptions);
       }
 
+      function getTreeData() {
+        return unref(treeDataRef);
+      }
+
       function setExpandedKeys(keys: KeyType[]) {
         state.expandedKeys = keys;
       }
@@ -320,7 +324,7 @@
       });
 
       const instance: TreeActionType = {
-        getTreeData: () => treeDataRef,
+        getTreeData,
         setExpandedKeys,
         getExpandedKeys,
         setSelectedKeys,
@@ -367,7 +371,7 @@
       }
 
       const treeData = computed(() => {
-        const data = cloneDeep(getTreeData.value);
+        const data = cloneDeep(getTreeSearchData.value);
         eachTree(data, (item, _parent) => {
           const searchText = searchState.searchText;
           const { highlight } = unref(props);

diff --git a/src/components/Tree/src/types/tree.ts b/src/components/Tree/src/types/tree.ts
@@ -1,4 +1,4 @@
-import type { ExtractPropTypes, Ref } from 'vue';
+import type { ExtractPropTypes } from 'vue';
 import type { TreeDataItem } from 'ant-design-vue/es/tree/Tree';
 
 import { buildProps } from '@/utils/props';
@@ -171,7 +171,7 @@ export interface InsertNodeParams {
 }
 
 export interface TreeActionType {
-  getTreeData: () => Ref<TreeDataItem[]>;
+  getTreeData: () => TreeDataItem[];
   checkAll: (checkAll: boolean) => void;
   expandAll: (expandAll: boolean) => void;
   setExpandedKeys: (keys: KeyType[]) => void;

diff --git a/src/views/demo/tree/ActionTree.vue b/src/views/demo/tree/ActionTree.vue
@@ -116,7 +116,6 @@
   }
 
   function handleGetTreeData() {
-    const treeDataRef = getTree().getTreeData();
-    createMessage.success(JSON.stringify(treeDataRef.value));
+    createMessage.success(JSON.stringify(getTree().getTreeData()));
   }
 </script>