perf: use shallowRef

Author: tangjinzhou

components/table/hooks/useFilter/FilterDropdown.tsx

@@ -15,7 +15,7 @@ import type {
 } from '../../interface';
 import FilterDropdownMenuWrapper from './FilterWrapper';
 import type { FilterState } from '.';
-import { computed, defineComponent, onBeforeUnmount, ref, watch } from 'vue';
+import { computed, defineComponent, onBeforeUnmount, ref, shallowRef, watch } from 'vue';
 import classNames from '../../../_util/classNames';
 import useConfigInject from '../../../_util/hooks/useConfigInject';
 import { useInjectSlots } from '../../context';
@@ -162,7 +162,7 @@ export default defineComponent<FilterDropdownProps<any>>({
 
     const propFilteredKeys = computed(() => props.filterState?.filteredKeys);
 
-    const filteredKeys = ref([]);
+    const filteredKeys = shallowRef([]);
 
     const onSelectKeys = ({ selectedKeys }: { selectedKeys?: Key[] }) => {
       filteredKeys.value = selectedKeys;
@@ -176,7 +176,7 @@ export default defineComponent<FilterDropdownProps<any>>({
       { immediate: true },
     );
 
-    const openKeys = ref([]);
+    const openKeys = shallowRef([]);
 
     const openRef = ref();
 

components/table/hooks/useLazyKVMap.ts

@@ -1,5 +1,5 @@
 import type { Ref } from 'vue';
-import { watch, ref } from 'vue';
+import { watch, shallowRef } from 'vue';
 import type { Key, GetRowKey } from '../interface';
 
 interface MapCache<RecordType> {
@@ -11,7 +11,7 @@ export default function useLazyKVMap<RecordType>(
   childrenColumnNameRef: Ref<string>,
   getRowKeyRef: Ref<GetRowKey<RecordType>>,
 ) {
-  const mapCacheRef = ref<MapCache<RecordType>>({});
+  const mapCacheRef = shallowRef<MapCache<RecordType>>({});
 
   watch(
     [dataRef, childrenColumnNameRef, getRowKeyRef],

components/table/hooks/useSelection.tsx

@@ -10,7 +10,7 @@ import devWarning from '../../vc-util/devWarning';
 import useMergedState from '../../_util/hooks/useMergedState';
 import useState from '../../_util/hooks/useState';
 import type { Ref } from 'vue';
-import { computed, ref, watchEffect } from 'vue';
+import { computed, shallowRef, watchEffect } from 'vue';
 import type { CheckboxProps } from '../../checkbox';
 import Checkbox from '../../checkbox';
 import Dropdown from '../../dropdown';
@@ -80,7 +80,7 @@ export default function useSelection<RecordType>(
   configRef: UseSelectionConfig<RecordType>,
 ): [TransformColumns<RecordType>, Ref<Set<Key>>] {
   // ======================== Caches ========================
-  const preserveRecordsRef = ref(new Map<Key, RecordType>());
+  const preserveRecordsRef = shallowRef(new Map<Key, RecordType>());
   const mergedRowSelection = computed(() => {
     const temp = rowSelectionRef.value || {};
     const { checkStrictly = true } = temp;

components/vc-select/generate.tsx

@@ -45,6 +45,7 @@ import {
   onMounted,
   provide,
   ref,
+  shallowRef,
   watch,
   watchEffect,
 } from 'vue';
@@ -519,7 +520,7 @@ export default function generateSelector<
       };
 
       // We need cache options here in case user update the option list
-      const prevValueOptions = ref([]);
+      const prevValueOptions = shallowRef([]);
       const setPrevValueOptions = (val: any[]) => {
         prevValueOptions.value = val;
       };

components/vc-table/Table.tsx

@@ -39,6 +39,7 @@ import {
   onMounted,
   reactive,
   ref,
+  shallowRef,
   toRef,
   toRefs,
   watch,
@@ -250,7 +251,7 @@ export default defineComponent<TableProps<DefaultRecordType>>({
       return false;
     });
 
-    const innerExpandedKeys = ref([]);
+    const innerExpandedKeys = shallowRef([]);
     const stop = watchEffect(() => {
       if (props.defaultExpandedRowKeys) {
         innerExpandedKeys.value = props.defaultExpandedRowKeys;

components/vc-tree-select/OptionList.tsx

@@ -2,7 +2,7 @@ import type { DataNode, TreeDataNode, Key } from './interface';
 import { useInjectTreeSelectContext } from './Context';
 import type { RefOptionListProps } from '../vc-select/OptionList';
 import type { ScrollTo } from '../vc-virtual-list/List';
-import { computed, defineComponent, nextTick, ref, watch } from 'vue';
+import { computed, defineComponent, nextTick, ref, shallowRef, watch } from 'vue';
 import { optionListProps } from './props';
 import useMemo from '../_util/hooks/useMemo';
 import type { EventDataNode } from '../tree';
@@ -88,8 +88,8 @@ export default defineComponent({
     };
 
     // =========================== Keys ===========================
-    const expandedKeys = ref<Key[]>(context.value.treeDefaultExpandedKeys);
-    const searchExpandedKeys = ref<Key[]>(null);
+    const expandedKeys = shallowRef<Key[]>(context.value.treeDefaultExpandedKeys);
+    const searchExpandedKeys = shallowRef<Key[]>(null);
 
     watch(
       () => props.searchValue,

components/vc-tree-select/generate.tsx

@@ -33,7 +33,7 @@ import type { TreeSelectProps } from './props';
 import { treeSelectProps } from './props';
 import { getLabeledValue } from '../vc-select/utils/valueUtil';
 import omit from '../_util/omit';
-import { computed, defineComponent, ref, toRef, watch, watchEffect } from 'vue';
+import { computed, defineComponent, ref, shallowRef, toRef, watch, watchEffect } from 'vue';
 import { convertDataToEntities } from '../vc-tree/utils/treeUtil';
 import { conductCheck } from '../vc-tree/utils/conductUtil';
 import { warning } from '../vc-util/warning';
@@ -202,8 +202,8 @@ export default function generate(config: {
         return { missingRawValues, existRawValues };
       };
 
-      const rawValues = ref<RawValueType[]>([]);
-      const rawHalfCheckedKeys = ref<RawValueType[]>([]);
+      const rawValues = shallowRef<RawValueType[]>([]);
+      const rawHalfCheckedKeys = shallowRef<RawValueType[]>([]);
 
       watchEffect(() => {
         const valueHalfCheckedKeys: RawValueType[] = [];

components/vc-tree-select/hooks/useKeyValueMap.ts

@@ -1,14 +1,14 @@
 import type { ComputedRef, Ref } from 'vue';
-import { ref, watchEffect } from 'vue';
+import { shallowRef, watchEffect } from 'vue';
 import type { FlattenDataNode, Key, RawValueType } from '../interface';
 
 /**
  * Return cached Key Value map with DataNode.
  * Only re-calculate when `flattenOptions` changed.
  */
 export default function useKeyValueMap(flattenOptions: ComputedRef<FlattenDataNode[]>) {
-  const cacheKeyMap: Ref<Map<Key, FlattenDataNode>> = ref(new Map());
-  const cacheValueMap: Ref<Map<RawValueType, FlattenDataNode>> = ref(new Map());
+  const cacheKeyMap: Ref<Map<Key, FlattenDataNode>> = shallowRef(new Map());
+  const cacheValueMap: Ref<Map<RawValueType, FlattenDataNode>> = shallowRef(new Map());
 
   watchEffect(() => {
     const newCacheKeyMap = new Map();

components/vc-tree-select/hooks/useSelectValues.ts

@@ -6,7 +6,7 @@ import { formatStrategyKeys } from '../utils/strategyUtil';
 import type { DefaultValueType } from '../../vc-select/interface/generator';
 import type { DataEntity } from '../../vc-tree/interface';
 import type { Ref } from 'vue';
-import { ref, watchEffect } from 'vue';
+import { shallowRef, watchEffect } from 'vue';
 
 interface Config {
   treeConduction: Ref<boolean>;
@@ -36,7 +36,7 @@ export default function useSelectValues(
     getLabelProp,
   }: Config,
 ): Ref<LabelValueType[]> {
-  const rawValueLabeled = ref([]);
+  const rawValueLabeled = shallowRef([]);
   watchEffect(() => {
     let mergedRawValues = rawValues.value;
 

components/vc-tree/MotionTreeNode.tsx

@@ -11,6 +11,7 @@ import {
   onBeforeUnmount,
   onMounted,
   ref,
+  shallowRef,
   Transition,
   watch,
 } from 'vue';
@@ -36,7 +37,7 @@ export default defineComponent({
     const context = useInjectTreeContext();
     const motionedRef = ref(false);
     const transitionClass = ref('');
-    const transitionStyle = ref({});
+    const transitionStyle = shallowRef({});
     const transitionProps = computed(() => {
       if (props.motion) {
         return props.motion;

components/vc-tree/NodeList.tsx

@@ -2,7 +2,7 @@
  * Handle virtual list of the TreeNodes.
  */
 
-import { computed, defineComponent, ref, watch } from 'vue';
+import { computed, defineComponent, ref, shallowRef, watch } from 'vue';
 import VirtualList from '../vc-virtual-list';
 import type { FlattenNode, DataEntity, DataNode, ScrollTo } from './interface';
 import MotionTreeNode from './MotionTreeNode';
@@ -102,8 +102,8 @@ export default defineComponent({
       getIndentWidth: () => indentMeasurerRef.value.offsetWidth,
     });
     // ============================== Motion ==============================
-    const transitionData = ref<FlattenNode[]>(props.data);
-    const transitionRange = ref([]);
+    const transitionData = shallowRef<FlattenNode[]>(props.data);
+    const transitionRange = shallowRef([]);
     const motionType = ref<'show' | 'hide' | null>(null);
 
     function onMotionEnd() {

components/vc-tree/Tree.tsx

@@ -23,7 +23,16 @@ import {
 import NodeList, { MOTION_KEY, MotionEntity } from './NodeList';
 import { conductCheck } from './utils/conductUtil';
 import DropIndicator from './DropIndicator';
-import { computed, defineComponent, onMounted, onUnmounted, reactive, ref, watchEffect } from 'vue';
+import {
+  computed,
+  defineComponent,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref,
+  shallowRef,
+  watchEffect,
+} from 'vue';
 import initDefaultProps from '../_util/props-util/initDefaultProps';
 import type { CheckInfo } from './props';
 import { treeProps } from './props';
@@ -59,12 +68,12 @@ export default defineComponent({
     const destroyed = ref(false);
     let delayedDragEnterLogic: Record<Key, number> = {};
     const indent = ref();
-    const selectedKeys = ref([]);
-    const checkedKeys = ref([]);
-    const halfCheckedKeys = ref([]);
-    const loadedKeys = ref([]);
-    const loadingKeys = ref([]);
-    const expandedKeys = ref([]);
+    const selectedKeys = shallowRef([]);
+    const checkedKeys = shallowRef([]);
+    const halfCheckedKeys = shallowRef([]);
+    const loadedKeys = shallowRef([]);
+    const loadingKeys = shallowRef([]);
+    const expandedKeys = shallowRef([]);
 
     const dragState = reactive({
       dragging: false,
@@ -87,7 +96,7 @@ export default defineComponent({
     const treeData = computed(() => {
       return props.treeData !== undefined ? props.treeData : convertTreeToData(props.children);
     });
-    const keyEntities = ref({});
+    const keyEntities = shallowRef({});
 
     const focused = ref(false);
     const activeKey = ref<Key>(null);