Merge pull request #1113 from Ryqsky/develop

fix(ConfigProvider): 修复 config-provider 同时存在 provide 和 setup#provide 导致卡顿的性能问题
Tencent · Jul 2, 2022 · 7356ff5 · 7356ff5
2 parents 89a7ced + 4e5dc23
commit 7356ff5
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 16 deletions.
diff --git a/src/config-provider/config-provider.tsx b/src/config-provider/config-provider.tsx
@@ -1,8 +1,7 @@
 import Vue, { PropType, VNode } from 'vue';
 import cloneDeep from 'lodash/cloneDeep';
-import { provide, computed } from '@vue/composition-api';
 import { GlobalConfigProvider } from './type';
-import { configProviderInjectKey, defaultGlobalConfig, mergeWith } from './context';
+import { defaultGlobalConfig, mergeWith } from './context';
 
 const ConfigProvider = Vue.extend({
   name: 'TConfigProvider',
@@ -29,14 +28,6 @@ const ConfigProvider = Vue.extend({
     },
   },
 
-  setup(props) {
-    const defaultData = cloneDeep(defaultGlobalConfig);
-    provide(
-      configProviderInjectKey,
-      computed(() => mergeWith(defaultData, props.globalConfig)),
-    );
-  },
-
   render(): VNode {
     if (this.$slots.default.length === 1) {
       return this.$slots.default[0];

diff --git a/src/config-provider/context.ts b/src/config-provider/context.ts
@@ -1,4 +1,3 @@
-import { InjectionKey, ComputedRef } from '@vue/composition-api';
 import merge from 'lodash/merge';
 import _mergeWith from 'lodash/mergeWith';
 import defaultConfig from '../_common/js/global-config/default-config';
@@ -18,8 +17,6 @@ export type Locale = typeof defaultZhCN;
 // 导出全局配置（包括语言配置）全部类型
 export * from './type';
 
-export const configProviderInjectKey: InjectionKey<ComputedRef<GlobalConfigProvider>> = Symbol('configProvide');
-
 // deal with https://github.com/lodash/lodash/issues/1313
 export const mergeWith = (defaultGlobalConfig: GlobalConfigProvider, injectConfig: GlobalConfigProvider) => _mergeWith(defaultGlobalConfig, injectConfig, (objValue, srcValue) => {
   if (Array.isArray(objValue)) {

diff --git a/src/config-provider/useConfig.tsx b/src/config-provider/useConfig.tsx
@@ -1,5 +1,5 @@
 import { computed, inject, h } from '@vue/composition-api';
-import { GlobalConfigProvider, defaultGlobalConfig, configProviderInjectKey } from './context';
+import { GlobalConfigProvider, defaultGlobalConfig } from './context';
 
 /**
  * component global config
@@ -8,8 +8,8 @@ import { GlobalConfigProvider, defaultGlobalConfig, configProviderInjectKey } fr
  * useConfig('pagination')
  */
 export function useConfig<T extends keyof GlobalConfigProvider>(componentName?: T) {
-  const injectGlobalConfig = inject(configProviderInjectKey, null);
-  const mergedGlobalConfig = computed(() => injectGlobalConfig?.value || defaultGlobalConfig);
+  const injectGlobalConfig = inject<GlobalConfigProvider>('globalConfig', null);
+  const mergedGlobalConfig = computed(() => injectGlobalConfig || defaultGlobalConfig);
   const global = computed(() => mergedGlobalConfig.value[componentName]);
 
   const classPrefix = computed(() => mergedGlobalConfig.value.classPrefix);