perf: shallowRef instead ref

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 clickedRef = shallowRef<boolean>(false);
-    const buttonRef = ref();
+    const buttonRef = shallowRef();
-    const loading = ref(false);
+    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 container = shallowRef<HTMLElement>();
-    const componentRef = ref();
+    const componentRef = shallowRef();
-    const rafId = ref<number>();
+    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 width = shallowRef(initialSize.width);
-  const height = ref(initialSize.height);
+  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 { shallowRef } from 'vue';
-import { ref } 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) {

components/_util/wave/WaveEffect.tsx

@@ -1,5 +1,5 @@
 import type { CSSProperties } from 'vue';
-import { onBeforeUnmount, onMounted, Transition, render, defineComponent, ref } from 'vue';
+import { onBeforeUnmount, onMounted, Transition, render, defineComponent, shallowRef } from 'vue';
 import useState from '../hooks/useState';
 import { objectType } from '../type';
 import { getTargetWaveColor } from './util';
@@ -19,7 +19,7 @@ const WaveEffect = defineComponent({
     className: String,
   },
   setup(props) {
-    const divRef = ref<HTMLDivElement | null>(null);
+    const divRef = shallowRef<HTMLDivElement | null>(null);
 
     const [color, setWaveColor] = useState<string | null>(null);
     const [borderRadius, setBorderRadius] = useState<number[]>([]);

components/affix/index.tsx

@@ -1,7 +1,7 @@
 import type { ComponentPublicInstance, CSSProperties, ExtractPropTypes, PropType } from 'vue';
 import {
   defineComponent,
-  ref,
+  shallowRef,
   reactive,
   watch,
   onMounted,
@@ -77,8 +77,8 @@ const Affix = defineComponent({
   inheritAttrs: false,
   props: affixProps(),
   setup(props, { slots, emit, expose, attrs }) {
-    const placeholderNode = ref();
+    const placeholderNode = shallowRef();
-    const fixedNode = ref();
+    const fixedNode = shallowRef();
     const state = reactive({
       affixStyle: undefined,
       placeholderStyle: undefined,

components/alert/index.tsx

@@ -1,5 +1,5 @@
 import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';
-import { computed, defineComponent, ref } from 'vue';
+import { computed, defineComponent, shallowRef } from 'vue';
 import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
 import CheckCircleOutlined from '@ant-design/icons-vue/CheckCircleOutlined';
 import ExclamationCircleOutlined from '@ant-design/icons-vue/ExclamationCircleOutlined';
@@ -71,9 +71,9 @@ const Alert = defineComponent({
   setup(props, { slots, emit, attrs, expose }) {
     const { prefixCls, direction } = useConfigInject('alert', props);
     const [wrapSSR, hashId] = useStyle(prefixCls);
-    const closing = ref(false);
+    const closing = shallowRef(false);
-    const closed = ref(false);
+    const closed = shallowRef(false);
-    const alertNode = ref();
+    const alertNode = shallowRef();
 
     const handleClose = (e: MouseEvent) => {
       e.preventDefault();
@@ -103,7 +103,7 @@ const Alert = defineComponent({
       return props.banner ? 'warning' : 'info';
     });
     expose({ animationEnd });
-    const motionStyle = ref<CSSProperties>({});
+    const motionStyle = shallowRef<CSSProperties>({});
     return () => {
       const { banner, closeIcon: customCloseIcon = slots.closeIcon?.() } = props;
 

components/avatar/Avatar.tsx

@@ -1,7 +1,7 @@
 import type { VueNode } from '../_util/type';
 
 import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';
-import { computed, defineComponent, nextTick, onMounted, ref, watch } from 'vue';
+import { computed, defineComponent, nextTick, onMounted, shallowRef, watch } from 'vue';
 import { getPropsSlot } from '../_util/props-util';
 import PropTypes from '../_util/vue-types';
 import useBreakpoint from '../_util/hooks/useBreakpoint';
@@ -44,12 +44,12 @@ const Avatar = defineComponent({
   props: avatarProps(),
   slots: ['icon'],
   setup(props, { slots, attrs }) {
-    const isImgExist = ref(true);
+    const isImgExist = shallowRef(true);
-    const isMounted = ref(false);
+    const isMounted = shallowRef(false);
-    const scale = ref(1);
+    const scale = shallowRef(1);
 
-    const avatarChildrenRef = ref<HTMLElement>(null);
+    const avatarChildrenRef = shallowRef<HTMLElement>(null);
-    const avatarNodeRef = ref<HTMLElement>(null);
+    const avatarNodeRef = shallowRef<HTMLElement>(null);
 
     const { prefixCls } = useConfigInject('avatar', props);
     const [wrapSSR, hashId] = useStyle(prefixCls);

components/button/button.tsx

@@ -4,7 +4,7 @@ import {
   onBeforeUnmount,
   onMounted,
   onUpdated,
-  ref,
+  shallowRef,
   Text,
   watch,
   watchEffect,
@@ -17,7 +17,7 @@ import devWarning from '../vc-util/devWarning';
 import LoadingIcon from './LoadingIcon';
 import useStyle from './style';
 import type { ButtonType } from './buttonTypes';
-import type { VNode, Ref } from 'vue';
+import type { VNode } from 'vue';
 import { GroupSizeContext } from './button-group';
 import { useCompactItemContext } from '../space/Compact';
 
@@ -42,12 +42,12 @@ export default defineComponent({
     const { prefixCls, autoInsertSpaceInButton, direction, size } = useConfigInject('btn', props);
     const [wrapSSR, hashId] = useStyle(prefixCls);
     const groupSizeContext = GroupSizeContext.useInject();
-    const buttonNodeRef = ref<HTMLElement>(null);
+    const buttonNodeRef = shallowRef<HTMLElement>(null);
-    const delayTimeoutRef = ref(undefined);
+    const delayTimeoutRef = shallowRef(undefined);
     let isNeedInserted = false;
 
-    const innerLoading: Ref<Loading> = ref(false);
+    const innerLoading = shallowRef<Loading>(false);
-    const hasTwoCNChar = ref(false);
+    const hasTwoCNChar = shallowRef(false);
 
     const autoInsertSpace = computed(() => autoInsertSpaceInButton.value !== false);
     const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);

components/collapse/PanelContent.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watchEffect } from 'vue';
+import { defineComponent, shallowRef, watchEffect } from 'vue';
 import { collapsePanelProps } from './commonProps';
 import classNames from '../_util/classNames';
 
@@ -7,7 +7,7 @@ export default defineComponent({
   name: 'PanelContent',
   props: collapsePanelProps(),
   setup(props, { slots }) {
-    const rendered = ref(false);
+    const rendered = shallowRef(false);
 
     watchEffect(() => {
       if (props.isActive || props.forceRender) {
@@ -20,7 +20,6 @@ export default defineComponent({
       const { prefixCls, isActive, role } = props;
       return (
         <div
-          ref={ref}
           class={classNames(`${prefixCls}-content`, {
             [`${prefixCls}-content-active`]: isActive,
             [`${prefixCls}-content-inactive`]: !isActive,

components/drawer/index.tsx

@@ -3,7 +3,7 @@ import {
   inject,
   nextTick,
   defineComponent,
-  ref,
+  shallowRef,
   onMounted,
   provide,
   onUnmounted,
@@ -117,11 +117,11 @@ const Drawer = defineComponent({
   slots: ['closeIcon', 'title', 'extra', 'footer', 'handle'],
   // emits: ['update:visible', 'close', 'afterVisibleChange'],
   setup(props, { emit, slots, attrs }) {
-    const sPush = ref(false);
+    const sPush = shallowRef(false);
-    const destroyClose = ref(false);
+    const destroyClose = shallowRef(false);
-    const vcDrawer = ref(null);
+    const vcDrawer = shallowRef(null);
-    const load = ref(false);
+    const load = shallowRef(false);
-    const visible = ref(false);
+    const visible = shallowRef(false);
     const mergedOpen = computed(() => props.open ?? props.visible);
     watch(
       mergedOpen,

components/form/FormItem.tsx

@@ -13,7 +13,7 @@ import {
   defineComponent,
   computed,
   nextTick,
-  ref,
+  shallowRef,
   watchEffect,
   onBeforeUnmount,
   toRaw,
@@ -158,12 +158,12 @@ export default defineComponent({
     const eventKey = `form-item-${++indexGuid}`;
     const { prefixCls } = useConfigInject('form', props);
     const [wrapSSR, hashId] = useStyle(prefixCls);
-    const itemRef = ref<HTMLDivElement>();
+    const itemRef = shallowRef<HTMLDivElement>();
     const formContext = useInjectForm();
     const fieldName = computed(() => props.name || props.prop);
-    const errors = ref([]);
+    const errors = shallowRef([]);
-    const validateDisabled = ref(false);
+    const validateDisabled = shallowRef(false);
-    const inputRef = ref();
+    const inputRef = shallowRef();
     const namePath = computed(() => {
       const val = fieldName.value;
       return getNamePath(val);
@@ -188,7 +188,7 @@ export default defineComponent({
     };
     const fieldValue = computed(() => getNewFieldValue());
 
-    const initialValue = ref(cloneDeep(fieldValue.value));
+    const initialValue = shallowRef(cloneDeep(fieldValue.value));
     const mergedValidateTrigger = computed(() => {
       let validateTrigger =
         props.validateTrigger !== undefined
@@ -228,7 +228,7 @@ export default defineComponent({
       return isRequired || props.required;
     });
 
-    const validateState = ref();
+    const validateState = shallowRef();
     watchEffect(() => {
       validateState.value = props.validateStatus;
     });
@@ -445,8 +445,8 @@ export default defineComponent({
       });
     });
 
-    const marginBottom = ref<number>(null);
+    const marginBottom = shallowRef<number>(null);
-    const showMarginOffset = ref(false);
+    const showMarginOffset = shallowRef(false);
     const updateMarginBottom = () => {
       if (itemRef.value) {
         const itemStyle = getComputedStyle(itemRef.value);

components/input-number/index.tsx

@@ -1,5 +1,5 @@
 import type { ExtractPropTypes, HTMLAttributes, App } from 'vue';
-import { watch, defineComponent, ref, computed } from 'vue';
+import { watch, defineComponent, shallowRef, computed } from 'vue';
 import classNames from '../_util/classNames';
 import UpOutlined from '@ant-design/icons-vue/UpOutlined';
 import DownOutlined from '@ant-design/icons-vue/DownOutlined';
@@ -62,15 +62,15 @@ const InputNumber = defineComponent({
     const mergedSize = computed(() => compactSize.value || size.value);
     const disabledContext = useInjectDisabled();
     const mergedDisabled = computed(() => disabled.value ?? disabledContext.value);
-    const mergedValue = ref(props.value === undefined ? props.defaultValue : props.value);
+    const mergedValue = shallowRef(props.value === undefined ? props.defaultValue : props.value);
-    const focused = ref(false);
+    const focused = shallowRef(false);
     watch(
       () => props.value,
       () => {
         mergedValue.value = props.value;
       },
     );
-    const inputNumberRef = ref(null);
+    const inputNumberRef = shallowRef(null);
     const focus = () => {
       inputNumberRef.value?.focus();
     };

components/input-number/src/InputNumber.tsx

@@ -6,7 +6,7 @@ import { getNumberPrecision, num2str, validateNumber } from './utils/numberUtil'
 import useCursor from './hooks/useCursor';
 import useFrame from './hooks/useFrame';
 import type { HTMLAttributes } from 'vue';
-import { watch, computed, ref, defineComponent } from 'vue';
+import { watch, computed, shallowRef, defineComponent } from 'vue';
 import type { ChangeEvent, KeyboardEventHandler } from '../../_util/EventInterface';
 import KeyCode from '../../_util/KeyCode';
 import classNames from '../../_util/classNames';
@@ -85,11 +85,11 @@ export default defineComponent({
   },
   slots: ['upHandler', 'downHandler'],
   setup(props, { attrs, slots, emit, expose }) {
-    const inputRef = ref<HTMLInputElement>();
+    const inputRef = shallowRef<HTMLInputElement>();
-    const focus = ref(false);
+    const focus = shallowRef(false);
-    const userTypingRef = ref(false);
+    const userTypingRef = shallowRef(false);
-    const compositionRef = ref(false);
+    const compositionRef = shallowRef(false);
-    const decimalValue = ref(getMiniDecimal(props.value));
+    const decimalValue = shallowRef(getMiniDecimal(props.value));
 
     function setUncontrolledDecimalValue(newDecimal: DecimalClass) {
       if (props.value === undefined) {
@@ -139,7 +139,7 @@ export default defineComponent({
     };
 
     // >>> Formatter
-    const inputValue = ref<string | number>('');
+    const inputValue = shallowRef<string | number>('');
 
     const mergedFormatter = (number: string, userTyping: boolean) => {
       if (props.formatter) {

components/input-number/src/hooks/useFrame.ts

@@ -1,11 +1,11 @@
 import raf from '../../../_util/raf';
-import { onBeforeUnmount, ref } from 'vue';
+import { onBeforeUnmount, shallowRef } from 'vue';
 
 /**
  * Always trigger latest once when call multiple time
  */
 export default () => {
-  const idRef = ref(0);
+  const idRef = shallowRef(0);
 
   const cleanUp = () => {
     raf.cancel(idRef.value);

components/input/Password.tsx

@@ -6,7 +6,7 @@ import EyeOutlined from '@ant-design/icons-vue/EyeOutlined';
 import EyeInvisibleOutlined from '@ant-design/icons-vue/EyeInvisibleOutlined';
 import type { InputProps } from './inputProps';
 import inputProps from './inputProps';
-import { computed, defineComponent, ref } from 'vue';
+import { computed, defineComponent, shallowRef } from 'vue';
 import useConfigInject from '../config-provider/hooks/useConfigInject';
 import omit from '../_util/omit';
 
@@ -29,7 +29,7 @@ export default defineComponent({
     iconRender: Function,
   },
   setup(props, { slots, attrs, expose }) {
-    const visible = ref(false);
+    const visible = shallowRef(false);
     const onVisibleChange = () => {
       const { disabled } = props;
       if (disabled) {
@@ -37,7 +37,7 @@ export default defineComponent({
       }
       visible.value = !visible.value;
     };
-    const inputRef = ref();
+    const inputRef = shallowRef();
     const focus = () => {
       inputRef.value?.focus();
     };

components/input/Search.tsx

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import { computed, ref, defineComponent } from 'vue';
+import { computed, shallowRef, defineComponent } from 'vue';
 import classNames from '../_util/classNames';
 import Input from './Input';
 import SearchOutlined from '@ant-design/icons-vue/SearchOutlined';
@@ -32,8 +32,8 @@ export default defineComponent({
     },
   },
   setup(props, { slots, attrs, expose, emit }) {
-    const inputRef = ref();
+    const inputRef = shallowRef();
-    const composedRef = ref(false);
+    const composedRef = shallowRef(false);
     const focus = () => {
       inputRef.value?.focus();
     };

components/input/TextArea.tsx

@@ -4,7 +4,7 @@ import {
   defineComponent,
   getCurrentInstance,
   nextTick,
-  ref,
+  shallowRef,
   watch,
   watchEffect,
 } from 'vue';
@@ -58,9 +58,9 @@ export default defineComponent({
     const formItemContext = useInjectFormItemContext();
     const formItemInputContext = FormItemInputContext.useInject();
     const mergedStatus = computed(() => getMergedStatus(formItemInputContext.status, props.status));
-    const stateValue = ref(props.value === undefined ? props.defaultValue : props.value);
+    const stateValue = shallowRef(props.value === undefined ? props.defaultValue : props.value);
-    const resizableTextArea = ref();
+    const resizableTextArea = shallowRef();
-    const mergedValue = ref('');
+    const mergedValue = shallowRef('');
     const { prefixCls, size, direction } = useConfigInject('input', props);
 
     // Style
@@ -71,10 +71,10 @@ export default defineComponent({
     });
     // Max length value
     const hasMaxLength = computed(() => Number(props.maxlength) > 0);
-    const compositing = ref(false);
+    const compositing = shallowRef(false);
 
-    const oldCompositionValueRef = ref<string>();
+    const oldCompositionValueRef = shallowRef<string>();
-    const oldSelectionStartRef = ref<number>(0);
+    const oldSelectionStartRef = shallowRef<number>(0);
     const onInternalCompositionStart = (e: CompositionEvent) => {
       compositing.value = true;
       // 拼音输入前保存一份旧值

components/layout/Sider.tsx

@@ -1,6 +1,14 @@
 import classNames from '../_util/classNames';
 import type { PropType, ExtractPropTypes, CSSProperties } from 'vue';
-import { inject, defineComponent, ref, watch, onMounted, onBeforeUnmount, provide } from 'vue';
+import {
+  inject,
+  defineComponent,
+  shallowRef,
+  watch,
+  onMounted,
+  onBeforeUnmount,
+  provide,
+} from 'vue';
 import PropTypes from '../_util/vue-types';
 import { tuple } from '../_util/type';
 import initDefaultProps from '../_util/props-util/initDefaultProps';
@@ -72,10 +80,10 @@ export default defineComponent({
   setup(props, { emit, attrs, slots }) {
     const { prefixCls } = useConfigInject('layout-sider', props);
     const siderHook = inject(SiderHookProviderKey, undefined);
-    const collapsed = ref(
+    const collapsed = shallowRef(
       !!(props.collapsed !== undefined ? props.collapsed : props.defaultCollapsed),
     );
-    const below = ref(false);
+    const below = shallowRef(false);
 
     watch(
       () => props.collapsed,
@@ -95,7 +103,7 @@ export default defineComponent({
     };
 
     // ========================= Responsive =========================
-    const responsiveHandlerRef = ref<(mql: MediaQueryListEvent | MediaQueryList) => void>(
+    const responsiveHandlerRef = shallowRef<(mql: MediaQueryListEvent | MediaQueryList) => void>(
       (mql: MediaQueryListEvent | MediaQueryList) => {
         below.value = mql.matches;
         emit('breakpoint', mql.matches);

components/mentions/index.tsx

@@ -1,5 +1,5 @@
 import type { App, PropType, ExtractPropTypes } from 'vue';
-import { computed, watch, ref, defineComponent } from 'vue';
+import { computed, watch, shallowRef, defineComponent } from 'vue';
 import classNames from '../_util/classNames';
 import PropTypes from '../_util/vue-types';
 import VcMentions, { Option } from '../vc-mentions';
@@ -115,9 +115,9 @@ const Mentions = defineComponent({
     }
     const { prefixCls, renderEmpty, direction } = useConfigInject('mentions', props);
     const [wrapSSR, hashId] = useStyle(prefixCls);
-    const focused = ref(false);
+    const focused = shallowRef(false);
-    const vcMentions = ref(null);
+    const vcMentions = shallowRef(null);
-    const value = ref(props.value ?? props.defaultValue ?? '');
+    const value = shallowRef(props.value ?? props.defaultValue ?? '');
     const formItemContext = useInjectFormItemContext();
     const formItemInputContext = FormItemInputContext.useInject();
     const mergedStatus = computed(() => getMergedStatus(formItemInputContext.status, props.status));

components/menu/src/Menu.tsx

@@ -117,7 +117,7 @@ export default defineComponent({
       return props.inlineCollapsed;
     });
     const { itemsNodes } = useItems(props);
-    const isMounted = ref(false);
+    const isMounted = shallowRef(false);
     onMounted(() => {
       isMounted.value = true;
     });
@@ -267,7 +267,7 @@ export default defineComponent({
     const disabled = computed(() => !!props.disabled);
     const isRtl = computed(() => direction.value === 'rtl');
     const mergedMode = ref<MenuMode>('vertical');
-    const mergedInlineCollapsed = ref(false);
+    const mergedInlineCollapsed = shallowRef(false);
 
     watchEffect(() => {
       if ((props.mode === 'inline' || props.mode === 'vertical') && inlineCollapsed.value) {
@@ -293,7 +293,7 @@ export default defineComponent({
     // >>>>> Cache & Reset open keys when inlineCollapsed changed
     const inlineCacheOpenKeys = ref(mergedOpenKeys.value);
 
-    const mountRef = ref(false);
+    const mountRef = shallowRef(false);
 
     // Cache
     watch(
@@ -426,13 +426,13 @@ export default defineComponent({
       siderCollapsed,
       defaultMotions: computed(() => (isMounted.value ? defaultMotions.value : null)),
       motion: computed(() => (isMounted.value ? props.motion : null)),
-      overflowDisabled: ref(undefined),
+      overflowDisabled: shallowRef(undefined),
       onOpenChange: onInternalOpenChange,
       onItemClick: onInternalClick,
       registerMenuInfo,
       unRegisterMenuInfo,
       selectedSubMenuKeys,
-      isRootMenu: ref(true),
+      isRootMenu: shallowRef(true),
       expandIcon,
       forceSubMenuRender: computed(() => props.forceSubMenuRender),
       rootClassName: hashId,

components/menu/src/MenuItem.tsx

@@ -1,7 +1,14 @@
 import { flattenChildren, getPropsSlot, isValidElement } from '../../_util/props-util';
 import PropTypes from '../../_util/vue-types';
 import type { ExtractPropTypes, PropType } from 'vue';
-import { computed, defineComponent, getCurrentInstance, onBeforeUnmount, ref, watch } from 'vue';
+import {
+  computed,
+  defineComponent,
+  getCurrentInstance,
+  onBeforeUnmount,
+  shallowRef,
+  watch,
+} from 'vue';
 import { useInjectKeyPath, useMeasure } from './hooks/useKeyPath';
 import { useInjectFirstLevel, useInjectMenu } from './hooks/useMenuContext';
 import { cloneElement } from '../../_util/vnode';
@@ -64,7 +71,7 @@ export default defineComponent({
       unRegisterMenuInfo,
     } = useInjectMenu();
     const firstLevel = useInjectFirstLevel();
-    const isActive = ref(false);
+    const isActive = shallowRef(false);
     const keysPath = computed(() => {
       return [...parentKeys.value, key];
     });

components/menu/src/PopupTrigger.tsx

@@ -1,6 +1,6 @@
 import Trigger from '../../vc-trigger';
 import type { PropType } from 'vue';
-import { computed, defineComponent, onBeforeUnmount, ref, watch } from 'vue';
+import { computed, defineComponent, onBeforeUnmount, shallowRef, watch } from 'vue';
 import type { MenuMode } from './interface';
 import { useInjectForceRender, useInjectMenu } from './hooks/useMenuContext';
 import { placements, placementsRtl } from './placements';
@@ -31,7 +31,7 @@ export default defineComponent({
   slots: ['popup'],
   emits: ['visibleChange'],
   setup(props, { slots, emit }) {
-    const innerVisible = ref(false);
+    const innerVisible = shallowRef(false);
     const {
       getPopupContainer,
       rtl,
@@ -54,7 +54,7 @@ export default defineComponent({
 
     const popupPlacement = computed(() => popupPlacementMap[props.mode]);
 
-    const visibleRef = ref<number>();
+    const visibleRef = shallowRef<number>();
     watch(
       () => props.visible,
       visible => {

components/menu/src/SubMenu.tsx

@@ -1,6 +1,13 @@
 import PropTypes from '../../_util/vue-types';
 import type { PropType, ExtractPropTypes } from 'vue';
-import { computed, defineComponent, getCurrentInstance, ref, watch, onBeforeUnmount } from 'vue';
+import {
+  computed,
+  defineComponent,
+  getCurrentInstance,
+  shallowRef,
+  watch,
+  onBeforeUnmount,
+} from 'vue';
 import useProvideKeyPath, { useInjectKeyPath, useMeasure } from './hooks/useKeyPath';
 import {
   useInjectMenu,
@@ -67,7 +74,7 @@ export default defineComponent({
       (isValid(vnodeKey) ? `sub_menu_${++indexGuid}_$$_${vnodeKey}` : (key as string));
     const { parentEventKeys, parentInfo, parentKeys } = useInjectKeyPath();
     const keysPath = computed(() => [...parentKeys.value, key]);
-    const childrenEventKeys = ref([]);
+    const childrenEventKeys = shallowRef([]);
     const menuInfo = {
       eventKey,
       key,
@@ -119,8 +126,8 @@ export default defineComponent({
 
     const subMenuPrefixCls = computed(() => `${prefixCls.value}-submenu`);
     const mergedDisabled = computed(() => contextDisabled.value || props.disabled);
-    const elementRef = ref();
+    const elementRef = shallowRef();
-    const popupRef = ref();
+    const popupRef = shallowRef();
 
     // // ================================ Icon ================================
     // const mergedItemIcon = itemIcon || contextItemIcon;
@@ -135,7 +142,7 @@ export default defineComponent({
       return selectedSubMenuKeys.value.includes(key);
     });
 
-    const isActive = ref(false);
+    const isActive = shallowRef(false);
     watch(
       activeKeys,
       () => {

components/menu/src/hooks/useItems.tsx

@@ -115,7 +115,7 @@ function convertItemsToNodes(
  */
 export default function useItems(props: MenuProps) {
   const itemsNodes = shallowRef([]);
-  const hasItmes = ref(false);
+  const hasItmes = shallowRef(false);
   const store = shallowRef<Map<string, StoreMenuInfo>>(new Map());
   watch(
     () => props.items,

components/page-header/index.tsx

@@ -1,5 +1,5 @@
 import type { ExtractPropTypes, PropType } from 'vue';
-import { defineComponent, ref, computed } from 'vue';
+import { defineComponent, shallowRef, computed } from 'vue';
 import PropTypes from '../_util/vue-types';
 import { filterEmpty, flattenChildren, isEmptyContent } from '../_util/props-util';
 import ArrowLeftOutlined from '@ant-design/icons-vue/ArrowLeftOutlined';
@@ -49,7 +49,7 @@ const PageHeader = defineComponent({
     // style
     const [wrapSSR, hashId] = useStyle(prefixCls);
 
-    const compact = ref(false);
+    const compact = shallowRef(false);
     const isDestroyed = useDestroyed();
     const onResize = ({ width }: { width: number }) => {
       if (!isDestroyed.value) {

components/qrcode/QRCodeCanvas.tsx

@@ -1,5 +1,5 @@
 import type { CSSProperties } from 'vue';
-import { defineComponent, ref, watch, computed, watchEffect } from 'vue';
+import { defineComponent, shallowRef, watch, computed, watchEffect } from 'vue';
 import type { ImageSettings } from './interface';
 import { qrProps } from './interface';
 
@@ -146,9 +146,9 @@ export const QRCodeCanvas = defineComponent({
   props: { ...qrProps(), level: String, bgColor: String, fgColor: String, marginSize: Number },
   setup(props, { attrs, expose }) {
     const imgSrc = computed(() => props.imageSettings?.src);
-    const _canvas = ref<HTMLCanvasElement>(null);
+    const _canvas = shallowRef<HTMLCanvasElement>(null);
-    const _image = ref<HTMLImageElement>(null);
+    const _image = shallowRef<HTMLImageElement>(null);
-    const isImgLoaded = ref(false);
+    const isImgLoaded = shallowRef(false);
     expose({
       toDataURL: (type?: string, quality?: any) => {
         return _canvas.value?.toDataURL(type, quality);

components/segmented/src/segmented.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed } from 'vue';
+import { defineComponent, shallowRef, computed } from 'vue';
 import type { ExtractPropTypes, FunctionalComponent } from 'vue';
 import classNames from '../../_util/classNames';
 import useConfigInject from '../../config-provider/hooks/useConfigInject';
@@ -119,8 +119,8 @@ export default defineComponent({
   setup(props, { emit, slots, attrs }) {
     const { prefixCls, direction, size } = useConfigInject('segmented', props);
     const [wrapSSR, hashId] = useStyle(prefixCls);
-    const rootRef = ref<HTMLDivElement>();
+    const rootRef = shallowRef<HTMLDivElement>();
-    const thumbShow = ref(false);
+    const thumbShow = shallowRef(false);
 
     const segmentedOptions = computed(() => normalizeOptions(props.options));
     const handleChange = (_event: ChangeEvent, val: SegmentedValue) => {

components/table/hooks/useFilter/FilterDropdown.tsx

@@ -16,7 +16,7 @@ import type {
 import FilterDropdownMenuWrapper from './FilterWrapper';
 import type { FilterState } from '.';
 import { flattenKeys } from '.';
-import { computed, defineComponent, onBeforeUnmount, ref, shallowRef, watch } from 'vue';
+import { computed, defineComponent, onBeforeUnmount, shallowRef, watch } from 'vue';
 import classNames from '../../../_util/classNames';
 import useConfigInject from '../../../config-provider/hooks/useConfigInject';
 import { useInjectSlots } from '../../context';
@@ -160,7 +160,7 @@ export default defineComponent<FilterDropdownProps<any>>({
         );
       });
     }
-    const visible = ref(false);
+    const visible = shallowRef(false);
     const filtered = computed(
       () =>
         !!(
@@ -227,7 +227,7 @@ export default defineComponent<FilterDropdownProps<any>>({
     // const onExpandChange = keys => (expandKeys.value = keys);
     const openKeys = shallowRef([]);
 
-    const openRef = ref();
+    const openRef = shallowRef();
 
     const onOpenChange = (keys: string[]) => {
       openRef.value = setTimeout(() => {
@@ -242,7 +242,7 @@ export default defineComponent<FilterDropdownProps<any>>({
       clearTimeout(openRef.value);
     });
 
-    const searchValue = ref('');
+    const searchValue = shallowRef('');
     const onSearch: EventHandler = e => {
       const { value } = e.target;
       searchValue.value = value;

components/tabs/src/TabNavList/index.tsx

@@ -19,7 +19,7 @@ import AddButton from './AddButton';
 import type { Key } from '../../../_util/type';
 import { objectType, functionType } from '../../../_util/type';
 import type { ExtractPropTypes, PropType, CSSProperties } from 'vue';
-import { onBeforeUnmount, defineComponent, ref, watch, watchEffect, computed } from 'vue';
+import { shallowRef, onBeforeUnmount, defineComponent, watch, watchEffect, computed } from 'vue';
 import PropTypes from '../../../_util/vue-types';
 import useSyncState from '../hooks/useSyncState';
 import useState from '../../../_util/hooks/useState';
@@ -73,10 +73,10 @@ export default defineComponent({
   emits: ['tabClick', 'tabScroll'],
   setup(props, { attrs, slots }) {
     const { tabs, prefixCls } = useInjectTabs();
-    const tabsWrapperRef = ref<HTMLDivElement>();
+    const tabsWrapperRef = shallowRef<HTMLDivElement>();
-    const tabListRef = ref<HTMLDivElement>();
+    const tabListRef = shallowRef<HTMLDivElement>();
-    const operationsRef = ref<{ $el: HTMLDivElement }>();
+    const operationsRef = shallowRef<{ $el: HTMLDivElement }>();
-    const innerAddButtonRef = ref();
+    const innerAddButtonRef = shallowRef();
     const [setRef, btnRefs] = useRefs();
     const tabPositionTopOrBottom = computed(
       () => props.tabPosition === 'top' || props.tabPosition === 'bottom',
@@ -105,8 +105,8 @@ export default defineComponent({
     // ========================== Util =========================
     const operationsHiddenClassName = computed(() => `${prefixCls.value}-nav-operations-hidden`);
 
-    const transformMin = ref(0);
+    const transformMin = shallowRef(0);
-    const transformMax = ref(0);
+    const transformMax = shallowRef(0);
 
     watchEffect(() => {
       if (!tabPositionTopOrBottom.value) {
@@ -132,7 +132,7 @@ export default defineComponent({
     };
 
     // ========================= Mobile ========================
-    const touchMovingRef = ref<any>();
+    const touchMovingRef = shallowRef<any>();
     const [lockAnimation, setLockAnimation] = useState<number>();
 
     const doLockAnimation = () => {
@@ -226,8 +226,8 @@ export default defineComponent({
       }
     };
 
-    const visibleStart = ref(0);
+    const visibleStart = shallowRef(0);
-    const visibleEnd = ref(0);
+    const visibleEnd = shallowRef(0);
 
     watchEffect(() => {
       let unit: 'width' | 'height';
@@ -332,7 +332,7 @@ export default defineComponent({
     const activeTabOffset = computed(() => tabOffsets.value.get(props.activeKey));
 
     // Delay set ink style to avoid remove tab blink
-    const inkBarRafRef = ref<number>();
+    const inkBarRafRef = shallowRef<number>();
     const cleanInkBarRaf = () => {
       raf.cancel(inkBarRafRef.value);
     };

components/tabs/src/hooks/useRaf.ts

@@ -1,10 +1,10 @@
 import type { Ref } from 'vue';
-import { ref, onBeforeUnmount } from 'vue';
+import { shallowRef, onBeforeUnmount } from 'vue';
 import raf from '../../../_util/raf';
 
 export default function useRaf<Callback extends Function>(callback: Callback) {
-  const rafRef = ref<number>();
+  const rafRef = shallowRef<number>();
-  const removedRef = ref(false);
+  const removedRef = shallowRef(false);
 
   function trigger(...args: any[]) {
     if (!removedRef.value) {
@@ -28,8 +28,8 @@ type Callback<T> = (ori: T) => T;
 export function useRafState<T>(
   defaultState: T | (() => T),
 ): [Ref<T>, (updater: Callback<T>) => void] {
-  const batchRef = ref<Callback<T>[]>([]);
+  const batchRef = shallowRef<Callback<T>[]>([]);
-  const state: Ref<T> = ref(
+  const state: Ref<T> = shallowRef(
     typeof defaultState === 'function' ? (defaultState as any)() : defaultState,
   );
 

components/tag/index.tsx

@@ -1,5 +1,5 @@
 import type { HTMLAttributes, App, PropType, ExtractPropTypes, Plugin, CSSProperties } from 'vue';
-import { ref, defineComponent, watchEffect, computed } from 'vue';
+import { shallowRef, defineComponent, watchEffect, computed } from 'vue';
 import classNames from '../_util/classNames';
 import PropTypes from '../_util/vue-types';
 import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
@@ -45,7 +45,7 @@ const Tag = defineComponent({
 
     const [wrapSSR, hashId] = useStyle(prefixCls);
 
-    const visible = ref(true);
+    const visible = shallowRef(true);
 
     // Warning for deprecated usage
     if (process.env.NODE_ENV !== 'production') {

components/upload/UploadList/ListItem.tsx

@@ -1,4 +1,4 @@
-import { computed, defineComponent, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { computed, defineComponent, onBeforeUnmount, onMounted, shallowRef, watch } from 'vue';
 import type { ExtractPropTypes, CSSProperties } from 'vue';
 import EyeOutlined from '@ant-design/icons-vue/EyeOutlined';
 import DeleteOutlined from '@ant-design/icons-vue/DeleteOutlined';
@@ -59,8 +59,8 @@ export default defineComponent({
   inheritAttrs: false,
   props: listItemProps(),
   setup(props, { slots, attrs }) {
-    const showProgress = ref(false);
+    const showProgress = shallowRef(false);
-    const progressRafRef = ref();
+    const progressRafRef = shallowRef();
     onMounted(() => {
       progressRafRef.value = setTimeout(() => {
         showProgress.value = true;
@@ -69,7 +69,7 @@ export default defineComponent({
     onBeforeUnmount(() => {
       clearTimeout(progressRafRef.value);
     });
-    const mergedStatus = ref(props.file?.status);
+    const mergedStatus = shallowRef(props.file?.status);
     watch(
       () => props.file?.status,
       status => {
@@ -277,7 +277,7 @@ export default defineComponent({
         );
 
       return (
-        <div class={listContainerNameClass} style={style as CSSProperties} ref={ref}>
+        <div class={listContainerNameClass} style={style as CSSProperties}>
           {itemRender
             ? itemRender({
                 originNode: item,

components/upload/UploadList/index.tsx

@@ -9,7 +9,14 @@ import type { ButtonProps } from '../../button';
 import Button from '../../button';
 import ListItem from './ListItem';
 import type { HTMLAttributes } from 'vue';
-import { computed, defineComponent, getCurrentInstance, onMounted, ref, watchEffect } from 'vue';
+import {
+  computed,
+  defineComponent,
+  getCurrentInstance,
+  onMounted,
+  shallowRef,
+  watchEffect,
+} from 'vue';
 import { filterEmpty, initDefaultProps, isValidElement } from '../../_util/props-util';
 import type { VueNode } from '../../_util/type';
 import useConfigInject from '../../config-provider/hooks/useConfigInject';
@@ -38,7 +45,7 @@ export default defineComponent({
     appendActionVisible: true,
   }),
   setup(props, { slots, expose }) {
-    const motionAppear = ref(false);
+    const motionAppear = shallowRef(false);
     const instance = getCurrentInstance();
     onMounted(() => {
       motionAppear.value == true;

components/vc-cascader/hooks/useSearchConfig.ts

@@ -1,11 +1,11 @@
 import type { BaseCascaderProps, ShowSearchType } from '../Cascader';
 import type { Ref } from 'vue';
-import { ref, watchEffect } from 'vue';
+import { ref, shallowRef, watchEffect } from 'vue';
 import { warning } from '../../vc-util/warning';
 
 // Convert `showSearch` to unique config
 export default function useSearchConfig(showSearch?: Ref<BaseCascaderProps['showSearch']>) {
-  const mergedShowSearch = ref(false);
+  const mergedShowSearch = shallowRef(false);
   const mergedSearchConfig = ref<ShowSearchType>({});
   watchEffect(() => {
     if (!showSearch.value) {

components/vc-dialog/Dialog.tsx

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import { defineComponent, onBeforeUnmount, ref, watch, watchEffect } from 'vue';
+import { defineComponent, onBeforeUnmount, shallowRef, watch, watchEffect } from 'vue';
 import contains from '../vc-util/Dom/contains';
 import type ScrollLocker from '../vc-util/Dom/scrollLocker';
 import classNames from '../_util/classNames';
@@ -37,11 +37,11 @@ export default defineComponent({
     },
   ),
   setup(props, { attrs, slots }) {
-    const lastOutSideActiveElementRef = ref<HTMLElement>();
+    const lastOutSideActiveElementRef = shallowRef<HTMLElement>();
-    const wrapperRef = ref<HTMLDivElement>();
+    const wrapperRef = shallowRef<HTMLDivElement>();
-    const contentRef = ref<ContentRef>();
+    const contentRef = shallowRef<ContentRef>();
-    const animatedVisible = ref(props.visible);
+    const animatedVisible = shallowRef(props.visible);
-    const ariaIdRef = ref<string>(`vcDialogTitle${getUUID()}`);
+    const ariaIdRef = shallowRef<string>(`vcDialogTitle${getUUID()}`);
 
     // ========================= Events =========================
     const onDialogVisibleChanged = (newVisible: boolean) => {
@@ -76,8 +76,8 @@ export default defineComponent({
     };
 
     // >>> Content
-    const contentClickRef = ref(false);
+    const contentClickRef = shallowRef(false);
-    const contentTimeoutRef = ref<any>();
+    const contentTimeoutRef = shallowRef<any>();
 
     // We need record content click incase content popup out of dialog
     const onContentMouseDown: MouseEventHandler = () => {

components/vc-drawer/src/DrawerChild.tsx

@@ -1,4 +1,12 @@
-import { Transition, defineComponent, onMounted, onUnmounted, nextTick, watch, ref } from 'vue';
+import {
+  Transition,
+  defineComponent,
+  onMounted,
+  onUnmounted,
+  nextTick,
+  watch,
+  shallowRef,
+} from 'vue';
 import classnames from '../../_util/classNames';
 import KeyCode from '../../_util/KeyCode';
 import omit from '../../_util/omit';
@@ -17,11 +25,11 @@ const DrawerChild = defineComponent({
   props: drawerChildProps(),
   emits: ['close', 'handleClick', 'change'],
   setup(props, { emit, slots }) {
-    const contentWrapper = ref<HTMLElement>();
+    const contentWrapper = shallowRef<HTMLElement>();
-    const dom = ref<HTMLElement>();
+    const dom = shallowRef<HTMLElement>();
-    const maskDom = ref<HTMLElement>();
+    const maskDom = shallowRef<HTMLElement>();
-    const handlerDom = ref<HTMLElement>();
+    const handlerDom = shallowRef<HTMLElement>();
-    const contentDom = ref<HTMLElement>();
+    const contentDom = shallowRef<HTMLElement>();
     let levelDom = [];
     const drawerId = `drawer_id_${Number(
       (Date.now() + Math.random())
@@ -151,7 +159,7 @@ const DrawerChild = defineComponent({
       emit('handleClick', e);
     };
 
-    const canOpen = ref(false);
+    const canOpen = shallowRef(false);
     watch(dom, () => {
       nextTick(() => {
         canOpen.value = true;

components/vc-image/src/Preview.tsx

@@ -4,7 +4,7 @@ import {
   onMounted,
   onUnmounted,
   reactive,
-  ref,
+  shallowRef,
   watch,
   cloneVNode,
 } from 'vue';
@@ -62,15 +62,15 @@ const Preview = defineComponent({
   setup(props, { emit, attrs }) {
     const { rotateLeft, rotateRight, zoomIn, zoomOut, close, left, right } = reactive(props.icons);
 
-    const scale = ref(1);
+    const scale = shallowRef(1);
-    const rotate = ref(0);
+    const rotate = shallowRef(0);
     const [position, setPosition] = useFrameSetState<{
       x: number;
       y: number;
     }>(initialPosition);
 
     const onClose = () => emit('close');
-    const imgRef = ref<HTMLImageElement>();
+    const imgRef = shallowRef<HTMLImageElement>();
     const originPositionRef = reactive<{
       originX: number;
       originY: number;
@@ -82,7 +82,7 @@ const Preview = defineComponent({
       deltaX: 0,
       deltaY: 0,
     });
-    const isMoving = ref(false);
+    const isMoving = shallowRef(false);
     const groupContext = context.inject();
     const { previewUrls, current, isPreviewGroup, setCurrent } = groupContext;
     const previewGroupCount = computed(() => previewUrls.value.size);
@@ -94,7 +94,7 @@ const Preview = defineComponent({
     const showLeftOrRightSwitches = computed(
       () => isPreviewGroup.value && previewGroupCount.value > 1,
     );
-    const lastWheelZoomDirection = ref({ wheelDirection: 0 });
+    const lastWheelZoomDirection = shallowRef({ wheelDirection: 0 });
 
     const onAfterClose = () => {
       scale.value = 1;

components/vc-image/src/PreviewGroup.tsx

@@ -1,5 +1,15 @@
 import type { PropType, Ref, ComputedRef } from 'vue';
-import { ref, provide, defineComponent, inject, watch, reactive, computed, watchEffect } from 'vue';
+import {
+  ref,
+  shallowRef,
+  provide,
+  defineComponent,
+  inject,
+  watch,
+  reactive,
+  computed,
+  watchEffect,
+} from 'vue';
 import { type ImagePreviewType, mergeDefaultValue } from './Image';
 import Preview from './Preview';
 import type { PreviewProps } from './Preview';
@@ -43,7 +53,7 @@ export const context = {
   },
   inject: () => {
     return inject<GroupConsumerValue>(previewGroupContext, {
-      isPreviewGroup: ref(false),
+      isPreviewGroup: shallowRef(false),
       previewUrls: computed(() => new Map()),
       setPreviewUrls: () => {},
       current: ref(null),
@@ -161,7 +171,7 @@ const Group = defineComponent({
     );
 
     context.provide({
-      isPreviewGroup: ref(true),
+      isPreviewGroup: shallowRef(true),
       previewUrls: canPreviewUrls,
       setPreviewUrls,
       current,

components/vc-input/Input.tsx

@@ -5,7 +5,7 @@ import {
   defineComponent,
   getCurrentInstance,
   nextTick,
-  ref,
+  shallowRef,
   watch,
   withDirectives,
 } from 'vue';
@@ -30,9 +30,9 @@ export default defineComponent({
   inheritAttrs: false,
   props: inputProps(),
   setup(props, { slots, attrs, expose, emit }) {
-    const stateValue = ref(props.value === undefined ? props.defaultValue : props.value);
+    const stateValue = shallowRef(props.value === undefined ? props.defaultValue : props.value);
-    const focused = ref(false);
+    const focused = shallowRef(false);
-    const inputRef = ref<HTMLInputElement>();
+    const inputRef = shallowRef<HTMLInputElement>();
     watch(
       () => props.value,
       () => {

components/vc-mentions/src/DropdownMenu.tsx

@@ -1,6 +1,6 @@
 import Menu, { Item as MenuItem } from '../../menu';
 import type { PropType } from 'vue';
-import { onBeforeUnmount, defineComponent, inject, ref } from 'vue';
+import { onBeforeUnmount, defineComponent, inject, shallowRef } from 'vue';
 import type { OptionProps } from './Option';
 import MentionsContextKey from './MentionsContext';
 import Spin from '../../spin';
@@ -25,8 +25,8 @@ export default defineComponent({
       onFocus = noop,
       loading,
     } = inject(MentionsContextKey, {
-      activeIndex: ref(),
+      activeIndex: shallowRef(),
-      loading: ref(false),
+      loading: shallowRef(false),
     });
     let timeoutId: any;
     const onMousedown = (e: MouseEvent) => {

components/vc-overflow/Overflow.tsx

@@ -1,5 +1,5 @@
 import type { CSSProperties, ExtractPropTypes, HTMLAttributes, PropType } from 'vue';
-import { computed, defineComponent, ref, watch } from 'vue';
+import { computed, defineComponent, shallowRef, watch } from 'vue';
 import ResizeObserver from '../vc-resize-observer';
 import classNames from '../_util/classNames';
 import type { MouseEventHandler } from '../_util/EventInterface';
@@ -51,14 +51,14 @@ const Overflow = defineComponent<OverflowProps>({
   setup(props, { attrs, emit, slots }) {
     const fullySSR = computed(() => props.ssr === 'full');
 
-    const containerWidth = ref<number>(null);
+    const containerWidth = shallowRef<number>(null);
     const mergedContainerWidth = computed(() => containerWidth.value || 0);
-    const itemWidths = ref<Map<Key, number>>(new Map<Key, number>());
+    const itemWidths = shallowRef<Map<Key, number>>(new Map<Key, number>());
-    const prevRestWidth = ref(0);
+    const prevRestWidth = shallowRef(0);
-    const restWidth = ref(0);
+    const restWidth = shallowRef(0);
-    const suffixWidth = ref(0);
+    const suffixWidth = shallowRef(0);
-    const suffixFixedStart = ref<number>(null);
+    const suffixFixedStart = shallowRef<number>(null);
-    const displayCount = ref<number>(null);
+    const displayCount = shallowRef<number>(null);
 
     const mergedDisplayCount = computed(() => {
       if (displayCount.value === null && fullySSR.value) {
@@ -68,7 +68,7 @@ const Overflow = defineComponent<OverflowProps>({
       return displayCount.value || 0;
     });
 
-    const restReady = ref(false);
+    const restReady = shallowRef(false);
 
     const itemPrefixCls = computed(() => `${props.prefixCls}-item`);
 

components/vc-picker/hooks/usePickerInput.ts

@@ -1,5 +1,5 @@
 import type { ComputedRef, HTMLAttributes, Ref } from 'vue';
-import { onBeforeUnmount, onMounted, watch, ref, computed } from 'vue';
+import { onBeforeUnmount, onMounted, watch, shallowRef, computed } from 'vue';
 import type { FocusEventHandler } from '../../_util/EventInterface';
 import KeyCode from '../../_util/KeyCode';
 import { addGlobalMousedownEvent, getTargetFromEvent } from '../utils/uiUtil';
@@ -30,18 +30,18 @@ export default function usePickerInput({
   onFocus?: FocusEventHandler;
   onBlur?: FocusEventHandler;
 }): [ComputedRef<HTMLAttributes>, { focused: Ref<boolean>; typing: Ref<boolean> }] {
-  const typing = ref(false);
+  const typing = shallowRef(false);
-  const focused = ref(false);
+  const focused = shallowRef(false);
 
   /**
    * We will prevent blur to handle open event when user click outside,
    * since this will repeat trigger `onOpenChange` event.
    */
-  const preventBlurRef = ref<boolean>(false);
+  const preventBlurRef = shallowRef<boolean>(false);
 
-  const valueChangedRef = ref<boolean>(false);
+  const valueChangedRef = shallowRef<boolean>(false);
 
-  const preventDefaultRef = ref<boolean>(false);
+  const preventDefaultRef = shallowRef<boolean>(false);
 
   const inputProps = computed<HTMLAttributes>(() => ({
     onMousedown: () => {
@@ -146,7 +146,7 @@ export default function usePickerInput({
   watch(value, () => {
     valueChangedRef.value = true;
   });
-  const globalMousedownEvent = ref();
+  const globalMousedownEvent = shallowRef();
   // Global click handler
   onMounted(() => {
     globalMousedownEvent.value = addGlobalMousedownEvent((e: MouseEvent) => {

components/vc-select/BaseSelect.tsx

@@ -23,7 +23,7 @@ import {
   onBeforeUnmount,
   onMounted,
   provide,
-  ref,
+  shallowRef,
   toRefs,
   watch,
   watchEffect,
@@ -269,17 +269,17 @@ export default defineComponent({
         ? props.showSearch
         : multiple.value || props.mode === 'combobox',
     );
-    const mobile = ref(false);
+    const mobile = shallowRef(false);
     onMounted(() => {
       mobile.value = isMobile();
     });
     const legacyTreeSelectContext = useInjectLegacySelectContext();
     // ============================== Refs ==============================
-    const containerRef = ref<HTMLDivElement>(null);
+    const containerRef = shallowRef<HTMLDivElement>(null);
     const selectorDomRef = createRef();
-    const triggerRef = ref<RefTriggerProps>(null);
+    const triggerRef = shallowRef<RefTriggerProps>(null);
-    const selectorRef = ref<RefSelectorProps>(null);
+    const selectorRef = shallowRef<RefSelectorProps>(null);
-    const listRef = ref<RefOptionListProps>(null);
+    const listRef = shallowRef<RefOptionListProps>(null);
 
     /** Used for component focused management */
     const [mockFocused, setMockFocused, cancelSetMockFocused] = useDelayReset();
@@ -308,8 +308,8 @@ export default defineComponent({
 
     // ============================== Open ==============================
     const initOpen = props.open !== undefined ? props.open : props.defaultOpen;
-    const innerOpen = ref(initOpen);
+    const innerOpen = shallowRef(initOpen);
-    const mergedOpen = ref(initOpen);
+    const mergedOpen = shallowRef(initOpen);
     const setInnerOpen = (val: boolean) => {
       innerOpen.value = props.open !== undefined ? props.open : val;
       mergedOpen.value = innerOpen.value;
@@ -504,7 +504,7 @@ export default defineComponent({
 
     // ========================== Focus / Blur ==========================
     /** Record real focus status */
-    const focusRef = ref(false);
+    const focusRef = shallowRef(false);
 
     const onContainerFocus: FocusEventHandler = (...args) => {
       setMockFocused(true);
@@ -592,7 +592,7 @@ export default defineComponent({
     };
 
     // ============================= Dropdown ==============================
-    const containerWidth = ref<number>(null);
+    const containerWidth = shallowRef<number>(null);
     const instance = getCurrentInstance();
     const onPopupMouseEnter = () => {
       // We need force update here since popup dom is render async

components/vc-select/Selector/MultipleSelector.tsx

@@ -2,7 +2,7 @@ import TransBtn from '../TransBtn';
 import type { InnerSelectorProps } from './interface';
 import Input from './Input';
 import type { Ref, PropType } from 'vue';
-import { computed, defineComponent, onMounted, ref, watch } from 'vue';
+import { computed, defineComponent, onMounted, shallowRef, watch } from 'vue';
 import classNames from '../../_util/classNames';
 import pickAttrs from '../../_util/pickAttrs';
 import PropTypes from '../../_util/vue-types';
@@ -77,9 +77,9 @@ const SelectSelector = defineComponent<SelectorProps>({
   inheritAttrs: false,
   props: props as any,
   setup(props) {
-    const measureRef = ref();
+    const measureRef = shallowRef();
-    const inputWidth = ref(0);
+    const inputWidth = shallowRef(0);
-    const focused = ref(false);
+    const focused = shallowRef(false);
     const legacyTreeSelectContext = useInjectLegacySelectContext();
     const selectionPrefixCls = computed(() => `${props.prefixCls}-selection`);
 

components/vc-select/Selector/SingleSelector.tsx

@@ -1,7 +1,7 @@
 import pickAttrs from '../../_util/pickAttrs';
 import Input from './Input';
 import type { InnerSelectorProps } from './interface';
-import { Fragment, computed, defineComponent, ref, watch } from 'vue';
+import { Fragment, computed, defineComponent, shallowRef, watch } from 'vue';
 import PropTypes from '../../_util/vue-types';
 import type { VueNode } from '../../_util/type';
 import useInjectLegacySelectContext from '../../vc-tree-select/LegacyContext';
@@ -40,7 +40,7 @@ const props = {
 const SingleSelector = defineComponent<SelectorProps>({
   name: 'SingleSelector',
   setup(props) {
-    const inputChanged = ref(false);
+    const inputChanged = shallowRef(false);
 
     const combobox = computed(() => props.mode === 'combobox');
     const inputEditable = computed(() => combobox.value || props.showSearch);

components/vc-select/hooks/useDelayReset.ts

@@ -1,5 +1,5 @@
 import type { Ref } from 'vue';
-import { onMounted, ref } from 'vue';
+import { onMounted, shallowRef } from 'vue';
 
 /**
  * Similar with `useLock`, but this hook will always execute last value.
@@ -8,7 +8,7 @@ import { onMounted, ref } from 'vue';
 export default function useDelayReset(
   timeout = 10,
 ): [Ref<Boolean>, (val: boolean, callback?: () => void) => void, () => void] {
-  const bool = ref(false);
+  const bool = shallowRef(false);
   let delay: any;
 
   const cancelLatest = () => {

components/vc-slider/src/Handle.tsx

@@ -1,5 +1,5 @@
 import type { CSSProperties, PropType } from 'vue';
-import { computed, defineComponent, ref, onMounted, onBeforeUnmount } from 'vue';
+import { computed, defineComponent, shallowRef, onMounted, onBeforeUnmount } from 'vue';
 import classNames from '../../_util/classNames';
 import PropTypes from '../../_util/vue-types';
 import addEventListener from '../../vc-util/Dom/addEventListener';
@@ -26,8 +26,8 @@ export default defineComponent({
     onMousedown: { type: Function as PropType<(payload: MouseEvent) => void> },
   },
   setup(props, { attrs, emit, expose }) {
-    const clickFocused = ref(false);
+    const clickFocused = shallowRef(false);
-    const handle = ref();
+    const handle = shallowRef();
     const handleMouseUp = () => {
       if (document.activeElement === handle.value) {
         clickFocused.value = true;

components/vc-table/Body/BodyRow.tsx

@@ -2,7 +2,7 @@ import Cell from '../Cell';
 import { getColumnsKey } from '../utils/valueUtil';
 import type { CustomizeComponent, GetComponentProps, Key, GetRowKey } from '../interface';
 import ExpandedRow from './ExpandedRow';
-import { computed, defineComponent, ref, watchEffect } from 'vue';
+import { computed, defineComponent, shallowRef, watchEffect } from 'vue';
 import { useInjectTable } from '../context/TableContext';
 import { useInjectBody } from '../context/BodyContext';
 import classNames from '../../_util/classNames';
@@ -45,7 +45,7 @@ export default defineComponent<BodyRowProps<unknown>>({
   setup(props, { attrs }) {
     const tableContext = useInjectTable();
     const bodyContext = useInjectBody();
-    const expandRended = ref(false);
+    const expandRended = shallowRef(false);
 
     const expanded = computed(() => props.expandedKeys && props.expandedKeys.has(props.recordKey));
 

components/vc-table/Body/index.tsx

@@ -5,7 +5,7 @@ import { getColumnsKey } from '../utils/valueUtil';
 import MeasureCell from './MeasureCell';
 import BodyRow from './BodyRow';
 import useFlattenRecords from '../hooks/useFlattenRecords';
-import { defineComponent, ref, toRef } from 'vue';
+import { defineComponent, shallowRef, toRef } from 'vue';
 import { useInjectResize } from '../context/ResizeContext';
 import { useInjectTable } from '../context/TableContext';
 import { useInjectBody } from '../context/BodyContext';
@@ -44,8 +44,8 @@ export default defineComponent<BodyProps<any>>({
       toRef(props, 'expandedKeys'),
       toRef(props, 'getRowKey'),
     );
-    const startRow = ref(-1);
+    const startRow = shallowRef(-1);
-    const endRow = ref(-1);
+    const endRow = shallowRef(-1);
     let timeoutId: any;
     useProvideHover({
       startRow,

components/vc-table/Header/DragHandle.tsx

@@ -1,7 +1,14 @@
 import addEventListenerWrap from '../../vc-util/Dom/addEventListener';
 import type { EventHandler } from '../../_util/EventInterface';
 import raf from '../../_util/raf';
-import { defineComponent, onUnmounted, computed, ref, watchEffect, getCurrentInstance } from 'vue';
+import {
+  defineComponent,
+  onUnmounted,
+  computed,
+  shallowRef,
+  watchEffect,
+  getCurrentInstance,
+} from 'vue';
 import type { PropType } from 'vue';
 import devWarning from '../../vc-util/devWarning';
 import type { ColumnType } from '../interface';
@@ -73,7 +80,7 @@ export default defineComponent({
     });
     const instance = getCurrentInstance();
     let baseWidth = 0;
-    const dragging = ref(false);
+    const dragging = shallowRef(false);
     let rafId: number;
     const updateWidth = (e: HandleEvent) => {
       let pageX = 0;

components/vc-table/context/HoverContext.tsx

@@ -1,5 +1,5 @@
 import type { InjectionKey, Ref } from 'vue';
-import { ref, inject, provide } from 'vue';
+import { shallowRef, inject, provide } from 'vue';
 
 export interface HoverContextProps {
   startRow: Ref<number>;
@@ -14,8 +14,8 @@ export const useProvideHover = (props: HoverContextProps) => {
 
 export const useInjectHover = () => {
   return inject(HoverContextKey, {
-    startRow: ref(-1),
+    startRow: shallowRef(-1),
-    endRow: ref(-1),
+    endRow: shallowRef(-1),
     onHover() {},
   } as HoverContextProps);
 };

components/vc-table/context/StickyContext.tsx

@@ -1,7 +1,7 @@
 import isStyleSupport from '../../_util/styleChecker';
-import { onMounted, ref } from 'vue';
+import { onMounted, shallowRef } from 'vue';
 
-const supportSticky = ref(false);
+const supportSticky = shallowRef(false);
 export const useProvideSticky = () => {
   onMounted(() => {
     supportSticky.value = supportSticky.value || isStyleSupport('position', 'sticky');

components/vc-table/stickyScrollBar.tsx

@@ -7,6 +7,7 @@ import {
   onBeforeUnmount,
   onMounted,
   ref,
+  shallowRef,
   watch,
 } from 'vue';
 import addEventListenerWrap from '../vc-util/Dom/addEventListener';
@@ -35,9 +36,9 @@ export default defineComponent<StickyScrollBarProps>({
   emits: ['scroll'],
   setup(props, { emit, expose }) {
     const tableContext = useInjectTable();
-    const bodyScrollWidth = ref(0);
+    const bodyScrollWidth = shallowRef(0);
-    const bodyWidth = ref(0);
+    const bodyWidth = shallowRef(0);
-    const scrollBarWidth = ref(0);
+    const scrollBarWidth = shallowRef(0);
     watchEffect(
       () => {
         bodyScrollWidth.value = props.scrollBodySizeInfo.scrollWidth || 0;
@@ -48,7 +49,7 @@ export default defineComponent<StickyScrollBarProps>({
       { flush: 'post' },
     );
 
-    const scrollBarRef = ref();
+    const scrollBarRef = shallowRef();
 
     const [scrollState, setScrollState] = useLayoutState({
       scrollLeft: 0,
@@ -60,7 +61,7 @@ export default defineComponent<StickyScrollBarProps>({
       x: 0,
     });
 
-    const isActive = ref(false);
+    const isActive = shallowRef(false);
 
     const onMouseUp: MouseEventHandler = () => {
       isActive.value = false;

components/vc-tooltip/src/Tooltip.tsx

@@ -4,7 +4,7 @@ import { placements } from './placements';
 import Content from './Content';
 import { getPropsSlot } from '../../_util/props-util';
 import type { CSSProperties, PropType } from 'vue';
-import { defineComponent, ref, watchEffect } from 'vue';
+import { defineComponent, shallowRef, watchEffect } from 'vue';
 function noop() {}
 export default defineComponent({
   compatConfig: { MODE: 3 },
@@ -39,7 +39,7 @@ export default defineComponent({
   },
   slots: ['arrowContent', 'overlay'],
   setup(props, { slots, attrs, expose }) {
-    const triggerDOM = ref();
+    const triggerDOM = shallowRef();
 
     const getPopupElement = () => {
       const { prefixCls, tipId, overlayInnerStyle } = props;
@@ -67,8 +67,8 @@ export default defineComponent({
       forcePopupAlign: () => triggerDOM.value?.forcePopupAlign(),
     });
 
-    const destroyTooltip = ref(false);
+    const destroyTooltip = shallowRef(false);
-    const autoDestroy = ref(false);
+    const autoDestroy = shallowRef(false);
     watchEffect(() => {
       const { destroyTooltipOnHide } = props;
       if (typeof destroyTooltipOnHide === 'boolean') {

components/vc-tree/MotionTreeNode.tsx

@@ -8,7 +8,7 @@ import {
   defineComponent,
   onBeforeUnmount,
   onMounted,
-  ref,
+  shallowRef,
   Transition,
   watch,
 } from 'vue';
@@ -31,9 +31,9 @@ export default defineComponent({
   },
   slots: ['title', 'icon', 'switcherIcon', 'checkable'],
   setup(props, { attrs, slots }) {
-    const visible = ref(true);
+    const visible = shallowRef(true);
     const context = useInjectTreeContext();
-    const motionedRef = ref(false);
+    const motionedRef = shallowRef(false);
     const transitionProps = computed(() => {
       if (props.motion) {
         return props.motion;
@@ -113,7 +113,6 @@ export default defineComponent({
       return (
         <TreeNode
           v-slots={slots}
-          domRef={ref}
           class={attrs.class}
           style={attrs.style}
           {...otherProps}

components/vc-tree/Tree.tsx

@@ -28,7 +28,6 @@ import {
   defineComponent,
   onUnmounted,
   reactive,
-  ref,
   shallowRef,
   watch,
   watchEffect,
@@ -78,9 +77,9 @@ export default defineComponent({
   }),
 
   setup(props, { attrs, slots, expose }) {
-    const destroyed = ref(false);
+    const destroyed = shallowRef(false);
     let delayedDragEnterLogic: Record<Key, number> = {};
-    const indent = ref();
+    const indent = shallowRef();
     const selectedKeys = shallowRef<Key[]>([]);
     const checkedKeys = shallowRef<Key[]>([]);
     const halfCheckedKeys = shallowRef<Key[]>([]);
@@ -122,14 +121,14 @@ export default defineComponent({
     );
     const keyEntities = shallowRef({});
 
-    const focused = ref(false);
+    const focused = shallowRef(false);
-    const activeKey = ref<Key>(null);
+    const activeKey = shallowRef<Key>(null);
 
-    const listChanging = ref(false);
+    const listChanging = shallowRef(false);
 
     const fieldNames = computed(() => fillFieldNames(props.fieldNames));
 
-    const listRef = ref();
+    const listRef = shallowRef();
 
     let dragStartMousePosition = null;
 

components/vc-tree/TreeNode.tsx

@@ -9,7 +9,7 @@ import {
   onMounted,
   onUpdated,
   reactive,
-  ref,
+  shallowRef,
 } from 'vue';
 import { treeNodeProps } from './props';
 import classNames from '../_util/classNames';
@@ -38,7 +38,7 @@ export default defineComponent({
       )}instead`,
     );
 
-    const dragNodeHighlight = ref(false);
+    const dragNodeHighlight = shallowRef(false);
     const context = useInjectTreeContext();
     const {
       expandedKeysSet,
@@ -74,7 +74,7 @@ export default defineComponent({
     const dragOverGapBottom = eagerComputed(() => mergedTreeNodeProps.value.dragOverGapBottom);
     const pos = eagerComputed(() => mergedTreeNodeProps.value.pos);
 
-    const selectHandle = ref();
+    const selectHandle = shallowRef();
 
     const hasChildren = computed(() => {
       const { eventKey } = props;

components/vc-trigger/Popup/PopupInner.tsx

@@ -2,7 +2,15 @@ import type { AlignType } from '../interface';
 import useVisibleStatus from './useVisibleStatus';
 import useStretchStyle from './useStretchStyle';
 import type { CSSProperties } from 'vue';
-import { computed, defineComponent, ref, toRef, Transition, watch, withModifiers } from 'vue';
+import {
+  computed,
+  defineComponent,
+  shallowRef,
+  toRef,
+  Transition,
+  watch,
+  withModifiers,
+} from 'vue';
 import type { RefAlign } from '../../vc-align/Align';
 import Align from '../../vc-align/Align';
 import { getMotion } from '../utils/motionUtil';
@@ -20,9 +28,9 @@ export default defineComponent({
   props: innerProps,
   emits: ['mouseenter', 'mouseleave', 'mousedown', 'touchstart', 'align'],
   setup(props, { expose, attrs, slots }) {
-    const alignRef = ref<RefAlign>();
+    const alignRef = shallowRef<RefAlign>();
-    const elementRef = ref<HTMLDivElement>();
+    const elementRef = shallowRef<HTMLDivElement>();
-    const alignedClassName = ref<string>();
+    const alignedClassName = shallowRef<string>();
     // ======================= Measure ========================
     const [stretchStyle, measureStretchStyle] = useStretchStyle(toRef(props, 'stretch'));
 
@@ -31,7 +39,7 @@ export default defineComponent({
         measureStretchStyle(props.getRootDomNode());
       }
     };
-    const visible = ref(false);
+    const visible = shallowRef(false);
     let timeoutId: any;
     watch(
       () => props.visible,
@@ -52,7 +60,7 @@ export default defineComponent({
     const [status, goNextStatus] = useVisibleStatus(visible, doMeasure);
 
     // ======================== Aligns ========================
-    const prepareResolveRef = ref<(value?: unknown) => void>();
+    const prepareResolveRef = shallowRef<(value?: unknown) => void>();
 
     // `target` on `rc-align` can accept as a function to get the bind element or a point.
     // ref: https://www.npmjs.com/package/rc-align

components/vc-trigger/Popup/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watch } from 'vue';
+import { defineComponent, shallowRef, watch } from 'vue';
 import { popupProps } from './interface';
 import Mask from './Mask';
 import MobilePopupInner from './MobilePopupInner';
@@ -10,9 +10,9 @@ export default defineComponent({
   inheritAttrs: false,
   props: popupProps,
   setup(props, { attrs, slots, expose }) {
-    const innerVisible = ref(false);
+    const innerVisible = shallowRef(false);
-    const inMobile = ref(false);
+    const inMobile = shallowRef(false);
-    const popupRef = ref();
+    const popupRef = shallowRef();
     watch(
       [() => props.visible, () => props.mobile],
       () => {

components/vc-trigger/Popup/useStretchStyle.ts

@@ -1,11 +1,11 @@
 import type { ComputedRef, CSSProperties, Ref } from 'vue';
-import { computed, ref } from 'vue';
+import { computed, shallowRef } from 'vue';
 import type { StretchType } from '../interface';
 
 export default (
   stretch?: Ref<StretchType>,
 ): [ComputedRef<CSSProperties>, (element: HTMLElement) => void] => {
-  const targetSize = ref({ width: 0, height: 0 });
+  const targetSize = shallowRef({ width: 0, height: 0 });
 
   function measureStretch(element: HTMLElement) {
     targetSize.value = {

components/vc-trigger/Popup/useVisibleStatus.ts

@@ -1,5 +1,5 @@
 import type { Ref } from 'vue';
-import { onBeforeUnmount, ref, watch, onMounted } from 'vue';
+import { onBeforeUnmount, shallowRef, watch, onMounted } from 'vue';
 import raf from '../../_util/raf';
 
 /**
@@ -22,9 +22,9 @@ export default (
   visible: Ref<boolean>,
   doMeasure: Func,
 ): [Ref<PopupStatus>, (callback?: () => void) => void] => {
-  const status = ref<PopupStatus>(null);
+  const status = shallowRef<PopupStatus>(null);
-  const rafRef = ref<number>();
+  const rafRef = shallowRef<number>();
-  const destroyRef = ref(false);
+  const destroyRef = shallowRef(false);
   function setStatus(nextStatus: PopupStatus) {
     if (!destroyRef.value) {
       status.value = nextStatus;

components/vc-trigger/Trigger.tsx

@@ -1,5 +1,5 @@
 import type { CSSProperties, HTMLAttributes, PropType } from 'vue';
-import { computed, defineComponent, inject, provide, ref } from 'vue';
+import { computed, defineComponent, inject, provide, shallowRef } from 'vue';
 import PropTypes from '../_util/vue-types';
 import contains from '../vc-util/Dom/contains';
 import raf from '../_util/raf';
@@ -98,7 +98,7 @@ export default defineComponent({
       return popupAlign;
     });
     const { setPortal, popPortal } = useInjectTrigger(props.tryPopPortal);
-    const popupRef = ref(null);
+    const popupRef = shallowRef(null);
     const setPopupRef = val => {
       popupRef.value = val;
     };
@@ -111,7 +111,7 @@ export default defineComponent({
       ),
       popupRef,
       setPopupRef,
-      triggerRef: ref(null),
+      triggerRef: shallowRef(null),
       align,
       focusTime: null,
       clickOutsideHandler: null,

components/vc-virtual-list/List.tsx

@@ -4,7 +4,6 @@ import {
   toRaw,
   onMounted,
   onUpdated,
-  ref,
   defineComponent,
   watchEffect,
   computed,
@@ -140,9 +139,9 @@ const List = defineComponent({
       },
       { immediate: true },
     );
-    const componentRef = ref<HTMLDivElement>();
+    const componentRef = shallowRef<HTMLDivElement>();
-    const fillerInnerRef = ref<HTMLDivElement>();
+    const fillerInnerRef = shallowRef<HTMLDivElement>();
-    const scrollBarRef = ref<any>(); // Hack on scrollbar to enable flash call
+    const scrollBarRef = shallowRef<any>(); // Hack on scrollbar to enable flash call
     // =============================== Item Key ===============================
     const getKey = (item: Record<string, any>) => {
       return itemKey.value(item);
@@ -189,7 +188,7 @@ const List = defineComponent({
       offset: undefined,
     });
 
-    const offsetHeight = ref(0);
+    const offsetHeight = shallowRef(0);
     onMounted(() => {
       nextTick(() => {
         offsetHeight.value = fillerInnerRef.value?.offsetHeight || 0;