perf: tsx use useExpose

CHANGELOG.zh_CN.md

@@ -13,6 +13,10 @@
 - 打包代码拆分(试验)
 - 提取上传地址到全局变量，打包可以动态配置
 
+### ✨ Refactor
+
+- tree 组件 ref 函数调用删除 `$`
+
 ### ⚡ Performance Improvements
 
 - 页面切换 loading 逻辑修改。对于已经加载过的页面不管有没有关闭,再次打开不会在显示 loading(已经打开过的页面再次打开速度比较快,可以不需要 loading,同理顶部进度条逻辑也一样)，刷新后恢复。

src/components/Container/src/ScrollContainer.vue

@@ -11,7 +11,7 @@
 
 <script lang="ts">
   import { defineComponent, ref, unref, nextTick } from 'vue';
-  import { Scrollbar } from '/@/components/Scrollbar';
+  import { Scrollbar, ScrollbarType } from '/@/components/Scrollbar';
 
   import { useScrollTo } from '/@/hooks/event/useScrollTo';
 
@@ -19,15 +19,17 @@
     name: 'ScrollContainer',
     components: { Scrollbar },
     setup() {
-      const scrollbarRef = ref<RefInstanceType<any>>(null);
+      const scrollbarRef = ref<Nullable<ScrollbarType>>(null);
 
       function scrollTo(to: number, duration = 500) {
         const scrollbar = unref(scrollbarRef);
         if (!scrollbar) return;
 
         nextTick(() => {
+          const wrap = unref(scrollbar.wrap);
+          if (!wrap) return;
           const { start } = useScrollTo({
-            el: unref(scrollbar.$.wrap),
+            el: wrap,
             to,
             duration,
           });
@@ -38,7 +40,7 @@
       function getScrollWrap() {
         const scrollbar = unref(scrollbarRef);
         if (!scrollbar) return null;
-        return scrollbar.$.wrap;
+        return scrollbar.wrap;
       }
 
       function scrollBottom() {
@@ -46,9 +48,11 @@
         if (!scrollbar) return;
 
         nextTick(() => {
-          const scrollHeight = scrollbar.$.wrap.scrollHeight as number;
+          const wrap = unref(scrollbar.wrap);
+          if (!wrap) return;
+          const scrollHeight = wrap.scrollHeight as number;
           const { start } = useScrollTo({
-            el: unref(scrollbar.$.wrap),
+            el: wrap,
             to: scrollHeight,
           });
           start();

src/components/Form/src/BasicForm.vue

@@ -31,17 +31,7 @@
   import type { Ref, WatchStopHandle } from 'vue';
   import type { ValidateFields } from 'ant-design-vue/lib/form/interface';
 
-  import {
+  import { defineComponent, reactive, ref, computed, unref, onMounted, watch, toRefs } from 'vue';
-    defineComponent,
-    reactive,
-    ref,
-    computed,
-    unref,
-    toRef,
-    onMounted,
-    watch,
-    toRefs,
-  } from 'vue';
   import { Form, Row } from 'ant-design-vue';
   import FormItem from './FormItem';
   import { basicProps } from './props';

src/components/Scrollbar/index.ts

@@ -2,4 +2,10 @@
  * copy from element-ui
  */
 
-export { default as Scrollbar } from './src/Scrollbar';
+import Scrollbar from './src/Scrollbar';
+import { withInstall } from '../util';
+
+withInstall(Scrollbar);
+
+export { Scrollbar };
+export type { ScrollbarType } from './src/types';

src/components/Scrollbar/src/Scrollbar.tsx

@@ -15,8 +15,9 @@ import {
   onBeforeUnmount,
 } from 'vue';
 import { getSlot } from '/@/utils/helper/tsxHelper';
-import { tryTsxEmit } from '/@/utils/helper/vueHelper';
 import './index.less';
+import { useExpose } from '/@/hooks/core/useExpose';
+import { ScrollbarType } from './types';
 
 export default defineComponent({
   name: 'Scrollbar',
@@ -65,10 +66,9 @@ export default defineComponent({
     }
 
     onMounted(() => {
-      tryTsxEmit<any>((instance) => {
+      useExpose<ScrollbarType>({
-        instance.wrap = unref(wrapElRef);
+        wrap: unref(wrapElRef),
       });
-
       const { native, noresize } = props;
       const resizeEl = unref(resizeRef);
       const warpEl = unref(wrapElRef);

src/components/Scrollbar/src/types.d.ts

@@ -12,3 +12,7 @@ export interface BarMap {
   vertical: BarMapItem;
   horizontal: BarMapItem;
 }
+
+export interface ScrollbarType {
+  wrap: ElRef;
+}

src/components/Table/src/BasicTable.vue

@@ -69,6 +69,7 @@
   import { basicProps } from './props';
   import { ROW_KEY } from './const';
   import './style/index.less';
+  import { useExpose } from '/@/hooks/core/useExpose';
   export default defineComponent({
     props: basicProps,
     components: { Table, BasicForm },
@@ -309,6 +310,8 @@
         wrapRef,
       });
 
+      useExpose<TableActionType>(tableAction);
+
       emit('register', tableAction);
       return {
         tableElRef,
@@ -322,7 +325,7 @@
         getRowClassName,
         wrapRef,
         tableAction,
-        ...tableAction,
+        redoHeight,
       };
     },
   });

src/components/Tree/src/BasicTree.tsx

@@ -11,10 +11,10 @@ import { useContextMenu, ContextMenuItem } from '/@/hooks/web/useContextMenu';
 import { isFunction } from '/@/utils/is';
 import { omit } from 'lodash-es';
 import { extendSlots } from '/@/utils/helper/tsxHelper';
-import { tryTsxEmit } from '/@/utils/helper/vueHelper';
 
 import { basicProps } from './props';
 import { useTree } from './useTree';
+import { useExpose } from '/@/hooks/core/useExpose';
 
 interface State {
   expandedKeys: Keys;
@@ -182,20 +182,21 @@ export default defineComponent({
       state.checkedKeys = props.checkedKeys;
     });
 
-    tryTsxEmit<TreeActionType>((currentInstance) => {
+    useExpose<TreeActionType>({
-      currentInstance.setExpandedKeys = setExpandedKeys;
+      setExpandedKeys,
-      currentInstance.getExpandedKeys = getExpandedKeys;
+      getExpandedKeys,
-      currentInstance.setSelectedKeys = setSelectedKeys;
+      setSelectedKeys,
-      currentInstance.getSelectedKeys = getSelectedKeys;
+      getSelectedKeys,
-      currentInstance.setCheckedKeys = setCheckedKeys;
+      setCheckedKeys,
-      currentInstance.getCheckedKeys = getCheckedKeys;
+      getCheckedKeys,
-      currentInstance.insertNodeByKey = insertNodeByKey;
+      insertNodeByKey,
-      currentInstance.deleteNodeByKey = deleteNodeByKey;
+      deleteNodeByKey,
-      currentInstance.updateNodeByKey = updateNodeByKey;
+      updateNodeByKey,
-      currentInstance.filterByLevel = (level: number) => {
+      filterByLevel: (level: number) => {
         state.expandedKeys = filterByLevel(level);
-      };
+      },
     });
+
     return () => {
       return (
         <Tree {...unref(getBindValues)} class={prefixCls}>

src/components/Verify/src/DragVerify.tsx

@@ -5,8 +5,8 @@ import { basicProps } from './props';
 import { getSlot } from '/@/utils/helper/tsxHelper';
 import './DragVerify.less';
 import { CheckOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
-import { tryTsxEmit } from '/@/utils/helper/vueHelper';
 import type { DragVerifyActionType } from './types';
+import { useExpose } from '/@/hooks/core/useExpose';
 export default defineComponent({
   name: 'BaseDargVerify',
   props: basicProps,
@@ -211,8 +211,8 @@ export default defineComponent({
       contentEl.style.width = unref(getContentStyleRef).width;
     }
 
-    tryTsxEmit<DragVerifyActionType>((instance) => {
+    useExpose<DragVerifyActionType>({
-      instance.resume = resume;
+      resume,
     });
 
     return () => {

src/components/Verify/src/ImgRotate.tsx

@@ -18,7 +18,7 @@ export default defineComponent({
   props: rotateProps,
   emits: ['success', 'change', 'update:value'],
   setup(props, { emit, attrs }) {
-    const basicRef = ref<RefInstanceType<DragVerifyActionType>>(null);
+    const basicRef = ref<Nullable<DragVerifyActionType>>(null);
     const state = reactive({
       showTip: false,
       isPassing: false,
@@ -113,7 +113,7 @@ export default defineComponent({
       }
       state.isPassing = false;
 
-      basicEl.$.resume();
+      basicEl.resume();
       handleImgOnLoad();
     }
 

src/hooks/core/useExpose.ts

@@ -1,7 +1,7 @@
 import { getCurrentInstance } from 'vue';
 
 // expose public api
-export function useExpose(apis: Record<string, any>) {
+export function useExpose<T>(apis: T) {
   const instance = getCurrentInstance();
   if (instance) {
     Object.assign(instance.proxy, apis);

src/types/global.d.ts

@@ -19,10 +19,6 @@ declare type Dictionary<T> = Record<string, T>;
 
 declare type Nullable<T> = T | null;
 
-declare type RefInstanceType<T> = {
-  $: T;
-} | null;
-
 declare type RefType<T> = T | null;
 
 declare type CustomizedHTMLElement<T> = HTMLElement & T;

src/views/demo/comp/verify/index.vue

@@ -59,22 +59,22 @@
     components: { BasicDragVerify, BugOutlined, RightOutlined },
     setup() {
       const { createMessage } = useMessage();
-      const el1 = ref<RefInstanceType<DragVerifyActionType>>(null);
+      const el1 = ref<Nullable<DragVerifyActionType>>(null);
-      const el2 = ref<RefInstanceType<DragVerifyActionType>>(null);
+      const el2 = ref<Nullable<DragVerifyActionType>>(null);
-      const el3 = ref<RefInstanceType<DragVerifyActionType>>(null);
+      const el3 = ref<Nullable<DragVerifyActionType>>(null);
-      const el4 = ref<RefInstanceType<DragVerifyActionType>>(null);
+      const el4 = ref<Nullable<DragVerifyActionType>>(null);
-      const el5 = ref<RefInstanceType<DragVerifyActionType>>(null);
+      const el5 = ref<Nullable<DragVerifyActionType>>(null);
 
       function handleSuccess(data: PassingData) {
         const { time } = data;
         createMessage.success(`校验成功,耗时${time}秒`);
       }
 
-      function handleBtnClick(elRef: RefInstanceType<DragVerifyActionType>) {
+      function handleBtnClick(elRef: Nullable<DragVerifyActionType>) {
         if (!elRef) {
           return;
         }
-        elRef.$.resume();
+        elRef.resume();
       }
       return {
         handleSuccess,

src/views/demo/tree/ActionTree.vue

@@ -32,14 +32,14 @@
   export default defineComponent({
     components: { BasicTree, CollapseContainer },
     setup() {
-      const treeRef = ref<RefInstanceType<TreeActionType>>(null);
+      const treeRef = ref<Nullable<TreeActionType>>(null);
       const { createMessage } = useMessage();
       function getTree() {
         const tree = unref(treeRef);
         if (!tree) {
           throw new Error('tree is null!');
         }
-        return tree.$;
+        return tree;
       }
 
       function handleLevel(level: number) {