Tree: improve performance (#14881)

packages/tree/src/model/node.js

@@ -71,6 +71,7 @@ export default class Node {
     this.expanded = false;
     this.parent = null;
     this.visible = true;
+    this.isCurrent = false;
 
     for (let name in options) {
       if (options.hasOwnProperty(name)) {
@@ -123,6 +124,7 @@ export default class Node {
 
     if (key && store.currentNodeKey !== undefined && this.key === store.currentNodeKey) {
       store.currentNode = this;
+      store.currentNode.isCurrent = true;
     }
 
     if (store.lazy) {

packages/tree/src/model/tree-store.js

@@ -314,8 +314,13 @@ export default class TreeStore {
     return this.currentNode;
   }
 
-  setCurrentNode(node) {
-    this.currentNode = node;
+  setCurrentNode(currentNode) {
+    const prevCurrentNode = this.currentNode;
+    if (prevCurrentNode) {
+      prevCurrentNode.isCurrent = false;
+    }
+    this.currentNode = currentNode;
+    this.currentNode.isCurrent = true;
   }
 
   setUserCurrentNode(node) {
@@ -331,7 +336,7 @@ export default class TreeStore {
     }
     const node = this.getNode(key);
     if (node) {
-      this.currentNode = node;
+      this.setCurrentNode(node);
     }
   }
 };

packages/tree/src/tree-node.vue

@@ -6,7 +6,7 @@
     v-show="node.visible"
     :class="{
       'is-expanded': expanded,
-      'is-current': tree.store.currentNode === node,
+      'is-current': node.isCurrent,
       'is-hidden': !node.visible,
       'is-focusable': !node.disabled,
       'is-checked': !node.disabled && node.checked

types/tree.d.ts

@@ -36,6 +36,7 @@ export interface TreeNode<K, D> {
   label: string;
   nextSibling: TreeNode<K, D> | null;
   previousSibling: TreeNode<K, D> | null;
+  isCurrent: boolean;
 }
 
 /** incomplete, you can convert to any to use other properties */