[improvement] TreeSelect: 优化性能

re #1244

packages/tree-select/index.ts

@@ -35,12 +35,13 @@ VantComponent({
 
   watch: {
     items() {
-      this.updateSubItems();
-      this.updateMainHeight();
+      this.updateSubItems().then(() => {
+        this.updateMainHeight();
+      });
     },
 
     maxHeight() {
-      this.updateItemHeight();
+      this.updateItemHeight(this.data.subItems);
       this.updateMainHeight();
     },
 
@@ -67,31 +68,29 @@ VantComponent({
 
     // 更新子项列表
     updateSubItems() {
-      const selectedItem = this.data.items[this.data.mainActiveIndex] || {};
+      const { items, mainActiveIndex } = this.data;
+      const { children = [] } = items[mainActiveIndex] || {};
 
-      this.set({ subItems: selectedItem.children || [] });
-
-      this.updateItemHeight();
+      this.updateItemHeight(children);
+      return this.set({ subItems: children });
     },
 
     // 更新组件整体高度，根据最大高度和当前组件需要展示的高度来决定
     updateMainHeight() {
+      const { items = [], subItems = [] } = this.data;
       const maxHeight = Math.max(
-        this.data.items.length * ITEM_HEIGHT,
-        this.data.subItems.length * ITEM_HEIGHT
+        items.length * ITEM_HEIGHT,
+        subItems.length * ITEM_HEIGHT
       );
 
       this.set({ mainHeight: Math.min(maxHeight, this.data.maxHeight) });
     },
 
     // 更新子项列表高度，根据可展示的最大高度和当前子项列表的高度决定
-    updateItemHeight() {
-      this.set({
-        itemHeight: Math.min(
-          this.data.subItems.length * ITEM_HEIGHT,
-          this.data.maxHeight
-        )
-      });
+    updateItemHeight(subItems) {
+      const itemHeight = Math.min(subItems.length * ITEM_HEIGHT, this.data.maxHeight);
+
+      return this.set({ itemHeight });
     }
   }
 });

packages/tree-select/index.wxml

@@ -22,7 +22,7 @@
   >
     <view
       wx:for="{{ subItems }}"
-      wx:key="item.id"
+      wx:key="id"
       class="van-ellipsis van-hairline--bottom content-item-class {{ utils.bem('tree-select__item', { active: activeId === item.id, disabled: item.disabled }) }} {{ activeId === item.id ? 'content-active-class' : '' }} {{ item.disabled ? 'content-disabled-class' : '' }}"
       data-item="{{ item }}"
       bind:tap="onSelectItem"