revert: useBreakpoint

Author: tangjinzhou

components/_util/eagerComputed.ts

@@ -0,0 +1,16 @@
+import { watchEffect, shallowRef } from 'vue';
+import type { ComputedRef } from 'vue';
+export declare type ComputedGetter<T> = (...args: any[]) => T;
+export default function eagerComputed<T>(fn: ComputedGetter<T>) {
+  const result = shallowRef<T>();
+  watchEffect(
+    () => {
+      result.value = fn();
+    },
+    {
+      flush: 'sync', // needed so updates are immediate.
+    },
+  );
+
+  return result as any as ComputedRef<T>;
+}

components/_util/hooks/useBreakpoint.ts

@@ -1,18 +1,14 @@
 import type { Ref } from 'vue';
-import { getCurrentInstance, onMounted, onUnmounted, ref } from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue';
 import type { ScreenMap } from '../../_util/responsiveObserve';
 import ResponsiveObserve from '../../_util/responsiveObserve';
 
-function useBreakpoint(refreshOnChange = ref(true)): Ref<ScreenMap> {
+function useBreakpoint(): Ref<ScreenMap> {
   const screens = ref<ScreenMap>({});
   let token = null;
-  const instance = getCurrentInstance();
   onMounted(() => {
     token = ResponsiveObserve.subscribe(supportScreens => {
       screens.value = supportScreens;
-      if (refreshOnChange?.value) {
-        instance.update();
-      }
     });
   });
 

components/avatar/Avatar.tsx

@@ -10,6 +10,7 @@ import { responsiveArray } from '../_util/responsiveObserve';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import ResizeObserver from '../vc-resize-observer';
 import { useInjectSize } from '../_util/hooks/useSize';
+import eagerComputed from '../_util/eagerComputed';
 
 export type AvatarSize = 'large' | 'small' | 'default' | number | ScreenSizeMap;
 
@@ -54,13 +55,8 @@ const Avatar = defineComponent({
     const size = computed(() => {
       return props.size === 'default' ? groupSize.value : props.size;
     });
-    const needResponsive = computed(() =>
-      Object.keys(typeof size.value === 'object' ? size.value || {} : {}).some(key =>
-        ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].includes(key),
-      ),
-    );
-    const screens = useBreakpoint(needResponsive);
-    const responsiveSize = computed(() => {
+    const screens = useBreakpoint();
+    const responsiveSize = eagerComputed(() => {
       if (typeof props.size !== 'object') {
         return undefined;
       }

components/grid/index.ts

@@ -1,11 +1,7 @@
 import Row from './Row';
 import Col from './Col';
-import useInternalBreakpoint from '../_util/hooks/useBreakpoint';
+import useBreakpoint from '../_util/hooks/useBreakpoint';
 
-// Do not export params
-function useBreakpoint() {
-  return useInternalBreakpoint();
-}
 export type { RowProps } from './Row';
 
 export type { ColProps, ColSize } from './Col';

components/list/index.tsx

@@ -17,6 +17,7 @@ import useConfigInject from '../_util/hooks/useConfigInject';
 import useBreakpoint from '../_util/hooks/useBreakpoint';
 import type { Breakpoint } from '../_util/responsiveObserve';
 import { responsiveArray } from '../_util/responsiveObserve';
+import eagerComputed from '../_util/eagerComputed';
 
 export { ListItemProps } from './Item';
 export type { ListItemMetaProps } from './ItemMeta';
@@ -43,7 +44,7 @@ export const listProps = () => ({
   bordered: PropTypes.looseBool,
   dataSource: PropTypes.array,
   extra: PropTypes.any,
-  grid: { type: Object as PropType<ListGridType>, default: undefined },
+  grid: { type: Object as PropType<ListGridType>, default: undefined as ListGridType },
   itemLayout: String as PropType<ListItemLayout>,
   loading: {
     type: [Boolean, Object] as PropType<boolean | (SpinProps & HTMLAttributes)>,
@@ -200,14 +201,9 @@ const List = defineComponent({
       return dd;
     });
 
-    const needResponsive = computed(() =>
-      Object.keys(props.grid || {}).some(key =>
-        ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].includes(key),
-      ),
-    );
-    const screens = useBreakpoint(needResponsive);
+    const screens = useBreakpoint();
 
-    const currentBreakpoint = computed(() => {
+    const currentBreakpoint = eagerComputed(() => {
       for (let i = 0; i < responsiveArray.length; i += 1) {
         const breakpoint: Breakpoint = responsiveArray[i];
         if (screens.value[breakpoint]) {