From 3a968fdd33960a788f2037d944aca4e8ee81294f Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Sun, 17 Oct 2021 21:31:34 +0800
Subject: [PATCH] perf: use shallowRef
---
.../table/hooks/useFilter/FilterDropdown.tsx | 6 ++---
components/table/hooks/useLazyKVMap.ts | 4 +--
components/table/hooks/useSelection.tsx | 4 +--
components/vc-select/generate.tsx | 3 ++-
components/vc-table/Table.tsx | 3 ++-
components/vc-tree-select/OptionList.tsx | 6 ++---
components/vc-tree-select/generate.tsx | 6 ++---
.../vc-tree-select/hooks/useKeyValueMap.ts | 6 ++---
.../vc-tree-select/hooks/useSelectValues.ts | 4 +--
components/vc-tree/MotionTreeNode.tsx | 3 ++-
components/vc-tree/NodeList.tsx | 6 ++---
components/vc-tree/Tree.tsx | 25 +++++++++++++------
12 files changed, 44 insertions(+), 32 deletions(-)
diff --git a/components/table/hooks/useFilter/FilterDropdown.tsx b/components/table/hooks/useFilter/FilterDropdown.tsx
index 536d63ea9..21e33fd1e 100644
--- a/components/table/hooks/useFilter/FilterDropdown.tsx
+++ b/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();
diff --git a/components/table/hooks/useLazyKVMap.ts b/components/table/hooks/useLazyKVMap.ts
index 039756097..88e876fd6 100644
--- a/components/table/hooks/useLazyKVMap.ts
+++ b/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],
diff --git a/components/table/hooks/useSelection.tsx b/components/table/hooks/useSelection.tsx
index f9b168db4..433e5ca37 100644
--- a/components/table/hooks/useSelection.tsx
+++ b/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;
diff --git a/components/vc-select/generate.tsx b/components/vc-select/generate.tsx
index a7c8f1b02..42fa768bd 100644
--- a/components/vc-select/generate.tsx
+++ b/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;
};
diff --git a/components/vc-table/Table.tsx b/components/vc-table/Table.tsx
index ab8b8215e..300601f26 100644
--- a/components/vc-table/Table.tsx
+++ b/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;
diff --git a/components/vc-tree-select/OptionList.tsx b/components/vc-tree-select/OptionList.tsx
index 5599754c7..1b87a60da 100644
--- a/components/vc-tree-select/OptionList.tsx
+++ b/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,
diff --git a/components/vc-tree-select/generate.tsx b/components/vc-tree-select/generate.tsx
index a5fc4bf25..9c96d84f8 100644
--- a/components/vc-tree-select/generate.tsx
+++ b/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[] = [];
diff --git a/components/vc-tree-select/hooks/useKeyValueMap.ts b/components/vc-tree-select/hooks/useKeyValueMap.ts
index 0a099f55a..c0ee006ae 100644
--- a/components/vc-tree-select/hooks/useKeyValueMap.ts
+++ b/components/vc-tree-select/hooks/useKeyValueMap.ts
@@ -1,5 +1,5 @@
import type { ComputedRef, Ref } from 'vue';
-import { ref, watchEffect } from 'vue';
+import { shallowRef, watchEffect } from 'vue';
import type { FlattenDataNode, Key, RawValueType } from '../interface';
/**
@@ -7,8 +7,8 @@ import type { FlattenDataNode, Key, RawValueType } from '../interface';
* 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();
diff --git a/components/vc-tree-select/hooks/useSelectValues.ts b/components/vc-tree-select/hooks/useSelectValues.ts
index 61992f702..a8cc663fc 100644
--- a/components/vc-tree-select/hooks/useSelectValues.ts
+++ b/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;
diff --git a/components/vc-tree/MotionTreeNode.tsx b/components/vc-tree/MotionTreeNode.tsx
index eaf175edb..d72eb541f 100644
--- a/components/vc-tree/MotionTreeNode.tsx
+++ b/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;
diff --git a/components/vc-tree/NodeList.tsx b/components/vc-tree/NodeList.tsx
index b0e75797d..391a1d296 100644
--- a/components/vc-tree/NodeList.tsx
+++ b/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() {
diff --git a/components/vc-tree/Tree.tsx b/components/vc-tree/Tree.tsx
index 56845490e..b246dea7c 100644
--- a/components/vc-tree/Tree.tsx
+++ b/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);