refactor(Sideber): improve setup perf

src/password-input/index.js

@@ -27,10 +27,10 @@ export default createComponent({
   emits: ['focus'],
 
   setup(props, { emit }) {
-    function onTouchStart(event) {
+    const onTouchStart = (event) => {
       event.stopPropagation();
       emit('focus', event);
-    }
+    };
 
     return () => {
       const { mask, value, length, gutter, focused, errorInfo } = props;

src/tree-select/index.js

@@ -44,18 +44,61 @@ export default createComponent({
   ],
 
   setup(props, { emit, slots }) {
-    return function () {
+    const isMultiple = () => Array.isArray(props.activeId);
-      const { items, height, activeId, selectedIcon, mainActiveIndex } = props;
 
-      const selectedItem = items[+mainActiveIndex] || {};
+    const isActiveItem = (id) => {
-      const subItems = selectedItem.children || [];
+      return isMultiple()
-      const isMultiple = Array.isArray(activeId);
+        ? props.activeId.indexOf(id) !== -1
+        : props.activeId === id;
+    };
 
-      function isActiveItem(id) {
+    const renderSubItem = (item) => {
-        return isMultiple ? activeId.indexOf(id) !== -1 : activeId === id;
+      const onClick = () => {
-      }
+        if (item.disabled) {
+          return;
+        }
 
-      const Navs = items.map((item) => (
+        let activeId;
+        if (isMultiple()) {
+          activeId = props.activeId.slice();
+
+          const index = activeId.indexOf(item.id);
+
+          if (index !== -1) {
+            activeId.splice(index, 1);
+          } else if (activeId.length < props.max) {
+            activeId.push(item.id);
+          }
+        } else {
+          activeId = item.id;
+        }
+
+        emit('update:activeId', activeId);
+        emit('click-item', item);
+      };
+
+      return (
+        <div
+          key={item.id}
+          class={[
+            'van-ellipsis',
+            bem('item', {
+              active: isActiveItem(item.id),
+              disabled: item.disabled,
+            }),
+          ]}
+          onClick={onClick}
+        >
+          {item.text}
+          {isActiveItem(item.id) && (
+            <Icon name={props.selectedIcon} class={bem('selected')} />
+          )}
+        </div>
+      );
+    };
+
+    const renderSidebar = () => {
+      const Items = props.items.map((item) => (
         <SidebarItem
           dot={item.dot}
           title={item.text}
@@ -65,64 +108,36 @@ export default createComponent({
         />
       ));
 
-      function Content() {
-        if (slots.content) {
-          return slots.content();
-        }
-
-        return subItems.map((item) => (
-          <div
-            key={item.id}
-            class={[
-              'van-ellipsis',
-              bem('item', {
-                active: isActiveItem(item.id),
-                disabled: item.disabled,
-              }),
-            ]}
-            onClick={() => {
-              if (!item.disabled) {
-                let newActiveId = item.id;
-                if (isMultiple) {
-                  newActiveId = activeId.slice();
-
-                  const index = newActiveId.indexOf(item.id);
-
-                  if (index !== -1) {
-                    newActiveId.splice(index, 1);
-                  } else if (newActiveId.length < props.max) {
-                    newActiveId.push(item.id);
-                  }
-                }
-
-                emit('update:activeId', newActiveId);
-                emit('click-item', item);
-              }
-            }}
-          >
-            {item.text}
-            {isActiveItem(item.id) && (
-              <Icon name={selectedIcon} class={bem('selected')} />
-            )}
-          </div>
-        ));
-      }
-
       return (
-        <div class={bem()} style={{ height: addUnit(height) }}>
+        <Sidebar
-          <Sidebar
+          class={bem('nav')}
-            class={bem('nav')}
+          modelValue={props.mainActiveIndex}
-            modelValue={mainActiveIndex}
+          onChange={(index) => {
-            onChange={(index) => {
+            emit('update:mainActiveIndex', index);
-              emit('update:mainActiveIndex', index);
+            emit('click-nav', index);
-              emit('click-nav', index);
+          }}
-            }}
+        >
-          >
+          {Items}
-            {Navs}
+        </Sidebar>
-          </Sidebar>
-          <div class={bem('content')}>{Content()}</div>
-        </div>
       );
     };
+
+    const renderContent = () => {
+      if (slots.content) {
+        return slots.content();
+      }
+
+      const selected = props.items[+props.mainActiveIndex] || {};
+      if (selected.children) {
+        return selected.children.map(renderSubItem);
+      }
+    };
+
+    return () => (
+      <div class={bem()} style={{ height: addUnit(props.height) }}>
+        {renderSidebar()}
+        <div class={bem('content')}>{renderContent()}</div>
+      </div>
+    );
   },
 });