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,33 +44,40 @@ 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;
-        <SidebarItem
+        if (isMultiple()) {
-          dot={item.dot}
+          activeId = props.activeId.slice();
-          title={item.text}
-          badge={item.badge}
-          disabled={item.disabled}
-          class={[bem('nav-item'), item.className]}
-        />
-      ));
 
-      function Content() {
+          const index = activeId.indexOf(item.id);
-        if (slots.content) {
+
-          return slots.content();
+          if (index !== -1) {
+            activeId.splice(index, 1);
+          } else if (activeId.length < props.max) {
+            activeId.push(item.id);
+          }
+        } else {
+          activeId = item.id;
         }
 
-        return subItems.map((item) => (
+        emit('update:activeId', activeId);
+        emit('click-item', item);
+      };
+
+      return (
         <div
           key={item.id}
           class={[
@@ -80,49 +87,57 @@ export default createComponent({
               disabled: item.disabled,
             }),
           ]}
-            onClick={() => {
+          onClick={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')} />
+            <Icon name={props.selectedIcon} class={bem('selected')} />
           )}
         </div>
+      );
+    };
+
+    const renderSidebar = () => {
+      const Items = props.items.map((item) => (
+        <SidebarItem
+          dot={item.dot}
+          title={item.text}
+          badge={item.badge}
+          disabled={item.disabled}
+          class={[bem('nav-item'), item.className]}
+        />
       ));
-      }
 
       return (
-        <div class={bem()} style={{ height: addUnit(height) }}>
         <Sidebar
           class={bem('nav')}
-            modelValue={mainActiveIndex}
+          modelValue={props.mainActiveIndex}
           onChange={(index) => {
             emit('update:mainActiveIndex', index);
             emit('click-nav', index);
           }}
         >
-            {Navs}
+          {Items}
         </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>
+    );
   },
 });