perf: shallowRef instead ref

Author: tangjinzhou

components/_util/ActionButton.tsx

@@ -1,5 +1,5 @@
 import type { ExtractPropTypes, PropType } from 'vue';
-import { onMounted, ref, defineComponent, onBeforeUnmount } from 'vue';
+import { shallowRef, onMounted, defineComponent, onBeforeUnmount } from 'vue';
 import Button from '../button';
 import type { ButtonProps } from '../button';
 import type { LegacyButtonType } from '../button/buttonTypes';
@@ -32,9 +32,9 @@ export default defineComponent({
   name: 'ActionButton',
   props: actionButtonProps,
   setup(props, { slots }) {
-    const clickedRef = ref<boolean>(false);
-    const buttonRef = ref();
-    const loading = ref(false);
+    const clickedRef = shallowRef<boolean>(false);
+    const buttonRef = shallowRef();
+    const loading = shallowRef(false);
     let timeoutId: any;
     const isDestroyed = useDestroyed();
     onMounted(() => {

components/_util/BaseInput.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, ref, withDirectives } from 'vue';
+import { defineComponent, shallowRef, withDirectives } from 'vue';
 import antInput from './antInputDirective';
 import PropTypes from './vue-types';
 const BaseInput = defineComponent({
@@ -8,7 +8,7 @@ const BaseInput = defineComponent({
   },
   emits: ['change', 'input'],
   setup(_p, { emit }) {
-    const inputRef = ref(null);
+    const inputRef = shallowRef(null);
     const handleChange = (e: Event) => {
       const { composing } = e.target as any;
       if ((e as any).isComposing || composing) {

components/_util/PortalWrapper.tsx

@@ -4,7 +4,7 @@ import setStyle from './setStyle';
 import Portal from './Portal';
 import {
   defineComponent,
-  ref,
+  shallowRef,
   watch,
   onMounted,
   onBeforeUnmount,
@@ -60,9 +60,9 @@ export default defineComponent({
   },
 
   setup(props, { slots }) {
-    const container = ref<HTMLElement>();
-    const componentRef = ref();
-    const rafId = ref<number>();
+    const container = shallowRef<HTMLElement>();
+    const componentRef = shallowRef();
+    const rafId = shallowRef<number>();
     const scrollLocker = new ScrollLocker({
       container: getParent(props.getContainer) as HTMLElement,
     });

components/_util/hooks/_vueuse/useElementSize.ts

@@ -1,4 +1,4 @@
-import { ref, watch } from 'vue';
+import { shallowRef, watch } from 'vue';
 import type { MaybeComputedElementRef } from './unrefElement';
 import type { UseResizeObserverOptions } from './useResizeObserver';
 import { useResizeObserver } from './useResizeObserver';
@@ -23,8 +23,8 @@ export function useElementSize(
   options: UseResizeObserverOptions = {},
 ) {
   const { box = 'content-box' } = options;
-  const width = ref(initialSize.width);
-  const height = ref(initialSize.height);
+  const width = shallowRef(initialSize.width);
+  const height = shallowRef(initialSize.height);
 
   useResizeObserver(
     target,

components/_util/hooks/_vueuse/useSupported.ts

@@ -1,9 +1,8 @@
 import { tryOnMounted } from './tryOnMounted';
-import type { Ref } from 'vue';
-import { ref } from 'vue';
+import { shallowRef } from 'vue';
 
 export function useSupported(callback: () => unknown, sync = false) {
-  const isSupported = ref() as Ref<boolean>;
+  const isSupported = shallowRef<boolean>();
 
   const update = () => (isSupported.value = Boolean(callback()));
 

components/_util/hooks/useBreakpoint.ts

@@ -1,10 +1,10 @@
 import type { Ref } from 'vue';
-import { onMounted, onUnmounted, ref } from 'vue';
+import { onMounted, onUnmounted, shallowRef } from 'vue';
 import type { ScreenMap } from '../../_util/responsiveObserve';
 import useResponsiveObserve from '../../_util/responsiveObserve';
 
 function useBreakpoint(): Ref<ScreenMap> {
-  const screens = ref<ScreenMap>({});
+  const screens = shallowRef<ScreenMap>({});
   let token = null;
   const responsiveObserve = useResponsiveObserve();
 

components/_util/hooks/useDestroyed.ts

@@ -1,7 +1,7 @@
-import { onBeforeUnmount, ref } from 'vue';
+import { onBeforeUnmount, shallowRef } from 'vue';
 
 const useDestroyed = () => {
-  const destroyed = ref(false);
+  const destroyed = shallowRef(false);
   onBeforeUnmount(() => {
     destroyed.value = true;
   });

components/_util/hooks/useFlexGapSupport.ts

@@ -1,8 +1,8 @@
-import { onMounted, ref } from 'vue';
+import { onMounted, shallowRef } from 'vue';
 import { detectFlexGapSupported } from '../styleChecker';
 
 export default () => {
-  const flexible = ref(false);
+  const flexible = shallowRef(false);
   onMounted(() => {
     flexible.value = detectFlexGapSupported();
   });

components/_util/hooks/useLayoutState.ts

@@ -1,5 +1,5 @@
 import type { Ref } from 'vue';
-import { onBeforeUnmount, ref } from 'vue';
+import { onBeforeUnmount, shallowRef } from 'vue';
 import raf from '../raf';
 
 export type Updater<State> = (prev: State) => State;
@@ -9,11 +9,11 @@ export type Updater<State> = (prev: State) => State;
 export function useLayoutState<State>(
   defaultState: State,
 ): [Ref<State>, (updater: Updater<State>) => void] {
-  const stateRef = ref(defaultState);
+  const stateRef = shallowRef(defaultState);
   let tempState = stateRef.value;
 
   let updateBatchRef = [];
-  const rafRef = ref();
+  const rafRef = shallowRef();
   function setFrameState(updater: Updater<State>) {
     raf.cancel(rafRef.value);
     updateBatchRef.push(updater);

components/_util/transButton.tsx

@@ -1,5 +1,5 @@
 import type { CSSProperties } from 'vue';
-import { defineComponent, ref, onMounted } from 'vue';
+import { defineComponent, shallowRef, onMounted } from 'vue';
 /**
  * Wrap of sub component which need use as Button capacity (like Icon component).
  * This helps accessibility reader to tread as a interactive button to operation.
@@ -25,7 +25,7 @@ const TransButton = defineComponent({
     autofocus: { type: Boolean, default: undefined },
   },
   setup(props, { slots, emit, attrs, expose }) {
-    const domRef = ref();
+    const domRef = shallowRef();
     const onKeyDown = (event: KeyboardEvent) => {
       const { keyCode } = event;
       if (keyCode === KeyCode.ENTER) {