diff --git a/components/_util/debouncedWatch.ts b/components/_util/debouncedWatch.ts
new file mode 100644
index 000000000..c822ab5ca
--- /dev/null
+++ b/components/_util/debouncedWatch.ts
@@ -0,0 +1,89 @@
+// copy from https://github.dev/vueuse/vueuse
+
+import type { Ref, WatchOptions, WatchStopHandle } from 'vue';
+import { unref, watch } from 'vue';
+
+type MaybeRef<T> = T | Ref<T>;
+
+type Fn = () => void;
+
+export type FunctionArgs<Args extends any[] = any[], Return = void> = (...args: Args) => Return;
+
+export interface FunctionWrapperOptions<Args extends any[] = any[], This = any> {
+  fn: FunctionArgs<Args, This>;
+  args: Args;
+  thisArg: This;
+}
+
+export type EventFilter<Args extends any[] = any[], This = any> = (
+  invoke: Fn,
+  options: FunctionWrapperOptions<Args, This>,
+) => void;
+
+const bypassFilter: EventFilter = invoke => {
+  return invoke();
+};
+/**
+ * Create an EventFilter that debounce the events
+ *
+ * @param ms
+ */
+export function debounceFilter(ms: MaybeRef<number>) {
+  let timer: ReturnType<typeof setTimeout> | undefined;
+
+  const filter: EventFilter = invoke => {
+    const duration = unref(ms);
+
+    if (timer) clearTimeout(timer);
+
+    if (duration <= 0) return invoke();
+
+    timer = setTimeout(invoke, duration);
+  };
+
+  return filter;
+}
+export interface DebouncedWatchOptions<Immediate> extends WatchOptions<Immediate> {
+  debounce?: MaybeRef<number>;
+}
+
+interface ConfigurableEventFilter {
+  eventFilter?: EventFilter;
+}
+/**
+ * @internal
+ */
+function createFilterWrapper<T extends FunctionArgs>(filter: EventFilter, fn: T) {
+  function wrapper(this: any, ...args: any[]) {
+    filter(() => fn.apply(this, args), { fn, thisArg: this, args });
+  }
+
+  return wrapper as any as T;
+}
+export interface WatchWithFilterOptions<Immediate>
+  extends WatchOptions<Immediate>,
+    ConfigurableEventFilter {}
+// implementation
+export function watchWithFilter<Immediate extends Readonly<boolean> = false>(
+  source: any,
+  cb: any,
+  options: WatchWithFilterOptions<Immediate> = {},
+): WatchStopHandle {
+  const { eventFilter = bypassFilter, ...watchOptions } = options;
+
+  return watch(source, createFilterWrapper(eventFilter, cb), watchOptions);
+}
+
+// implementation
+export default function debouncedWatch<Immediate extends Readonly<boolean> = false>(
+  source: any,
+  cb: any,
+  options: DebouncedWatchOptions<Immediate> = {},
+): WatchStopHandle {
+  const { debounce = 0, ...watchOptions } = options;
+
+  return watchWithFilter(source, cb, {
+    ...watchOptions,
+    eventFilter: debounceFilter(debounce),
+  });
+}
diff --git a/components/_util/hooks/useConfigInject.ts b/components/_util/hooks/useConfigInject.ts
index e4a3ffeb1..097e90429 100644
--- a/components/_util/hooks/useConfigInject.ts
+++ b/components/_util/hooks/useConfigInject.ts
@@ -14,30 +14,40 @@ export default (
   direction: ComputedRef<Direction>;
   size: ComputedRef<SizeType>;
   getTargetContainer: ComputedRef<() => HTMLElement>;
-  getPopupContainer: ComputedRef<() => HTMLElement>;
   space: ComputedRef<{ size: SizeType | number }>;
   pageHeader: ComputedRef<{ ghost: boolean }>;
   form?: ComputedRef<{
     requiredMark?: RequiredMark;
   }>;
-  autoInsertSpaceInButton: ComputedRef<Boolean>;
+  autoInsertSpaceInButton: ComputedRef<boolean>;
   renderEmpty?: ComputedRef<(componentName?: string) => VNodeChild | JSX.Element>;
+  virtual: ComputedRef<boolean>;
+  dropdownMatchSelectWidth: ComputedRef<boolean>;
+  getPopupContainer: ComputedRef<ConfigProviderProps['getPopupContainer']>;
 } => {
   const configProvider = inject<UnwrapRef<ConfigProviderProps>>(
     'configProvider',
     defaultConfigProvider,
   );
   const prefixCls = computed(() => configProvider.getPrefixCls(name, props.prefixCls));
+  const direction = computed(() => props.direction ?? configProvider.direction);
   const rootPrefixCls = computed(() => configProvider.getPrefixCls());
-  const direction = computed(() => configProvider.direction);
   const autoInsertSpaceInButton = computed(() => configProvider.autoInsertSpaceInButton);
   const renderEmpty = computed(() => configProvider.renderEmpty);
   const space = computed(() => configProvider.space);
   const pageHeader = computed(() => configProvider.pageHeader);
   const form = computed(() => configProvider.form);
+  const getTargetContainer = computed(
+    () => props.getTargetContainer || configProvider.getTargetContainer,
+  );
+  const getPopupContainer = computed(
+    () => props.getPopupContainer || configProvider.getPopupContainer,
+  );
+  const virtual = computed(() => props.virtual ?? configProvider.virtual);
+  const dropdownMatchSelectWidth = computed<boolean>(
+    () => props.dropdownMatchSelectWidth ?? configProvider.dropdownMatchSelectWidth,
+  );
   const size = computed(() => props.size || configProvider.componentSize);
-  const getTargetContainer = computed(() => props.getTargetContainer);
-  const getPopupContainer = computed(() => props.getPopupContainer);
   return {
     configProvider,
     prefixCls,
@@ -50,6 +60,8 @@ export default (
     form,
     autoInsertSpaceInButton,
     renderEmpty,
+    virtual,
+    dropdownMatchSelectWidth,
     rootPrefixCls,
   };
 };
diff --git a/components/_util/omit.ts b/components/_util/omit.ts
new file mode 100644
index 000000000..3388fd122
--- /dev/null
+++ b/components/_util/omit.ts
@@ -0,0 +1,10 @@
+function omit<T extends object, K extends keyof T>(obj: T, fields: K[]): Omit<T, K> {
+  // eslint-disable-next-line prefer-object-spread
+  const shallowCopy = Object.assign({}, obj);
+  for (let i = 0; i < fields.length; i += 1) {
+    const key = fields[i];
+    delete shallowCopy[key];
+  }
+  return shallowCopy;
+}
+export default omit;
diff --git a/components/_util/props-util/initDefaultProps.ts b/components/_util/props-util/initDefaultProps.ts
index 8c01271ce..99bc6366a 100644
--- a/components/_util/props-util/initDefaultProps.ts
+++ b/components/_util/props-util/initDefaultProps.ts
@@ -17,7 +17,13 @@ const initDefaultProps = <T>(
   Object.keys(defaultProps).forEach(k => {
     const prop = propTypes[k] as VueTypeValidableDef;
     if (prop) {
-      prop.default = defaultProps[k];
+      if (prop.type || prop.default) {
+        prop.default = defaultProps[k];
+      } else if (prop.def) {
+        prop.def(defaultProps[k]);
+      } else {
+        propTypes[k] = { type: prop, default: defaultProps[k] };
+      }
     } else {
       throw new Error(`not have ${k} prop`);
     }
diff --git a/components/auto-complete/index.tsx b/components/auto-complete/index.tsx
index d9e43f753..071e6804a 100644
--- a/components/auto-complete/index.tsx
+++ b/components/auto-complete/index.tsx
@@ -1,6 +1,6 @@
 import type { App, Plugin, VNode, ExtractPropTypes } from 'vue';
 import { defineComponent, inject, provide } from 'vue';
-import Select, { SelectProps } from '../select';
+import Select, { selectProps } from '../select';
 import Input from '../input';
 import PropTypes from '../_util/vue-types';
 import { defaultConfigProvider } from '../config-provider';
@@ -15,7 +15,7 @@ function isSelectOptionOrSelectOptGroup(child: any): boolean {
 }
 
 const autoCompleteProps = {
-  ...SelectProps(),
+  ...selectProps(),
   dataSource: PropTypes.array,
   dropdownMenuStyle: PropTypes.style,
   optionLabelProp: PropTypes.string,
@@ -33,7 +33,7 @@ const AutoComplete = defineComponent({
   inheritAttrs: false,
   props: {
     ...autoCompleteProps,
-    prefixCls: PropTypes.string.def('ant-select'),
+    prefixCls: PropTypes.string,
     showSearch: PropTypes.looseBool,
     transitionName: PropTypes.string.def('slide-up'),
     choiceTransitionName: PropTypes.string.def('zoom'),
diff --git a/components/components.ts b/components/components.ts
index 6f2501775..93986f35e 100644
--- a/components/components.ts
+++ b/components/components.ts
@@ -169,6 +169,7 @@ export { default as Table, TableColumn, TableColumnGroup } from './table';
 export type { TransferProps } from './transfer';
 export { default as Transfer } from './transfer';
 
+export type { TreeProps, DirectoryTreeProps } from './tree';
 export { default as Tree, TreeNode, DirectoryTree } from './tree';
 
 export type { TreeSelectProps } from './tree-select';
diff --git a/components/form/Form.tsx b/components/form/Form.tsx
index 4e982fa25..d173c97cc 100755
--- a/components/form/Form.tsx
+++ b/components/form/Form.tsx
@@ -318,14 +318,16 @@ const Form = defineComponent({
       e.preventDefault();
       e.stopPropagation();
       emit('submit', e);
-      const res = validateFields();
-      res
-        .then(values => {
-          emit('finish', values);
-        })
-        .catch(errors => {
-          handleFinishFailed(errors);
-        });
+      if (props.model) {
+        const res = validateFields();
+        res
+          .then(values => {
+            emit('finish', values);
+          })
+          .catch(errors => {
+            handleFinishFailed(errors);
+          });
+      }
     };
 
     expose({
diff --git a/components/form/useForm.ts b/components/form/useForm.ts
index a8c82f65c..07e3281cb 100644
--- a/components/form/useForm.ts
+++ b/components/form/useForm.ts
@@ -107,6 +107,8 @@ function useForm(
   validateInfos: validateInfos;
   resetFields: (newValues?: Props) => void;
   validate: <T = any>(names?: namesType, option?: validateOptions) => Promise<T>;
+
+  /** This is an internal usage. Do not use in your prod */
   validateField: (
     name: string,
     value: any,
@@ -117,19 +119,33 @@ function useForm(
   clearValidate: (names?: namesType) => void;
 } {
   const initialModel = cloneDeep(unref(modelRef));
-  let validateInfos: validateInfos = {};
+  const validateInfos = reactive<validateInfos>({});
 
   const rulesKeys = computed(() => {
     return Object.keys(unref(rulesRef));
   });
 
-  rulesKeys.value.forEach(key => {
-    validateInfos[key] = {
-      autoLink: false,
-      required: isRequired(unref(rulesRef)[key]),
-    };
-  });
-  validateInfos = reactive(validateInfos);
+  watch(
+    rulesKeys,
+    () => {
+      const newValidateInfos = {};
+      rulesKeys.value.forEach(key => {
+        newValidateInfos[key] = validateInfos[key] || {
+          autoLink: false,
+          required: isRequired(unref(rulesRef)[key]),
+        };
+        delete validateInfos[key];
+      });
+      for (const key in validateInfos) {
+        if (Object.prototype.hasOwnProperty.call(validateInfos, key)) {
+          delete validateInfos[key];
+        }
+      }
+      Object.assign(validateInfos, newValidateInfos);
+    },
+    { immediate: true },
+  );
+
   const resetFields = (newValues: Props) => {
     Object.assign(unref(modelRef), {
       ...cloneDeep(initialModel),
@@ -249,6 +265,9 @@ function useForm(
       },
       !!option.validateFirst,
     );
+    if (!validateInfos[name]) {
+      return promise.catch((e: any) => e);
+    }
     validateInfos[name].validateStatus = 'validating';
     promise
       .catch((e: any) => e)
@@ -325,7 +344,9 @@ function useForm(
     validate(names, { trigger: 'change' });
     oldModel = cloneDeep(model);
   };
+
   const debounceOptions = options?.debounce;
+
   watch(
     modelRef,
     debounceOptions && debounceOptions.wait
diff --git a/components/menu/src/Menu.tsx b/components/menu/src/Menu.tsx
index 58ccd6013..407287680 100644
--- a/components/menu/src/Menu.tsx
+++ b/components/menu/src/Menu.tsx
@@ -68,7 +68,7 @@ export default defineComponent({
     'click',
     'update:activeKey',
   ],
-  slots: ['expandIcon'],
+  slots: ['expandIcon', 'overflowedIndicator'],
   setup(props, { slots, emit }) {
     const { prefixCls, direction } = useConfigInject('menu', props);
     const store = ref<Record<string, StoreMenuInfo>>({});
@@ -396,7 +396,7 @@ export default defineComponent({
                 {child}
               </MenuContextProvider>
             ));
-      const overflowedIndicator = <EllipsisOutlined />;
+      const overflowedIndicator = slots.overflowedIndicator?.() || <EllipsisOutlined />;
 
       return (
         <Overflow
diff --git a/components/pagination/MiniSelect.tsx b/components/pagination/MiniSelect.tsx
index d02c7febf..d0888827e 100644
--- a/components/pagination/MiniSelect.tsx
+++ b/components/pagination/MiniSelect.tsx
@@ -1,10 +1,10 @@
 import { defineComponent } from 'vue';
-import VcSelect, { SelectProps } from '../select';
+import VcSelect, { selectProps } from '../select';
 import { getOptionProps, getSlot } from '../_util/props-util';
 
 export default defineComponent({
   inheritAttrs: false,
-  props: SelectProps(),
+  props: selectProps(),
   Option: VcSelect.Option,
   render() {
     const selectOptionsProps = getOptionProps(this);
diff --git a/components/select/index.tsx b/components/select/index.tsx
index 17b278961..cbe760a34 100644
--- a/components/select/index.tsx
+++ b/components/select/index.tsx
@@ -1,15 +1,14 @@
-import type { VNodeChild, App, PropType, Plugin } from 'vue';
+import type { App, PropType, Plugin, ExtractPropTypes } from 'vue';
 import { computed, defineComponent, ref } from 'vue';
-import omit from 'omit.js';
 import classNames from '../_util/classNames';
-import type { SelectProps as RcSelectProps } from '../vc-select';
-import RcSelect, { Option, OptGroup, BaseProps } from '../vc-select';
+import { selectProps as vcSelectProps } from '../vc-select';
+import RcSelect, { Option, OptGroup } from '../vc-select';
 import type { OptionProps as OptionPropsType } from '../vc-select/Option';
 import getIcons from './utils/iconUtil';
 import PropTypes from '../_util/vue-types';
 import { tuple } from '../_util/type';
 import useConfigInject from '../_util/hooks/useConfigInject';
-import type { SizeType } from '../config-provider';
+import omit from '../_util/omit';
 
 type RawValue = string | number;
 
@@ -20,47 +19,21 @@ export type OptionType = typeof Option;
 export interface LabeledValue {
   key?: string;
   value: RawValue;
-  label: VNodeChild;
+  label: any;
 }
 export type SelectValue = RawValue | RawValue[] | LabeledValue | LabeledValue[] | undefined;
 
-export interface InternalSelectProps<VT> extends Omit<RcSelectProps<VT>, 'mode'> {
-  suffixIcon?: VNodeChild;
-  itemIcon?: VNodeChild;
-  size?: SizeType;
-  mode?: 'multiple' | 'tags' | 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
-  bordered?: boolean;
-}
-
-export interface SelectPropsTypes<VT>
-  extends Omit<
-    InternalSelectProps<VT>,
-    'inputIcon' | 'mode' | 'getInputElement' | 'backfill' | 'class' | 'style'
-  > {
-  mode?: 'multiple' | 'tags';
-}
-export type SelectTypes = SelectPropsTypes<SelectValue>;
-export const SelectProps = () => ({
-  ...(omit(BaseProps(), [
-    'inputIcon',
-    'mode',
-    'getInputElement',
-    'backfill',
-    'class',
-    'style',
-  ]) as Omit<
-    ReturnType<typeof BaseProps>,
-    'inputIcon' | 'mode' | 'getInputElement' | 'backfill' | 'class' | 'style'
-  >),
+export const selectProps = () => ({
+  ...omit(vcSelectProps<SelectValue>(), ['inputIcon', 'mode', 'getInputElement', 'backfill']),
   value: {
     type: [Array, Object, String, Number] as PropType<SelectValue>,
   },
   defaultValue: {
     type: [Array, Object, String, Number] as PropType<SelectValue>,
   },
-  notFoundContent: PropTypes.VNodeChild,
-  suffixIcon: PropTypes.VNodeChild,
-  itemIcon: PropTypes.VNodeChild,
+  notFoundContent: PropTypes.any,
+  suffixIcon: PropTypes.any,
+  itemIcon: PropTypes.any,
   size: PropTypes.oneOf(tuple('small', 'middle', 'large', 'default')),
   mode: PropTypes.oneOf(tuple('multiple', 'tags', 'SECRET_COMBOBOX_MODE_DO_NOT_USE')),
   bordered: PropTypes.looseBool.def(true),
@@ -68,12 +41,14 @@ export const SelectProps = () => ({
   choiceTransitionName: PropTypes.string.def(''),
 });
 
+export type SelectProps = Partial<ExtractPropTypes<ReturnType<typeof selectProps>>>;
+
 const Select = defineComponent({
   name: 'ASelect',
   Option,
   OptGroup,
   inheritAttrs: false,
-  props: SelectProps(),
+  props: selectProps(),
   SECRET_COMBOBOX_MODE_DO_NOT_USE: 'SECRET_COMBOBOX_MODE_DO_NOT_USE',
   emits: ['change', 'update:value'],
   slots: [
@@ -86,7 +61,7 @@ const Select = defineComponent({
     'option',
   ],
   setup(props, { attrs, emit, slots, expose }) {
-    const selectRef = ref(null);
+    const selectRef = ref();
 
     const focus = () => {
       if (selectRef.value) {
@@ -146,7 +121,7 @@ const Select = defineComponent({
       const isMultiple = mode.value === 'multiple' || mode.value === 'tags';
 
       // ===================== Empty =====================
-      let mergedNotFound: VNodeChild;
+      let mergedNotFound: any;
       if (notFoundContent !== undefined) {
         mergedNotFound = notFoundContent;
       } else if (slots.notFoundContent) {
diff --git a/components/style/mixins/clearfix.less b/components/style/mixins/clearfix.less
index 7999a3e92..20ed1079e 100644
--- a/components/style/mixins/clearfix.less
+++ b/components/style/mixins/clearfix.less
@@ -1,7 +1,7 @@
 // mixins for clearfix
 // ------------------------
 .clearfix() {
-  zoom: 1;
+
   &::before,
   &::after {
     display: table;
diff --git a/components/style/themes/default.less b/components/style/themes/default.less
index 93a16e985..ace3443a7 100644
--- a/components/style/themes/default.less
+++ b/components/style/themes/default.less
@@ -771,6 +771,7 @@
 
 // Tree
 // ---
+@tree-bg: @component-background;
 @tree-title-height: 24px;
 @tree-child-padding: 18px;
 @tree-directory-selected-color: #fff;
diff --git a/components/switch/__tests__/index.test.js b/components/switch/__tests__/index.test.js
index 5fb8e501c..5770a9934 100644
--- a/components/switch/__tests__/index.test.js
+++ b/components/switch/__tests__/index.test.js
@@ -70,4 +70,35 @@ describe('Switch', () => {
     });
     expect(checked.value).toBe(1);
   });
+
+  it('customize checked value and children should work', async () => {
+    resetWarned();
+    const checked = ref(1);
+    const onUpdate = val => (checked.value = val);
+    const wrapper = mount({
+      render() {
+        return (
+          <Switch
+            {...{ 'onUpdate:checked': onUpdate }}
+            checked={checked.value}
+            unCheckedValue={1}
+            checkedValue={2}
+            checkedChildren="on"
+            unCheckedChildren="off"
+          />
+        );
+      },
+    });
+    await asyncExpect(() => {
+      wrapper.find('button').trigger('click');
+    });
+    expect(checked.value).toBe(2);
+    expect(wrapper.find('.ant-switch-inner').text()).toBe('on');
+
+    await asyncExpect(() => {
+      wrapper.find('button').trigger('click');
+    });
+    expect(checked.value).toBe(1);
+    expect(wrapper.find('.ant-switch-inner').text()).toBe('off');
+  });
 });
diff --git a/components/switch/index.tsx b/components/switch/index.tsx
index 0d038946a..719ef670e 100644
--- a/components/switch/index.tsx
+++ b/components/switch/index.tsx
@@ -134,6 +134,7 @@ const Switch = defineComponent({
       [`${prefixCls.value}-disabled`]: props.disabled,
       [prefixCls.value]: true,
     }));
+
     return () => (
       <Wave insertExtraNode>
         <button
@@ -160,7 +161,7 @@ const Switch = defineComponent({
         >
           {props.loading ? <LoadingOutlined class={`${prefixCls.value}-loading-icon`} /> : null}
           <span class={`${prefixCls.value}-inner`}>
-            {checked.value
+            {checkedStatus.value
               ? getPropsSlot(slots, props, 'checkedChildren')
               : getPropsSlot(slots, props, 'unCheckedChildren')}
           </span>
diff --git a/components/tree-select/index.tsx b/components/tree-select/index.tsx
index 3c834933a..e094e6db0 100644
--- a/components/tree-select/index.tsx
+++ b/components/tree-select/index.tsx
@@ -1,21 +1,56 @@
-import type { App, Plugin } from 'vue';
-import { defineComponent, inject } from 'vue';
-import VcTreeSelect, { TreeNode, SHOW_ALL, SHOW_PARENT, SHOW_CHILD } from '../vc-tree-select';
+import type { App, ExtractPropTypes, Plugin, PropType } from 'vue';
+import { computed, ref, watchEffect } from 'vue';
+import { defineComponent } from 'vue';
+import VcTreeSelect, {
+  TreeNode,
+  SHOW_ALL,
+  SHOW_PARENT,
+  SHOW_CHILD,
+  treeSelectProps as vcTreeSelectProps,
+} from '../vc-tree-select';
 import classNames from '../_util/classNames';
-import { TreeSelectProps } from './interface';
-import warning from '../_util/warning';
-import { getOptionProps, getComponent, getSlot } from '../_util/props-util';
 import initDefaultProps from '../_util/props-util/initDefaultProps';
-import { defaultConfigProvider } from '../config-provider';
+import type { SizeType } from '../config-provider';
+import type { DefaultValueType, FieldNames } from '../vc-tree-select/interface';
+import omit from '../_util/omit';
+import PropTypes from '../_util/vue-types';
+import useConfigInject from '../_util/hooks/useConfigInject';
+import devWarning from '../vc-util/devWarning';
+import getIcons from '../select/utils/iconUtil';
+import renderSwitcherIcon from '../tree/utils/iconUtil';
+import type { AntTreeNodeProps } from '../tree/Tree';
+import { warning } from '../vc-util/warning';
+import { flattenChildren } from '../_util/props-util';
 
-export { TreeData, TreeSelectProps } from './interface';
-import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
-import CaretDownOutlined from '@ant-design/icons-vue/CaretDownOutlined';
-import DownOutlined from '@ant-design/icons-vue/DownOutlined';
-import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
-import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
-import omit from 'omit.js';
-import { convertChildrenToData } from './utils';
+const getTransitionName = (rootPrefixCls: string, motion: string, transitionName?: string) => {
+  if (transitionName !== undefined) {
+    return transitionName;
+  }
+  return `${rootPrefixCls}-${motion}`;
+};
+
+type RawValue = string | number;
+
+export interface LabeledValue {
+  key?: string;
+  value: RawValue;
+  label: any;
+}
+
+export type SelectValue = RawValue | RawValue[] | LabeledValue | LabeledValue[];
+
+export interface RefTreeSelectProps {
+  focus: () => void;
+  blur: () => void;
+}
+export const treeSelectProps = {
+  ...omit(vcTreeSelectProps<DefaultValueType>(), ['showTreeIcon', 'treeMotion', 'inputIcon']),
+  suffixIcon: PropTypes.any,
+  size: { type: String as PropType<SizeType> },
+  bordered: { type: Boolean, default: undefined },
+  replaceFields: { type: Object as PropType<FieldNames> },
+};
+export type TreeSelectProps = Partial<ExtractPropTypes<typeof treeSelectProps>>;
 
 const TreeSelect = defineComponent({
   TreeNode,
@@ -24,176 +59,181 @@ const TreeSelect = defineComponent({
   SHOW_CHILD,
   name: 'ATreeSelect',
   inheritAttrs: false,
-  props: initDefaultProps(TreeSelectProps(), {
+  props: initDefaultProps(treeSelectProps, {
     transitionName: 'slide-up',
     choiceTransitionName: '',
+    listHeight: 256,
+    treeIcon: false,
+    listItemHeight: 26,
+    bordered: true,
   }),
-  setup() {
-    return {
-      vcTreeSelect: null,
-      configProvider: inject('configProvider', defaultConfigProvider),
-    };
-  },
-  created() {
+  slots: [
+    'title',
+    'titleRender',
+    'placeholder',
+    'maxTagPlaceholder',
+    'treeIcon',
+    'switcherIcon',
+    'notFoundContent',
+  ],
+  setup(props, { attrs, slots, expose, emit }) {
     warning(
-      this.multiple !== false || !this.treeCheckable,
-      'TreeSelect',
-      '`multiple` will alway be `true` when `treeCheckable` is true',
+      !(props.treeData === undefined && slots.default),
+      '`children` of TreeSelect is deprecated. Please use `treeData` instead.',
     );
-  },
-  methods: {
-    saveTreeSelect(node: any) {
-      this.vcTreeSelect = node;
-    },
-    focus() {
-      this.vcTreeSelect.focus();
-    },
-
-    blur() {
-      this.vcTreeSelect.blur();
-    },
-    renderSwitcherIcon(prefixCls: string, { isLeaf, loading }) {
-      if (loading) {
-        return <LoadingOutlined class={`${prefixCls}-switcher-loading-icon`} />;
-      }
-      if (isLeaf) {
-        return null;
-      }
-      return <CaretDownOutlined class={`${prefixCls}-switcher-icon`} />;
-    },
-    handleChange(...args: any[]) {
-      this.$emit('update:value', args[0]);
-      this.$emit('change', ...args);
-    },
-    handleTreeExpand(...args: any[]) {
-      this.$emit('update:treeExpandedKeys', args[0]);
-      this.$emit('treeExpand', ...args);
-    },
-    handleSearch(...args: any[]) {
-      this.$emit('update:searchValue', args[0]);
-      this.$emit('search', ...args);
-    },
-    updateTreeData(treeData: any[]) {
-      const { $slots } = this;
-      const defaultFields = {
-        children: 'children',
-        title: 'title',
-        key: 'key',
-        label: 'label',
-        value: 'value',
-      };
-      const replaceFields = { ...defaultFields, ...this.$props.replaceFields };
-      return treeData.map(item => {
-        const { slots = {} } = item;
-        const label = item[replaceFields.label];
-        const title = item[replaceFields.title];
-        const value = item[replaceFields.value];
-        const key = item[replaceFields.key];
-        const children = item[replaceFields.children];
-        let newLabel = typeof label === 'function' ? label() : label;
-        let newTitle = typeof title === 'function' ? title() : title;
-        if (!newLabel && slots.label && $slots[slots.label]) {
-          newLabel = <>{$slots[slots.label](item)}</>;
-        }
-        if (!newTitle && slots.title && $slots[slots.title]) {
-          newTitle = <>{$slots[slots.title](item)}</>;
-        }
-        const treeNodeProps = {
-          ...item,
-          title: newTitle || newLabel,
-          value,
-          dataRef: item,
-          key,
-        };
-        if (children) {
-          return { ...treeNodeProps, children: this.updateTreeData(children) };
-        }
-        return treeNodeProps;
-      });
-    },
-  },
-
-  render() {
-    const props: any = getOptionProps(this);
+    watchEffect(() => {
+      devWarning(
+        props.multiple !== false || !props.treeCheckable,
+        'TreeSelect',
+        '`multiple` will alway be `true` when `treeCheckable` is true',
+      );
+      devWarning(
+        props.replaceFields === undefined,
+        'TreeSelect',
+        '`replaceFields` is deprecated, please use fieldNames instead',
+      );
+    });
     const {
-      prefixCls: customizePrefixCls,
-      size,
-      dropdownStyle,
-      dropdownClassName,
-      getPopupContainer,
-      ...restProps
-    } = props;
-    const { class: className } = this.$attrs;
-    const { renderEmpty, getPrefixCls } = this.configProvider;
-    const prefixCls = getPrefixCls('select', customizePrefixCls);
-
-    const notFoundContent = getComponent(this, 'notFoundContent');
-    const removeIcon = getComponent(this, 'removeIcon');
-    const clearIcon = getComponent(this, 'clearIcon');
-    const { getPopupContainer: getContextPopupContainer } = this.configProvider;
-    const rest = omit(restProps, [
-      'inputIcon',
-      'removeIcon',
-      'clearIcon',
-      'switcherIcon',
-      'suffixIcon',
-    ]);
-    let suffixIcon = getComponent(this, 'suffixIcon');
-    suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon;
-    let treeData = props.treeData;
-    if (treeData) {
-      treeData = this.updateTreeData(treeData);
-    }
-    const cls = {
-      [`${prefixCls}-lg`]: size === 'large',
-      [`${prefixCls}-sm`]: size === 'small',
-      [className as string]: className,
-    };
-
-    // showSearch: single - false, multiple - true
-    let { showSearch } = restProps;
-    if (!('showSearch' in restProps)) {
-      showSearch = !!(restProps.multiple || restProps.treeCheckable);
-    }
-
-    let checkable = getComponent(this, 'treeCheckable');
-    if (checkable) {
-      checkable = <span class={`${prefixCls}-tree-checkbox-inner`} />;
-    }
-
-    const inputIcon = suffixIcon || <DownOutlined class={`${prefixCls}-arrow-icon`} />;
-
-    const finalRemoveIcon = removeIcon || <CloseOutlined class={`${prefixCls}-remove-icon`} />;
-
-    const finalClearIcon = clearIcon || <CloseCircleFilled class={`${prefixCls}-clear-icon`} />;
-    const VcTreeSelectProps = {
-      ...this.$attrs,
-      switcherIcon: nodeProps => this.renderSwitcherIcon(prefixCls, nodeProps),
-      inputIcon,
-      removeIcon: finalRemoveIcon,
-      clearIcon: finalClearIcon,
-      ...rest,
-      showSearch,
-      getPopupContainer: getPopupContainer || getContextPopupContainer,
-      dropdownClassName: classNames(dropdownClassName, `${prefixCls}-tree-dropdown`),
+      configProvider,
       prefixCls,
-      dropdownStyle: { maxHeight: '100vh', overflow: 'auto', ...dropdownStyle },
-      treeCheckable: checkable,
-      notFoundContent: notFoundContent || renderEmpty('Select'),
-      class: cls,
-      onChange: this.handleChange,
-      onSearch: this.handleSearch,
-      onTreeExpand: this.handleTreeExpand,
-      ref: this.saveTreeSelect,
-      treeData: treeData ? treeData : convertChildrenToData(getSlot(this)),
-    };
-    return (
-      <VcTreeSelect
-        {...VcTreeSelectProps}
-        v-slots={omit(this.$slots, ['default'])}
-        __propsSymbol__={[]}
-      />
+      renderEmpty,
+      direction,
+      virtual,
+      dropdownMatchSelectWidth,
+      size,
+      getPopupContainer,
+    } = useConfigInject('select', props);
+    const treePrefixCls = computed(() =>
+      configProvider.getPrefixCls('select-tree', props.prefixCls),
     );
+    const treeSelectPrefixCls = computed(() =>
+      configProvider.getPrefixCls('tree-select', props.prefixCls),
+    );
+
+    const mergedDropdownClassName = computed(() =>
+      classNames(props.dropdownClassName, `${treeSelectPrefixCls.value}-dropdown`, {
+        [`${treeSelectPrefixCls.value}-dropdown-rtl`]: direction.value === 'rtl',
+      }),
+    );
+
+    const isMultiple = computed(() => !!(props.treeCheckable || props.multiple));
+
+    const treeSelectRef = ref();
+    expose({
+      focus() {
+        treeSelectRef.value.focus?.();
+      },
+
+      blur() {
+        treeSelectRef.value.blur?.();
+      },
+    });
+
+    const handleChange = (...args: any[]) => {
+      emit('update:value', args[0]);
+      emit('change', ...args);
+    };
+    const handleTreeExpand = (...args: any[]) => {
+      emit('update:treeExpandedKeys', args[0]);
+      emit('treeExpand', ...args);
+    };
+    const handleSearch = (...args: any[]) => {
+      emit('update:searchValue', args[0]);
+      emit('search', ...args);
+    };
+    return () => {
+      const {
+        notFoundContent = slots.notFoundContent?.(),
+        prefixCls: customizePrefixCls,
+        bordered,
+        listHeight,
+        listItemHeight,
+        multiple,
+        treeIcon,
+        transitionName,
+        choiceTransitionName,
+        treeLine,
+        switcherIcon = slots.switcherIcon?.(),
+        fieldNames = props.replaceFields,
+      } = props;
+      // ===================== Icons =====================
+      const { suffixIcon, removeIcon, clearIcon } = getIcons(
+        {
+          ...props,
+          multiple: isMultiple.value,
+          prefixCls: prefixCls.value,
+        },
+        slots,
+      );
+
+      // ===================== Empty =====================
+      let mergedNotFound;
+      if (notFoundContent !== undefined) {
+        mergedNotFound = notFoundContent;
+      } else {
+        mergedNotFound = renderEmpty.value('Select');
+      }
+      // ==================== Render =====================
+      const selectProps = omit(props as typeof props & { itemIcon: any; switcherIcon: any }, [
+        'suffixIcon',
+        'itemIcon',
+        'removeIcon',
+        'clearIcon',
+        'switcherIcon',
+      ]);
+
+      const mergedClassName = classNames(
+        !customizePrefixCls && treeSelectPrefixCls.value,
+        {
+          [`${prefixCls.value}-lg`]: size.value === 'large',
+          [`${prefixCls.value}-sm`]: size.value === 'small',
+          [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
+          [`${prefixCls.value}-borderless`]: !bordered,
+        },
+        attrs.class,
+      );
+      const rootPrefixCls = configProvider.getPrefixCls();
+      const otherProps: any = {};
+      if (props.treeData === undefined && slots.default) {
+        otherProps.children = flattenChildren(slots.default());
+      }
+      return (
+        <VcTreeSelect
+          {...attrs}
+          virtual={virtual.value}
+          dropdownMatchSelectWidth={dropdownMatchSelectWidth.value}
+          {...selectProps}
+          fieldNames={fieldNames}
+          ref={treeSelectRef}
+          prefixCls={prefixCls.value}
+          class={mergedClassName}
+          listHeight={listHeight}
+          listItemHeight={listItemHeight}
+          inputIcon={suffixIcon}
+          multiple={multiple}
+          removeIcon={removeIcon}
+          clearIcon={clearIcon}
+          switcherIcon={(nodeProps: AntTreeNodeProps) =>
+            renderSwitcherIcon(treePrefixCls.value, switcherIcon, treeLine, nodeProps)
+          }
+          showTreeIcon={treeIcon as any}
+          notFoundContent={mergedNotFound}
+          getPopupContainer={getPopupContainer.value}
+          treeMotion={null}
+          dropdownClassName={mergedDropdownClassName.value}
+          choiceTransitionName={getTransitionName(rootPrefixCls, '', choiceTransitionName)}
+          transitionName={getTransitionName(rootPrefixCls, 'slide-up', transitionName)}
+          onChange={handleChange}
+          onSearch={handleSearch}
+          onTreeExpand={handleTreeExpand}
+          v-slots={{
+            ...slots,
+            treeCheckable: () => <span class={`${prefixCls.value}-tree-checkbox-inner`} />,
+          }}
+          {...otherProps}
+        />
+      );
+    };
   },
 });
 
diff --git a/components/tree-select/interface.tsx b/components/tree-select/interface.tsx
deleted file mode 100644
index 49bd7a113..000000000
--- a/components/tree-select/interface.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import PropTypes, { withUndefined } from '../_util/vue-types';
-import { SelectProps } from '../select';
-import { tuple } from '../_util/type';
-
-export const TreeData = PropTypes.shape({
-  key: PropTypes.string,
-  value: PropTypes.string,
-  label: PropTypes.VNodeChild,
-  slots: PropTypes.object,
-  children: PropTypes.array,
-}).loose;
-
-export const TreeSelectProps = () => ({
-  ...SelectProps(),
-  autofocus: PropTypes.looseBool,
-  dropdownStyle: PropTypes.object,
-  filterTreeNode: withUndefined(PropTypes.oneOfType([Function, Boolean])),
-  getPopupContainer: PropTypes.func,
-  labelInValue: PropTypes.looseBool,
-  loadData: PropTypes.func,
-  maxTagCount: PropTypes.number,
-  maxTagPlaceholder: PropTypes.VNodeChild,
-  value: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.object,
-    PropTypes.array,
-    PropTypes.number,
-  ]),
-  defaultValue: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.object,
-    PropTypes.array,
-    PropTypes.number,
-  ]),
-  multiple: PropTypes.looseBool,
-  notFoundContent: PropTypes.VNodeChild,
-  searchPlaceholder: PropTypes.string,
-  searchValue: PropTypes.string,
-  showCheckedStrategy: PropTypes.oneOf(tuple('SHOW_ALL', 'SHOW_PARENT', 'SHOW_CHILD')),
-  suffixIcon: PropTypes.VNodeChild,
-  treeCheckable: PropTypes.looseBool,
-  treeCheckStrictly: PropTypes.looseBool,
-  treeData: PropTypes.arrayOf(Object),
-  treeDataSimpleMode: withUndefined(PropTypes.oneOfType([PropTypes.looseBool, Object])),
-
-  dropdownClassName: PropTypes.string,
-  dropdownMatchSelectWidth: PropTypes.looseBool,
-  treeDefaultExpandAll: PropTypes.looseBool,
-  treeExpandedKeys: PropTypes.array,
-  treeIcon: PropTypes.looseBool,
-  treeDefaultExpandedKeys: PropTypes.array,
-  treeNodeFilterProp: PropTypes.string,
-  treeNodeLabelProp: PropTypes.string,
-  replaceFields: PropTypes.object.def({}),
-  clearIcon: PropTypes.VNodeChild,
-  removeIcon: PropTypes.VNodeChild,
-
-  onSelect: PropTypes.func,
-  onChange: PropTypes.func,
-  onSearch: PropTypes.func,
-  onTreeExpand: PropTypes.func,
-  'onUpdate:treeExpandedKeys': PropTypes.func,
-  'onUpdate:searchValue': PropTypes.func,
-  'onUpdate:value': PropTypes.func,
-});
diff --git a/components/tree-select/style/index.less b/components/tree-select/style/index.less
index 5b9cdd3f1..e6672b587 100644
--- a/components/tree-select/style/index.less
+++ b/components/tree-select/style/index.less
@@ -3,189 +3,57 @@
 @import '../../tree/style/mixin';
 @import '../../checkbox/style/mixin';
 
-@select-prefix-cls: ~'@{ant-prefix}-select';
+@tree-select-prefix-cls: ~'@{ant-prefix}-tree-select';
 @select-tree-prefix-cls: ~'@{ant-prefix}-select-tree';
 
-.antCheckboxFn(@checkbox-prefix-cls: ~'@{ant-prefix}-select-tree-checkbox');
+.antCheckboxFn(@checkbox-prefix-cls: ~'@{select-tree-prefix-cls}-checkbox');
+
+.@{tree-select-prefix-cls} {
+  // ======================= Dropdown =======================
+  &-dropdown {
+    padding: @padding-xs (@padding-xs / 2) 0;
+
+    &-rtl {
+      direction: rtl;
+    }
+    // ======================== Tree ========================
+    .@{select-tree-prefix-cls} {
+      border-radius: 0;
+
+      &-list-holder-inner {
+        align-items: stretch;
+
+        .@{select-tree-prefix-cls}-treenode {
+          padding-bottom: @padding-xs;
+
+          .@{select-tree-prefix-cls}-node-content-wrapper {
+            flex: auto;
+          }
+        }
+      }
+    }
+  }
+}
 
 .@{select-tree-prefix-cls} {
-  .reset-component();
+  .antTreeFn(@select-tree-prefix-cls);
 
-  margin: 0;
-  margin-top: -4px;
-  padding: 0 4px;
-  li {
-    margin: 8px 0;
-    padding: 0;
-    white-space: nowrap;
-    list-style: none;
-    outline: 0;
-    &.filter-node {
-      > span {
-        font-weight: 500;
-      }
-    }
-    ul {
-      margin: 0;
-      padding: 0 0 0 18px;
-    }
-    .@{select-tree-prefix-cls}-node-content-wrapper {
-      display: inline-block;
-      width: ~'calc(100% - 24px)';
-      margin: 0;
-      padding: 3px 5px;
-      color: @text-color;
-      text-decoration: none;
-      border-radius: @border-radius-sm;
-      cursor: pointer;
-      transition: all 0.3s;
-      &:hover {
-        background-color: @item-hover-bg;
-      }
-      &.@{select-tree-prefix-cls}-node-selected {
-        background-color: @primary-2;
-      }
-    }
-    span {
-      &.@{select-tree-prefix-cls}-checkbox {
-        margin: 0 4px 0 0;
-        + .@{select-tree-prefix-cls}-node-content-wrapper {
-          width: ~'calc(100% - 46px)';
-        }
-      }
-      &.@{select-tree-prefix-cls}-switcher,
-      &.@{select-tree-prefix-cls}-iconEle {
-        display: inline-block;
-        width: 24px;
-        height: 24px;
-        margin: 0;
-        line-height: 22px;
-        text-align: center;
-        vertical-align: middle;
-        border: 0 none;
-        outline: none;
-        cursor: pointer;
-      }
-      &.@{select-prefix-cls}-icon_loading {
-        .@{select-prefix-cls}-switcher-loading-icon {
-          position: absolute;
-          left: 0;
-          display: inline-block;
-          color: @primary-color;
-          font-size: 14px;
-          transform: none;
-          svg {
-            position: absolute;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            margin: auto;
-          }
-        }
-      }
-      &.@{select-tree-prefix-cls}-switcher {
-        position: relative;
-        &.@{select-tree-prefix-cls}-switcher-noop {
-          cursor: auto;
-        }
-        &.@{select-tree-prefix-cls}-switcher_open {
-          .antTreeSwitcherIcon();
-        }
-        &.@{select-tree-prefix-cls}-switcher_close {
-          .antTreeSwitcherIcon();
-          .@{select-prefix-cls}-switcher-icon {
-            svg {
-              transform: rotate(-90deg);
-            }
-          }
-        }
-
-        &.@{select-tree-prefix-cls}-switcher_open,
-        &.@{select-tree-prefix-cls}-switcher_close {
-          .@{select-prefix-cls}-switcher-loading-icon {
-            position: absolute;
-            left: 0;
-            display: inline-block;
-            width: 24px;
-            height: 24px;
-            color: @primary-color;
-            font-size: 14px;
-            transform: none;
-            svg {
-              position: absolute;
-              top: 0;
-              right: 0;
-              bottom: 0;
-              left: 0;
-              margin: auto;
-            }
+  // change switcher icon rotation in rtl direction
+  & &-switcher {
+    &_close {
+      .@{select-tree-prefix-cls}-switcher-icon {
+        svg {
+          .@{tree-select-prefix-cls}-dropdown-rtl & {
+            transform: rotate(90deg);
           }
         }
       }
     }
-  }
 
-  .@{select-tree-prefix-cls}-treenode-loading {
-    .@{select-tree-prefix-cls}-iconEle {
-      display: none;
+    &-loading-icon {
+      .@{tree-select-prefix-cls}-dropdown-rtl & {
+        transform: scaleY(-1);
+      }
     }
   }
-  &-child-tree {
-    display: none;
-    &-open {
-      display: block;
-    }
-  }
-  li&-treenode-disabled {
-    > span:not(.@{select-tree-prefix-cls}-switcher),
-    > .@{select-tree-prefix-cls}-node-content-wrapper,
-    > .@{select-tree-prefix-cls}-node-content-wrapper span {
-      color: @disabled-color;
-      cursor: not-allowed;
-    }
-    > .@{select-tree-prefix-cls}-node-content-wrapper:hover {
-      background: transparent;
-    }
-  }
-  &-icon__open {
-    margin-right: 2px;
-    vertical-align: top;
-  }
-  &-icon__close {
-    margin-right: 2px;
-    vertical-align: top;
-  }
-}
-
-.@{select-prefix-cls}-tree-dropdown {
-  .reset-component();
-  .@{select-prefix-cls}-dropdown-search {
-    position: sticky;
-    top: 0;
-    z-index: 1;
-    display: block;
-    padding: 4px;
-    background: @component-background;
-    .@{select-prefix-cls}-search__field__wrap {
-      width: 100%;
-    }
-    .@{select-prefix-cls}-search__field {
-      box-sizing: border-box;
-      width: 100%;
-      padding: 4px 7px;
-      border: @border-width-base @border-style-base @border-color-base;
-      border-radius: 4px;
-      outline: none;
-    }
-    &.@{select-prefix-cls}-search--hide {
-      display: none;
-    }
-  }
-  .@{select-prefix-cls}-not-found {
-    display: block;
-    padding: 7px 16px;
-    color: @disabled-color;
-    cursor: not-allowed;
-  }
 }
diff --git a/components/tree-select/style/index.ts b/components/tree-select/style/index.tsx
similarity index 83%
rename from components/tree-select/style/index.ts
rename to components/tree-select/style/index.tsx
index 04ee7ce2f..3365572fd 100644
--- a/components/tree-select/style/index.ts
+++ b/components/tree-select/style/index.tsx
@@ -2,6 +2,6 @@ import '../../style/index.less';
 import './index.less';
 
 // style dependencies
-// deps-lint-skip: select
+// deps-lint-skip: tree
 import '../../select/style';
 import '../../empty/style';
diff --git a/components/tree/DirectoryTree.tsx b/components/tree/DirectoryTree.tsx
index 3e096b36e..6a3b319c8 100644
--- a/components/tree/DirectoryTree.tsx
+++ b/components/tree/DirectoryTree.tsx
@@ -1,37 +1,33 @@
-import type { VNode } from 'vue';
-import { defineComponent, inject } from 'vue';
-import omit from 'omit.js';
+import type { ExtractPropTypes, PropType } from 'vue';
+import { nextTick, onUpdated, ref, watch } from 'vue';
+import { defineComponent } from 'vue';
 import debounce from 'lodash-es/debounce';
 import FolderOpenOutlined from '@ant-design/icons-vue/FolderOpenOutlined';
 import FolderOutlined from '@ant-design/icons-vue/FolderOutlined';
 import FileOutlined from '@ant-design/icons-vue/FileOutlined';
-import PropTypes from '../_util/vue-types';
 import classNames from '../_util/classNames';
-import { conductExpandParent, convertTreeToEntities } from '../vc-tree/src/util';
-import type { CheckEvent, ExpendEvent, SelectEvent } from './Tree';
-import Tree, { TreeProps } from './Tree';
-import {
-  calcRangeKeys,
-  getFullKeyList,
-  convertDirectoryKeysToNodes,
-  getFullKeyListByTreeData,
-} from './util';
-import BaseMixin from '../_util/BaseMixin';
-import { getOptionProps, getComponent, getSlot } from '../_util/props-util';
+import type { AntdTreeNodeAttribute } from './Tree';
+import { treeProps } from './Tree';
+import type { TreeProps } from './Tree';
+import Tree from './Tree';
 import initDefaultProps from '../_util/props-util/initDefaultProps';
-import { defaultConfigProvider } from '../config-provider';
+import { convertDataToEntities, convertTreeToData } from '../vc-tree/utils/treeUtil';
+import type { DataNode, EventDataNode, Key } from '../vc-tree/interface';
+import { conductExpandParent } from '../vc-tree/util';
+import { calcRangeKeys, convertDirectoryKeysToNodes } from './utils/dictUtil';
+import useConfigInject from '../_util/hooks/useConfigInject';
+import { filterEmpty } from '../_util/props-util';
 
-// export type ExpandAction = false | 'click' | 'dblclick'; export interface
-// DirectoryTreeProps extends TreeProps {   expandAction?: ExpandAction; }
-// export interface DirectoryTreeState {   expandedKeys?: string[];
-// selectedKeys?: string[]; }
+export type ExpandAction = false | 'click' | 'doubleclick' | 'dblclick';
 
-export interface DirectoryTreeState {
-  _expandedKeys?: (string | number)[];
-  _selectedKeys?: (string | number)[];
-}
+const directoryTreeProps = {
+  ...treeProps(),
+  expandAction: { type: [Boolean, String] as PropType<ExpandAction> },
+};
 
-function getIcon(props: { isLeaf: boolean; expanded: boolean } & VNode) {
+export type DirectoryTreeProps = Partial<ExtractPropTypes<typeof directoryTreeProps>>;
+
+function getIcon(props: AntdTreeNodeAttribute) {
   const { isLeaf, expanded } = props;
   if (isLeaf) {
     return <FileOutlined />;
@@ -41,211 +37,239 @@ function getIcon(props: { isLeaf: boolean; expanded: boolean } & VNode) {
 
 export default defineComponent({
   name: 'ADirectoryTree',
-  mixins: [BaseMixin],
   inheritAttrs: false,
-  props: initDefaultProps(
-    {
-      ...TreeProps(),
-      expandAction: PropTypes.oneOf([false, 'click', 'doubleclick', 'dblclick']),
-    },
-    {
-      showIcon: true,
-      expandAction: 'click',
-    },
-  ),
-  setup() {
-    return {
-      children: null,
-      onDebounceExpand: null,
-      tree: null,
-      lastSelectedKey: '',
-      cachedSelectedKeys: [],
-      configProvider: inject('configProvider', defaultConfigProvider),
-    };
-  },
-  data() {
-    const props = getOptionProps(this);
-    const { defaultExpandAll, defaultExpandParent, expandedKeys, defaultExpandedKeys } = props;
-    const children = getSlot(this);
-    const { keyEntities } = convertTreeToEntities(children);
-    const state: DirectoryTreeState = {};
-    // Selected keys
-    state._selectedKeys = props.selectedKeys || props.defaultSelectedKeys || [];
+  props: initDefaultProps(directoryTreeProps, {
+    showIcon: true,
+    expandAction: 'click',
+  }),
+  slots: ['icon', 'title', 'switcherIcon', 'titleRender'],
+  emits: [
+    'update:selectedKeys',
+    'update:checkedKeys',
+    'update:expandedKeys',
+    'expand',
+    'select',
+    'check',
+    'doubleclick',
+    'dblclick',
+    'click',
+  ],
+  setup(props, { attrs, slots, emit }) {
+    // convertTreeToData 兼容 a-tree-node 历史写法，未来a-tree-node移除后，删除相关代码，不要再render中调用 treeData，否则死循环
+    const treeData = ref<DataNode[]>(
+      props.treeData || convertTreeToData(filterEmpty(slots.default?.())),
+    );
+    watch(
+      () => props.treeData,
+      () => {
+        treeData.value = props.treeData;
+      },
+    );
+    onUpdated(() => {
+      nextTick(() => {
+        if (props.treeData === undefined && slots.default) {
+          treeData.value = convertTreeToData(filterEmpty(slots.default?.()));
+        }
+      });
+    });
+    // Shift click usage
+    const lastSelectedKey = ref<Key>();
 
-    // Expanded keys
-    if (defaultExpandAll) {
-      if (props.treeData) {
-        state._expandedKeys = getFullKeyListByTreeData(props.treeData, props.replaceFields);
-      } else {
-        state._expandedKeys = getFullKeyList(children);
-      }
-    } else if (defaultExpandParent) {
-      state._expandedKeys = conductExpandParent(expandedKeys || defaultExpandedKeys, keyEntities);
-    } else {
-      state._expandedKeys = expandedKeys || defaultExpandedKeys;
-    }
-    return {
-      _selectedKeys: [],
-      _expandedKeys: [],
-      ...state,
-    };
-  },
-  watch: {
-    expandedKeys(val) {
-      this.setState({ _expandedKeys: val });
-    },
-    selectedKeys(val) {
-      this.setState({ _selectedKeys: val });
-    },
-  },
-  created() {
-    this.onDebounceExpand = debounce(this.expandFolderNode, 200, { leading: true });
-  },
-  methods: {
-    handleExpand(expandedKeys: (string | number)[], info: ExpendEvent) {
-      this.setUncontrolledState({ _expandedKeys: expandedKeys });
-      this.$emit('update:expandedKeys', expandedKeys);
-      this.$emit('expand', expandedKeys, info);
+    const cachedSelectedKeys = ref<Key[]>();
 
-      return undefined;
-    },
+    const treeRef = ref();
 
-    handleClick(event: MouseEvent, node: VNode) {
-      const { expandAction } = this.$props;
+    const getInitExpandedKeys = () => {
+      const { keyEntities } = convertDataToEntities(treeData.value);
 
-      // Expand the tree
-      if (expandAction === 'click') {
-        this.onDebounceExpand(event, node);
-      }
-      this.$emit('click', event, node);
-    },
+      let initExpandedKeys: any;
 
-    handleDoubleClick(event: MouseEvent, node: VNode) {
-      const { expandAction } = this.$props;
-
-      // Expand the tree
-      if (expandAction === 'dblclick' || expandAction === 'doubleclick') {
-        this.onDebounceExpand(event, node);
-      }
-
-      this.$emit('doubleclick', event, node);
-      this.$emit('dblclick', event, node);
-    },
-
-    hanldeSelect(keys: (string | number)[], event: SelectEvent) {
-      const { multiple } = this.$props;
-      const children = this.children || [];
-      const { _expandedKeys: expandedKeys = [] } = this.$data;
-      const { node, nativeEvent } = event;
-      const { eventKey = '' } = node;
-
-      const newState: DirectoryTreeState = {};
-
-      // We need wrap this event since some value is not same
-      const newEvent = {
-        ...event,
-        selected: true, // Directory selected always true
-      };
-
-      // Windows / Mac single pick
-      const ctrlPick = nativeEvent.ctrlKey || nativeEvent.metaKey;
-      const shiftPick = nativeEvent.shiftKey;
-
-      // Generate new selected keys
-      let newSelectedKeys: (string | number)[];
-      if (multiple && ctrlPick) {
-        // Control click
-        newSelectedKeys = keys;
-        this.lastSelectedKey = eventKey;
-        this.cachedSelectedKeys = newSelectedKeys;
-        newEvent.selectedNodes = convertDirectoryKeysToNodes(children, newSelectedKeys);
-      } else if (multiple && shiftPick) {
-        // Shift click
-        newSelectedKeys = Array.from(
-          new Set([
-            ...(this.cachedSelectedKeys || []),
-            ...calcRangeKeys(children, expandedKeys, eventKey, this.lastSelectedKey),
-          ]),
+      // Expanded keys
+      if (props.defaultExpandAll) {
+        initExpandedKeys = Object.keys(keyEntities);
+      } else if (props.defaultExpandParent) {
+        initExpandedKeys = conductExpandParent(
+          props.expandedKeys || props.defaultExpandedKeys,
+          keyEntities,
         );
-        newEvent.selectedNodes = convertDirectoryKeysToNodes(children, newSelectedKeys);
       } else {
-        // Single click
-        newSelectedKeys = [eventKey];
-        this.lastSelectedKey = eventKey;
-        this.cachedSelectedKeys = newSelectedKeys;
-        newEvent.selectedNodes = [event.node];
+        initExpandedKeys = props.expandedKeys || props.defaultExpandedKeys;
       }
-      newState._selectedKeys = newSelectedKeys;
+      return initExpandedKeys;
+    };
 
-      this.$emit('update:selectedKeys', newSelectedKeys);
-      this.$emit('select', newSelectedKeys, newEvent);
+    const selectedKeys = ref(props.selectedKeys || props.defaultSelectedKeys || []);
 
-      this.setUncontrolledState(newState);
-    },
-    setTreeRef(node: VNode) {
-      this.tree = node;
-    },
+    const expandedKeys = ref<Key[]>(getInitExpandedKeys());
 
-    expandFolderNode(event: MouseEvent, node: { isLeaf: boolean } & VNode) {
+    watch(
+      () => props.selectedKeys,
+      () => {
+        if (props.selectedKeys !== undefined) {
+          selectedKeys.value = props.selectedKeys;
+        }
+      },
+      { immediate: true },
+    );
+
+    watch(
+      () => props.expandedKeys,
+      () => {
+        if (props.expandedKeys !== undefined) {
+          expandedKeys.value = props.expandedKeys;
+        }
+      },
+      { immediate: true },
+    );
+
+    const expandFolderNode = (event: MouseEvent, node: any) => {
       const { isLeaf } = node;
 
       if (isLeaf || event.shiftKey || event.metaKey || event.ctrlKey) {
         return;
       }
-
-      if (this.tree.tree) {
-        // Get internal vc-tree
-        const internalTree = this.tree.tree;
-
-        // Call internal rc-tree expand function
-        // https://github.com/ant-design/ant-design/issues/12567
-        internalTree.onNodeExpand(event, node);
-      }
-    },
-
-    setUncontrolledState(state: unknown) {
-      const newState = omit(
-        state,
-        Object.keys(getOptionProps(this)).map(p => `_${p}`),
-      );
-      if (Object.keys(newState).length) {
-        this.setState(newState);
-      }
-    },
-    handleCheck(checkedObj: (string | number)[], eventObj: CheckEvent) {
-      this.$emit('update:checkedKeys', checkedObj);
-      this.$emit('check', checkedObj, eventObj);
-    },
-  },
-
-  render() {
-    this.children = getSlot(this);
-    const { prefixCls: customizePrefixCls, ...props } = getOptionProps(this);
-    const getPrefixCls = this.configProvider.getPrefixCls;
-    const prefixCls = getPrefixCls('tree', customizePrefixCls);
-    const { _expandedKeys: expandedKeys, _selectedKeys: selectedKeys } = this.$data;
-    const { class: className, ...restAttrs } = this.$attrs;
-    const connectClassName = classNames(`${prefixCls}-directory`, className);
-    const treeProps = {
-      icon: getIcon,
-      ...restAttrs,
-      ...omit(props, ['onUpdate:selectedKeys', 'onUpdate:checkedKeys', 'onUpdate:expandedKeys']),
-      prefixCls,
-      expandedKeys,
-      selectedKeys,
-      switcherIcon: getComponent(this, 'switcherIcon'),
-      ref: this.setTreeRef,
-      class: connectClassName,
-      onSelect: this.hanldeSelect,
-      onClick: this.handleClick,
-      onDblclick: this.handleDoubleClick,
-      onExpand: this.handleExpand,
-      onCheck: this.handleCheck,
+      // Call internal rc-tree expand function
+      // https://github.com/ant-design/ant-design/issues/12567
+      treeRef.value!.onNodeExpand(event as any, node);
+    };
+    const onDebounceExpand = debounce(expandFolderNode, 200, {
+      leading: true,
+    });
+    const onExpand = (
+      keys: Key[],
+      info: {
+        node: EventDataNode;
+        expanded: boolean;
+        nativeEvent: MouseEvent;
+      },
+    ) => {
+      if (props.expandedKeys === undefined) {
+        expandedKeys.value = keys;
+      }
+      // Call origin function
+      emit('update:expandedKeys', keys);
+      emit('expand', keys, info);
+    };
+
+    const onClick = (event: MouseEvent, node: EventDataNode) => {
+      const { expandAction } = props;
+
+      // Expand the tree
+      if (expandAction === 'click') {
+        onDebounceExpand(event, node);
+      }
+      emit('click', event, node);
+    };
+
+    const onDoubleClick = (event: MouseEvent, node: EventDataNode) => {
+      const { expandAction } = props;
+      // Expand the tree
+      if (expandAction === 'dblclick' || expandAction === 'doubleclick') {
+        onDebounceExpand(event, node);
+      }
+
+      emit('doubleclick', event, node);
+      emit('dblclick', event, node);
+    };
+
+    const onSelect = (
+      keys: Key[],
+      event: {
+        event: 'select';
+        selected: boolean;
+        node: any;
+        selectedNodes: DataNode[];
+        nativeEvent: MouseEvent;
+      },
+    ) => {
+      const { multiple } = props;
+      const { node, nativeEvent } = event;
+      const { key = '' } = node;
+
+      // const newState: DirectoryTreeState = {};
+
+      // We need wrap this event since some value is not same
+      const newEvent: any = {
+        ...event,
+        selected: true, // Directory selected always true
+      };
+
+      // Windows / Mac single pick
+      const ctrlPick: boolean = nativeEvent.ctrlKey || nativeEvent.metaKey;
+      const shiftPick: boolean = nativeEvent.shiftKey;
+
+      // Generate new selected keys
+      let newSelectedKeys: Key[];
+      if (multiple && ctrlPick) {
+        // Control click
+        newSelectedKeys = keys;
+        lastSelectedKey.value = key;
+        cachedSelectedKeys.value = newSelectedKeys;
+        newEvent.selectedNodes = convertDirectoryKeysToNodes(treeData.value, newSelectedKeys);
+      } else if (multiple && shiftPick) {
+        // Shift click
+        newSelectedKeys = Array.from(
+          new Set([
+            ...(cachedSelectedKeys.value || []),
+            ...calcRangeKeys({
+              treeData: treeData.value,
+              expandedKeys: expandedKeys.value,
+              startKey: key,
+              endKey: lastSelectedKey.value,
+            }),
+          ]),
+        );
+        newEvent.selectedNodes = convertDirectoryKeysToNodes(treeData.value, newSelectedKeys);
+      } else {
+        // Single click
+        newSelectedKeys = [key];
+        lastSelectedKey.value = key;
+        cachedSelectedKeys.value = newSelectedKeys;
+        newEvent.selectedNodes = convertDirectoryKeysToNodes(treeData.value, newSelectedKeys);
+      }
+
+      emit('update:selectedKeys', newSelectedKeys);
+      emit('select', newSelectedKeys, newEvent);
+      if (props.selectedKeys === undefined) {
+        selectedKeys.value = newSelectedKeys;
+      }
+    };
+
+    const onCheck: TreeProps['onCheck'] = (checkedObjOrKeys, eventObj) => {
+      emit('update:checkedKeys', checkedObjOrKeys);
+      emit('check', checkedObjOrKeys, eventObj);
+    };
+
+    const { prefixCls, direction } = useConfigInject('tree', props);
+
+    return () => {
+      const connectClassName = classNames(
+        `${prefixCls.value}-directory`,
+        {
+          [`${prefixCls.value}-directory-rtl`]: direction.value === 'rtl',
+        },
+        attrs.class,
+      );
+      const { icon = slots.icon, blockNode = true, ...otherProps } = props;
+      return (
+        <Tree
+          {...attrs}
+          icon={icon || getIcon}
+          ref={treeRef}
+          blockNode={blockNode}
+          {...otherProps}
+          prefixCls={prefixCls.value}
+          class={connectClassName}
+          expandedKeys={expandedKeys.value}
+          selectedKeys={selectedKeys.value}
+          onSelect={onSelect}
+          onClick={onClick}
+          onDblclick={onDoubleClick}
+          onExpand={onExpand}
+          onCheck={onCheck}
+          v-slots={slots}
+        />
+      );
     };
-    return (
-      <Tree {...treeProps} v-slots={omit(this.$slots, ['default'])}>
-        {this.children}
-      </Tree>
-    );
   },
 });
diff --git a/components/tree/Tree.tsx b/components/tree/Tree.tsx
index b01c4fcd8..842a10e78 100644
--- a/components/tree/Tree.tsx
+++ b/components/tree/Tree.tsx
@@ -1,290 +1,248 @@
-import type { VNode, PropType, CSSProperties } from 'vue';
-import { defineComponent, inject } from 'vue';
+import type { PropType, ExtractPropTypes } from 'vue';
+import { watchEffect } from 'vue';
+import { ref } from 'vue';
+import { defineComponent } from 'vue';
 import classNames from '../_util/classNames';
-import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
-import FileOutlined from '@ant-design/icons-vue/FileOutlined';
-import CaretDownFilled from '@ant-design/icons-vue/CaretDownFilled';
-import MinusSquareOutlined from '@ant-design/icons-vue/MinusSquareOutlined';
-import PlusSquareOutlined from '@ant-design/icons-vue/PlusSquareOutlined';
-import VcTree from '../vc-tree';
-import animation from '../_util/openAnimation';
+import VcTree, { TreeNode } from '../vc-tree';
 import PropTypes from '../_util/vue-types';
-import { getOptionProps, getComponent, getSlot } from '../_util/props-util';
+import { filterEmpty } from '../_util/props-util';
 import initDefaultProps from '../_util/props-util/initDefaultProps';
-import { cloneElement } from '../_util/vnode';
-import { defaultConfigProvider } from '../config-provider';
+import type { DataNode, EventDataNode, FieldNames, Key } from '../vc-tree/interface';
+import type { TreeNodeProps } from '../vc-tree/props';
+import { treeProps as vcTreeProps } from '../vc-tree/props';
+import useConfigInject from '../_util/hooks/useConfigInject';
+import renderSwitcherIcon from './utils/iconUtil';
+import dropIndicatorRender from './utils/dropIndicator';
+import devWarning from '../vc-util/devWarning';
+import { warning } from '../vc-util/warning';
 
-const TreeNode = VcTree.TreeNode;
-
-export interface TreeDataItem {
-  key?: string | number;
-  title?: string;
-  isLeaf?: boolean;
-  selectable?: boolean;
-  children?: TreeDataItem[];
-  disableCheckbox?: boolean;
-  disabled?: boolean;
-  class?: string;
-  style?: CSSProperties;
-  checkable?: boolean;
-  icon?: VNode;
-  slots?: Record<string, string>;
-  switcherIcon?: VNode;
-  // support custom field
-  [key: string]: any;
-}
-
-interface DefaultEvent {
-  nativeEvent: MouseEvent;
-  node: Record<string, any>;
-}
-
-export interface CheckEvent extends DefaultEvent {
-  checked: boolean;
-  checkedNodes: Array<Record<string, any>>;
-  checkedNodesPositions: { node: Record<string, any>; pos: string | number }[];
-  event: string;
-  halfCheckedKeys: (string | number)[];
-}
-
-export interface ExpendEvent extends DefaultEvent {
+export interface AntdTreeNodeAttribute {
+  eventKey: string;
+  prefixCls: string;
+  class: string;
   expanded: boolean;
-}
-
-export interface SelectEvent extends DefaultEvent {
-  event: string;
   selected: boolean;
-  selectedNodes: Array<Record<string, any>>;
+  checked: boolean;
+  halfChecked: boolean;
+  children: any;
+  title: any;
+  pos: string;
+  dragOver: boolean;
+  dragOverGapTop: boolean;
+  dragOverGapBottom: boolean;
+  isLeaf: boolean;
+  selectable: boolean;
+  disabled: boolean;
+  disableCheckbox: boolean;
 }
 
-export interface TreeDragEvent {
+export type AntTreeNodeProps = TreeNodeProps;
+
+// [Legacy] Compatible for v2
+export type TreeDataItem = DataNode;
+
+export interface AntTreeNodeBaseEvent {
+  node: EventDataNode;
+  nativeEvent: MouseEvent;
+}
+
+export interface AntTreeNodeCheckedEvent extends AntTreeNodeBaseEvent {
+  event: 'check';
+  checked?: boolean;
+  checkedNodes?: DataNode[];
+}
+
+export interface AntTreeNodeSelectedEvent extends AntTreeNodeBaseEvent {
+  event: 'select';
+  selected?: boolean;
+  selectedNodes?: DataNode[];
+}
+
+export interface AntTreeNodeExpandedEvent extends AntTreeNodeBaseEvent {
+  expanded?: boolean;
+}
+
+export interface AntTreeNodeMouseEvent {
+  node: EventDataNode;
   event: DragEvent;
-  expandedKeys: (string | number)[];
-  node: Record<string, any>;
 }
 
-export interface DropEvent {
-  dragNode: Record<string, any>;
-  dragNodesKeys: (string | number)[];
+export interface AntTreeNodeDragEnterEvent extends AntTreeNodeMouseEvent {
+  expandedKeys: Key[];
+}
+
+export interface AntTreeNodeDropEvent {
+  node: EventDataNode;
+  dragNode: EventDataNode;
+  dragNodesKeys: Key[];
   dropPosition: number;
-  dropToGap: boolean;
-  event: DragEvent;
-  node: Record<string, any>;
+  dropToGap?: boolean;
+  event: MouseEvent;
 }
 
-function TreeProps() {
+export const treeProps = () => {
   return {
-    showLine: PropTypes.looseBool,
+    ...vcTreeProps(),
+    showLine: { type: Boolean, default: undefined },
     /** 是否支持多选 */
-    multiple: PropTypes.looseBool,
+    multiple: { type: Boolean, default: undefined },
     /** 是否自动展开父节点 */
-    autoExpandParent: PropTypes.looseBool,
+    autoExpandParent: { type: Boolean, default: undefined },
     /** checkable状态下节点选择完全受控（父子节点选中状态不再关联）*/
-    checkStrictly: PropTypes.looseBool,
+    checkStrictly: { type: Boolean, default: undefined },
     /** 是否支持选中 */
-    checkable: PropTypes.looseBool,
+    checkable: { type: Boolean, default: undefined },
     /** 是否禁用树 */
-    disabled: PropTypes.looseBool,
+    disabled: { type: Boolean, default: undefined },
     /** 默认展开所有树节点 */
-    defaultExpandAll: PropTypes.looseBool,
+    defaultExpandAll: { type: Boolean, default: undefined },
     /** 默认展开对应树节点 */
-    defaultExpandParent: PropTypes.looseBool,
+    defaultExpandParent: { type: Boolean, default: undefined },
     /** 默认展开指定的树节点 */
-    defaultExpandedKeys: PropTypes.arrayOf(
-      PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    ),
+    defaultExpandedKeys: { type: Array as PropType<Key[]> },
     /** （受控）展开指定的树节点 */
-    expandedKeys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
+    expandedKeys: { type: Array as PropType<Key[]> },
     /** （受控）选中复选框的树节点 */
-    checkedKeys: PropTypes.oneOfType([
-      PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
-      PropTypes.shape({
-        checked: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
-        halfChecked: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
-      }).loose,
-    ]),
+    checkedKeys: {
+      type: [Array, Object] as PropType<Key[] | { checked: Key[]; halfChecked: Key[] }>,
+    },
     /** 默认选中复选框的树节点 */
-    defaultCheckedKeys: PropTypes.arrayOf(
-      PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    ),
+    defaultCheckedKeys: { type: Array as PropType<Key[]> },
     /** （受控）设置选中的树节点 */
-    selectedKeys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
+    selectedKeys: { type: Array as PropType<Key[]> },
     /** 默认选中的树节点 */
-    defaultSelectedKeys: PropTypes.arrayOf(
-      PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    ),
-    selectable: PropTypes.looseBool,
+    defaultSelectedKeys: { type: Array as PropType<Key[]> },
+    selectable: { type: Boolean, default: undefined },
 
-    /** filter some AntTreeNodes as you need. it should return true */
-    filterAntTreeNode: PropTypes.func,
-    /** 异步加载数据 */
-    loadData: PropTypes.func,
-    loadedKeys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
-    // onLoaded: (loadedKeys: string[], info: { event: 'load', node: AntTreeNode; }) => void,
-    /** 响应右键点击 */
-    // onRightClick: (options: AntTreeNodeMouseEvent) => void,
-    /** 设置节点可拖拽（IE>8）*/
-    draggable: PropTypes.looseBool,
-    // /** 开始拖拽时调用 */
-    // onDragStart: (options: AntTreeNodeMouseEvent) => void,
-    // /** dragenter 触发时调用 */
-    // onDragEnter: (options: AntTreeNodeMouseEvent) => void,
-    // /** dragover 触发时调用 */
-    // onDragOver: (options: AntTreeNodeMouseEvent) => void,
-    // /** dragleave 触发时调用 */
-    // onDragLeave: (options: AntTreeNodeMouseEvent) => void,
-    // /** drop 触发时调用 */
-    // onDrop: (options: AntTreeNodeMouseEvent) => void,
-    showIcon: PropTypes.looseBool,
-    icon: PropTypes.func,
+    loadedKeys: { type: Array as PropType<Key[]> },
+    draggable: { type: Boolean, default: undefined },
+    showIcon: { type: Boolean, default: undefined },
+    icon: { type: Function as PropType<(nodeProps: AntdTreeNodeAttribute) => any> },
     switcherIcon: PropTypes.any,
     prefixCls: PropTypes.string,
-    filterTreeNode: PropTypes.func,
-    openAnimation: PropTypes.any,
-    treeData: {
-      type: Array as PropType<TreeDataItem[]>,
-    },
     /**
      * @default{title,key,children}
+     * deprecated, please use `fieldNames` instead
      * 替换treeNode中 title,key,children字段为treeData中对应的字段
      */
-    replaceFields: PropTypes.object,
-    blockNode: PropTypes.looseBool,
-    /** 展开/收起节点时触发 */
-    onExpand: PropTypes.func,
-    /** 点击复选框触发 */
-    onCheck: PropTypes.func,
-    /** 点击树节点触发 */
-    onSelect: PropTypes.func,
-    /** 单击树节点触发 */
-    onClick: PropTypes.func,
-    /** 双击树节点触发 */
-    onDoubleclick: PropTypes.func,
-    onDblclick: PropTypes.func,
-    'onUpdate:selectedKeys': PropTypes.func,
-    'onUpdate:checkedKeys': PropTypes.func,
-    'onUpdate:expandedKeys': PropTypes.func,
+    replaceFields: { type: Object as PropType<FieldNames> },
+    blockNode: { type: Boolean, default: undefined },
+    openAnimation: PropTypes.any,
   };
-}
+};
 
-export { TreeProps };
+export type TreeProps = Partial<ExtractPropTypes<ReturnType<typeof treeProps>>>;
 
 export default defineComponent({
   name: 'ATree',
   inheritAttrs: false,
-  props: initDefaultProps(TreeProps(), {
+  props: initDefaultProps(treeProps(), {
     checkable: false,
+    selectable: true,
     showIcon: false,
-    openAnimation: {
-      ...animation,
-      appear: null,
-    },
     blockNode: false,
   }),
-  setup() {
-    return {
-      tree: null,
-      configProvider: inject('configProvider', defaultConfigProvider),
+  slots: ['icon', 'title', 'switcherIcon', 'titleRender'],
+  emits: [
+    'update:selectedKeys',
+    'update:checkedKeys',
+    'update:expandedKeys',
+    'expand',
+    'select',
+    'check',
+    'doubleclick',
+    'dblclick',
+  ],
+  TreeNode,
+  setup(props, { attrs, expose, emit, slots }) {
+    warning(
+      !(props.treeData === undefined && slots.default),
+      '`children` of Tree is deprecated. Please use `treeData` instead.',
+    );
+    const { prefixCls, direction, virtual } = useConfigInject('tree', props);
+    const treeRef = ref();
+    expose({
+      treeRef,
+      onNodeExpand: (...args) => {
+        treeRef.value?.onNodeExpand(...args);
+      },
+    });
+
+    watchEffect(() => {
+      devWarning(
+        props.replaceFields === undefined,
+        'Tree',
+        '`replaceFields` is deprecated, please use fieldNames instead',
+      );
+    });
+
+    const handleCheck: TreeProps['onCheck'] = (checkedObjOrKeys, eventObj) => {
+      emit('update:checkedKeys', checkedObjOrKeys);
+      emit('check', checkedObjOrKeys, eventObj);
+    };
+    const handleExpand: TreeProps['onExpand'] = (expandedKeys, eventObj) => {
+      emit('update:expandedKeys', expandedKeys);
+      emit('expand', expandedKeys, eventObj);
+    };
+    const handleSelect: TreeProps['onSelect'] = (selectedKeys, eventObj) => {
+      emit('update:selectedKeys', selectedKeys);
+      emit('select', selectedKeys, eventObj);
+    };
+    return () => {
+      const {
+        showIcon,
+        showLine,
+        switcherIcon = slots.switcherIcon,
+        icon = slots.icon,
+        blockNode,
+        checkable,
+        selectable,
+        fieldNames = props.replaceFields,
+        motion = props.openAnimation,
+        itemHeight = 20,
+      } = props;
+      const newProps = {
+        ...attrs,
+        ...props,
+        showLine: Boolean(showLine),
+        dropIndicatorRender,
+        fieldNames,
+        icon,
+        itemHeight,
+      };
+
+      return (
+        <VcTree
+          {...newProps}
+          virtual={virtual.value}
+          motion={motion}
+          ref={treeRef}
+          prefixCls={prefixCls.value}
+          class={classNames(
+            {
+              [`${prefixCls.value}-icon-hide`]: !showIcon,
+              [`${prefixCls.value}-block-node`]: blockNode,
+              [`${prefixCls.value}-unselectable`]: !selectable,
+              [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
+            },
+            attrs.class,
+          )}
+          direction={direction.value}
+          checkable={checkable}
+          selectable={selectable}
+          switcherIcon={(nodeProps: AntTreeNodeProps) =>
+            renderSwitcherIcon(prefixCls.value, switcherIcon, showLine, nodeProps)
+          }
+          onCheck={handleCheck}
+          onExpand={handleExpand}
+          onSelect={handleSelect}
+          v-slots={{
+            ...slots,
+            checkable: () => <span class={`${prefixCls.value}-checkbox-inner`} />,
+          }}
+          children={filterEmpty(slots.default?.())}
+        ></VcTree>
+      );
     };
   },
-  TreeNode,
-  methods: {
-    renderSwitcherIcon(prefixCls: string, switcherIcon: VNode, { isLeaf, loading, expanded }) {
-      const { showLine } = this.$props;
-      if (loading) {
-        return <LoadingOutlined class={`${prefixCls}-switcher-loading-icon`} />;
-      }
-
-      if (isLeaf) {
-        return showLine ? <FileOutlined class={`${prefixCls}-switcher-line-icon`} /> : null;
-      }
-      const switcherCls = `${prefixCls}-switcher-icon`;
-      if (switcherIcon) {
-        return cloneElement(switcherIcon, {
-          class: switcherCls,
-        });
-      }
-      return showLine ? (
-        expanded ? (
-          <MinusSquareOutlined class={`${prefixCls}-switcher-line-icon`} />
-        ) : (
-          <PlusSquareOutlined class={`${prefixCls}-switcher-line-icon`} />
-        )
-      ) : (
-        <CaretDownFilled class={switcherCls} />
-      );
-    },
-    updateTreeData(treeData: TreeDataItem[]) {
-      const { $slots } = this;
-      const defaultFields = { children: 'children', title: 'title', key: 'key' };
-      const replaceFields = { ...defaultFields, ...this.$props.replaceFields };
-      return treeData.map(item => {
-        const key = item[replaceFields.key];
-        const children = item[replaceFields.children];
-        const { slots = {}, class: cls, style, ...restProps } = item;
-        const treeNodeProps = {
-          ...restProps,
-          icon: $slots[slots.icon] || restProps.icon,
-          switcherIcon: $slots[slots.switcherIcon] || restProps.switcherIcon,
-          title: $slots[slots.title] || $slots.title || restProps[replaceFields.title],
-          dataRef: item,
-          key,
-          class: cls,
-          style,
-        };
-        if (children) {
-          return { ...treeNodeProps, children: this.updateTreeData(children) };
-        }
-        return treeNodeProps;
-      });
-    },
-    setTreeRef(node: VNode) {
-      this.tree = node;
-    },
-    handleCheck(checkedObj: (number | string)[], eventObj: CheckEvent) {
-      this.$emit('update:checkedKeys', checkedObj);
-      this.$emit('check', checkedObj, eventObj);
-    },
-    handleExpand(expandedKeys: (number | string)[], eventObj: ExpendEvent) {
-      this.$emit('update:expandedKeys', expandedKeys);
-      this.$emit('expand', expandedKeys, eventObj);
-    },
-    handleSelect(selectedKeys: (number | string)[], eventObj: SelectEvent) {
-      this.$emit('update:selectedKeys', selectedKeys);
-      this.$emit('select', selectedKeys, eventObj);
-    },
-  },
-  render() {
-    const props = getOptionProps(this);
-    const { prefixCls: customizePrefixCls, showIcon, treeNodes, blockNode } = props;
-    const getPrefixCls = this.configProvider.getPrefixCls;
-    const prefixCls = getPrefixCls('tree', customizePrefixCls);
-    const switcherIcon = getComponent(this, 'switcherIcon');
-    const checkable = props.checkable;
-    let treeData = props.treeData || treeNodes;
-    if (treeData) {
-      treeData = this.updateTreeData(treeData);
-    }
-    const { class: className, ...restAttrs } = this.$attrs;
-    const vcTreeProps = {
-      ...props,
-      prefixCls,
-      checkable: checkable ? <span class={`${prefixCls}-checkbox-inner`} /> : checkable,
-      children: getSlot(this),
-      switcherIcon: nodeProps => this.renderSwitcherIcon(prefixCls, switcherIcon, nodeProps),
-      ref: this.setTreeRef,
-      ...restAttrs,
-      class: classNames(className, {
-        [`${prefixCls}-icon-hide`]: !showIcon,
-        [`${prefixCls}-block-node`]: blockNode,
-      }),
-      onCheck: this.handleCheck,
-      onExpand: this.handleExpand,
-      onSelect: this.handleSelect,
-    } as Record<string, any>;
-    if (treeData) {
-      vcTreeProps.treeData = treeData;
-    }
-    return <VcTree {...vcTreeProps} __propsSymbol__={[]} />;
-  },
 });
diff --git a/components/tree/__tests__/util.test.js b/components/tree/__tests__/util.test.js
index 6d52f397f..e3baca483 100644
--- a/components/tree/__tests__/util.test.js
+++ b/components/tree/__tests__/util.test.js
@@ -1,43 +1,45 @@
-import { mount } from '@vue/test-utils';
-import Tree from '../index';
-import { calcRangeKeys } from '../util';
-
-const TreeNode = Tree.TreeNode;
+import { calcRangeKeys } from '../utils/dictUtil';
 
 describe('Tree util', () => {
-  it('calc range keys', () => {
-    const wrapper = mount({
-      render() {
-        return (
-          <Tree>
-            <TreeNode key="0-0">
-              <TreeNode key="0-0-0" />
-              <TreeNode key="0-0-1" />
-            </TreeNode>
-            <TreeNode key="0-1">
-              <TreeNode key="0-1-0" />
-              <TreeNode key="0-1-1" />
-            </TreeNode>
-            <TreeNode key="0-2">
-              <TreeNode key="0-2-0">
-                <TreeNode key="0-2-0-0" />
-                <TreeNode key="0-2-0-1" />
-                <TreeNode key="0-2-0-2" />
-              </TreeNode>
-            </TreeNode>
-          </Tree>
-        );
+  describe('calcRangeKeys', () => {
+    const treeData = [
+      { key: '0-0', children: [{ key: '0-0-0' }, { key: '0-0-1' }] },
+      { key: '0-1', children: [{ key: '0-1-0' }, { key: '0-1-1' }] },
+      {
+        key: '0-2',
+        children: [
+          { key: '0-2-0', children: [{ key: '0-2-0-0' }, { key: '0-2-0-1' }, { key: '0-2-0-2' }] },
+        ],
       },
+    ];
+
+    it('calc range keys', () => {
+      const keys = calcRangeKeys({
+        treeData,
+        expandedKeys: ['0-0', '0-2', '0-2-0'],
+        startKey: '0-2-0-1',
+        endKey: '0-0-0',
+      });
+      const target = ['0-0-0', '0-0-1', '0-1', '0-2', '0-2-0', '0-2-0-0', '0-2-0-1'];
+      expect(keys.sort()).toEqual(target.sort());
     });
 
-    const treeWrapper = wrapper.findComponent({ name: 'ATree' });
-    const keys = calcRangeKeys(
-      treeWrapper.vm.$slots.default(),
-      ['0-0', '0-2', '0-2-0'],
-      '0-2-0-1',
-      '0-0-0',
-    );
-    const target = ['0-0-0', '0-0-1', '0-1', '0-2', '0-2-0', '0-2-0-0', '0-2-0-1'];
-    expect(keys.sort()).toEqual(target.sort());
+    it('return startKey when startKey === endKey', () => {
+      const keys = calcRangeKeys({
+        treeData,
+        expandedKeys: ['0-0', '0-2', '0-2-0'],
+        startKey: '0-0-0',
+        endKey: '0-0-0',
+      });
+      expect(keys).toEqual(['0-0-0']);
+    });
+
+    it('return empty array without startKey and endKey', () => {
+      const keys = calcRangeKeys({
+        treeData,
+        expandedKeys: ['0-0', '0-2', '0-2-0'],
+      });
+      expect(keys).toEqual([]);
+    });
   });
 });
diff --git a/components/tree/breakchange.md b/components/tree/breakchange.md
new file mode 100644
index 000000000..b3b9e2fa0
--- /dev/null
+++ b/components/tree/breakchange.md
@@ -0,0 +1 @@
+title 的渲染逻辑
diff --git a/components/tree/index.tsx b/components/tree/index.tsx
index 446ceb119..80bcaf7ba 100644
--- a/components/tree/index.tsx
+++ b/components/tree/index.tsx
@@ -2,6 +2,25 @@ import type { App, Plugin } from 'vue';
 import Tree from './Tree';
 import DirectoryTree from './DirectoryTree';
 
+export type { EventDataNode, DataNode } from '../vc-tree/interface';
+
+export type {
+  TreeProps,
+  AntTreeNodeMouseEvent,
+  AntTreeNodeExpandedEvent,
+  AntTreeNodeCheckedEvent,
+  AntTreeNodeSelectedEvent,
+  AntTreeNodeDragEnterEvent,
+  AntTreeNodeDropEvent,
+  AntdTreeNodeAttribute,
+  TreeDataItem,
+} from './Tree';
+
+export type {
+  ExpandAction as DirectoryTreeExpandAction,
+  DirectoryTreeProps,
+} from './DirectoryTree';
+
 Tree.TreeNode.name = 'ATreeNode';
 Tree.DirectoryTree = DirectoryTree;
 /* istanbul ignore next */
diff --git a/components/tree/style/directory.less b/components/tree/style/directory.less
index 91caf33c0..51baf617c 100644
--- a/components/tree/style/directory.less
+++ b/components/tree/style/directory.less
@@ -2,93 +2,70 @@
 
 @tree-prefix-cls: ~'@{ant-prefix}-tree';
 
-.@{tree-prefix-cls} {
-  &.@{tree-prefix-cls}-directory {
+.@{tree-prefix-cls}.@{tree-prefix-cls}-directory {
+  // ================== TreeNode ==================
+  .@{tree-prefix-cls}-treenode {
     position: relative;
 
-    // Stretch selector width
-    > li,
-    .@{tree-prefix-cls}-child-tree > li {
-      span {
-        &.@{tree-prefix-cls}-switcher {
-          position: relative;
-          z-index: 1;
+    // Hover color
+    &::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 4px;
+      left: 0;
+      transition: background-color 0.3s;
+      content: '';
+      pointer-events: none;
+    }
 
-          &.@{tree-prefix-cls}-switcher-noop {
-            pointer-events: none;
-          }
-        }
+    &:hover {
+      &::before {
+        background: @item-hover-bg;
+      }
+    }
 
-        &.@{tree-prefix-cls}-checkbox {
-          position: relative;
-          z-index: 1;
-        }
+    // Elements
+    > * {
+      z-index: 1;
+    }
 
-        &.@{tree-prefix-cls}-node-content-wrapper {
-          border-radius: 0;
-          user-select: none;
+    // >>> Switcher
+    .@{tree-prefix-cls}-switcher {
+      transition: color 0.3s;
+    }
 
-          &:hover {
-            background: transparent;
+    // >>> Title
+    .@{tree-prefix-cls}-node-content-wrapper {
+      border-radius: 0;
+      user-select: none;
 
-            &::before {
-              background: @item-hover-bg;
-            }
-          }
-
-          &.@{tree-prefix-cls}-node-selected {
-            color: @tree-directory-selected-color;
-            background: transparent;
-          }
-
-          &::before {
-            position: absolute;
-            right: 0;
-            left: 0;
-            height: @tree-title-height;
-            transition: all 0.3s;
-            content: '';
-          }
-
-          > span {
-            position: relative;
-            z-index: 1;
-          }
-        }
+      &:hover {
+        background: transparent;
       }
 
-      &.@{tree-prefix-cls}-treenode-selected {
-        > span {
-          &.@{tree-prefix-cls}-switcher {
-            color: @tree-directory-selected-color;
-          }
+      &.@{tree-prefix-cls}-node-selected {
+        color: @tree-directory-selected-color;
+        background: transparent;
+      }
+    }
 
-          &.@{tree-prefix-cls}-checkbox {
-            .@{tree-prefix-cls}-checkbox-inner {
-              border-color: @primary-color;
-            }
+    // ============= Selected =============
+    &-selected {
+      &:hover::before,
+      &::before {
+        background: @tree-directory-selected-bg;
+      }
 
-            &.@{tree-prefix-cls}-checkbox-checked {
-              &::after {
-                border-color: @checkbox-check-color;
-              }
+      // >>> Switcher
+      .@{tree-prefix-cls}-switcher {
+        color: @tree-directory-selected-color;
+      }
 
-              .@{tree-prefix-cls}-checkbox-inner {
-                background: @checkbox-check-color;
-
-                &::after {
-                  border-color: @primary-color;
-                }
-              }
-            }
-          }
-
-          &.@{tree-prefix-cls}-node-content-wrapper {
-            &::before {
-              background: @tree-directory-selected-bg;
-            }
-          }
-        }
+      // >>> Title
+      .@{tree-prefix-cls}-node-content-wrapper {
+        color: @tree-directory-selected-color;
+        background: transparent;
       }
     }
   }
diff --git a/components/tree/style/index.less b/components/tree/style/index.less
index 31f57bf09..a2c0067f2 100644
--- a/components/tree/style/index.less
+++ b/components/tree/style/index.less
@@ -5,276 +5,12 @@
 @import './directory';
 
 @tree-prefix-cls: ~'@{ant-prefix}-tree';
-@tree-showline-icon-color: @text-color-secondary;
-@tree-node-padding: 4px;
+@tree-node-prefix-cls: ~'@{tree-prefix-cls}-treenode';
 
 .antCheckboxFn(@checkbox-prefix-cls: ~'@{ant-prefix}-tree-checkbox');
 
 .@{tree-prefix-cls} {
-  /* see https://github.com/ant-design/ant-design/issues/16259 */
-  &-checkbox-checked::after {
-    position: absolute;
-    top: 16.67%;
-    left: 0;
-    width: 100%;
-    height: 66.67%;
-  }
-
-  .reset-component();
-
-  margin: 0;
-  padding: 0;
-
-  ol,
-  ul {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-
-  li {
-    margin: 0;
-    padding: @tree-node-padding 0;
-    white-space: nowrap;
-    list-style: none;
-    outline: 0;
-    span[draggable],
-    span[draggable='true'] {
-      line-height: @tree-title-height - 4px;
-      border-top: 2px transparent solid;
-      border-bottom: 2px transparent solid;
-      user-select: none;
-      /* Required to make elements draggable in old WebKit */
-      -khtml-user-drag: element;
-      -webkit-user-drag: element;
-    }
-    &.drag-over {
-      > span[draggable] {
-        color: white;
-        background-color: @primary-color;
-        opacity: 0.8;
-      }
-    }
-    &.drag-over-gap-top {
-      > span[draggable] {
-        border-top-color: @primary-color;
-      }
-    }
-    &.drag-over-gap-bottom {
-      > span[draggable] {
-        border-bottom-color: @primary-color;
-      }
-    }
-    &.filter-node {
-      > span {
-        color: @highlight-color !important;
-        font-weight: 500 !important;
-      }
-    }
-
-    // When node is loading
-    &.@{tree-prefix-cls}-treenode-loading {
-      span {
-        &.@{tree-prefix-cls}-switcher {
-          &.@{tree-prefix-cls}-switcher_open,
-          &.@{tree-prefix-cls}-switcher_close {
-            .@{tree-prefix-cls}-switcher-loading-icon {
-              position: absolute;
-              left: 0;
-              display: inline-block;
-              width: 24px;
-              height: @tree-title-height;
-              color: @primary-color;
-              font-size: 14px;
-              transform: none;
-              svg {
-                position: absolute;
-                top: 0;
-                right: 0;
-                bottom: 0;
-                left: 0;
-                margin: auto;
-              }
-            }
-
-            :root &::after {
-              opacity: 0;
-            }
-          }
-        }
-      }
-    }
-
-    ul {
-      margin: 0;
-      padding: 0 0 0 @tree-child-padding;
-    }
-    .@{tree-prefix-cls}-node-content-wrapper {
-      display: inline-block;
-      height: @tree-title-height;
-      margin: 0;
-      padding: 0 5px;
-      color: @text-color;
-      line-height: @tree-title-height;
-      text-decoration: none;
-      vertical-align: top;
-      border-radius: @border-radius-sm;
-      cursor: pointer;
-      transition: all 0.3s;
-      &:hover {
-        background-color: @tree-node-hover-bg;
-      }
-      &.@{tree-prefix-cls}-node-selected {
-        background-color: @tree-node-selected-bg;
-      }
-    }
-    span {
-      &.@{tree-prefix-cls}-checkbox {
-        top: initial;
-        height: @tree-title-height;
-        margin: 0 4px 0 2px;
-        padding: ((@tree-title-height - 16px) / 2) 0;
-      }
-      &.@{tree-prefix-cls}-switcher,
-      &.@{tree-prefix-cls}-iconEle {
-        display: inline-block;
-        width: 24px;
-        height: @tree-title-height;
-        margin: 0;
-        line-height: @tree-title-height;
-        text-align: center;
-        vertical-align: top;
-        border: 0 none;
-        outline: none;
-        cursor: pointer;
-      }
-
-      &.@{tree-prefix-cls}-iconEle:empty {
-        display: none;
-      }
-
-      &.@{tree-prefix-cls}-switcher {
-        position: relative;
-
-        &.@{tree-prefix-cls}-switcher-noop {
-          cursor: default;
-        }
-        &.@{tree-prefix-cls}-switcher_open {
-          .antTreeSwitcherIcon();
-        }
-        &.@{tree-prefix-cls}-switcher_close {
-          .antTreeSwitcherIcon();
-          .@{tree-prefix-cls}-switcher-icon {
-            svg {
-              transform: rotate(-90deg);
-            }
-          }
-        }
-      }
-    }
-    &:last-child > span {
-      &.@{tree-prefix-cls}-switcher,
-      &.@{tree-prefix-cls}-iconEle {
-        &::before {
-          display: none;
-        }
-      }
-    }
-  }
-
-  > li {
-    &:first-child {
-      padding-top: 7px;
-    }
-    &:last-child {
-      padding-bottom: 7px;
-    }
-  }
-  &-child-tree {
-    // https://github.com/ant-design/ant-design/issues/14958
-    > li {
-      // Provide additional padding between top child node and parent node
-      &:first-child {
-        padding-top: 2 * @tree-node-padding;
-      }
-
-      // Hide additional padding between last child node and next parent node
-      &:last-child {
-        padding-bottom: 0;
-      }
-    }
-  }
-  li&-treenode-disabled {
-    > span:not(.@{tree-prefix-cls}-switcher),
-    > .@{tree-prefix-cls}-node-content-wrapper,
-    > .@{tree-prefix-cls}-node-content-wrapper span {
-      color: @disabled-color;
-      cursor: not-allowed;
-    }
-    > .@{tree-prefix-cls}-node-content-wrapper:hover {
-      background: transparent;
-    }
-  }
-  &-icon__open {
-    margin-right: 2px;
-    vertical-align: top;
-  }
-  &-icon__close {
-    margin-right: 2px;
-    vertical-align: top;
-  }
-  // Tree with line
-  &&-show-line {
-    li {
-      position: relative;
-      span {
-        &.@{tree-prefix-cls}-switcher {
-          color: @tree-showline-icon-color;
-          background: @component-background;
-          &.@{tree-prefix-cls}-switcher-noop {
-            .antTreeShowLineIcon('tree-doc-icon');
-          }
-          &.@{tree-prefix-cls}-switcher_open {
-            .antTreeShowLineIcon('tree-showline-open-icon');
-          }
-          &.@{tree-prefix-cls}-switcher_close {
-            .antTreeShowLineIcon('tree-showline-close-icon');
-          }
-        }
-      }
-    }
-    li:not(:last-child)::before {
-      position: absolute;
-      left: 12px;
-      width: 1px;
-      height: 100%;
-      height: calc(100% - 22px); // Remove additional height if support
-      margin: 22px 0 0;
-      border-left: 1px solid @border-color-base;
-      content: ' ';
-    }
-  }
-
-  &.@{tree-prefix-cls}-icon-hide {
-    .@{tree-prefix-cls}-treenode-loading {
-      .@{tree-prefix-cls}-iconEle {
-        display: none;
-      }
-    }
-  }
-
-  &.@{tree-prefix-cls}-block-node {
-    li {
-      .@{tree-prefix-cls}-node-content-wrapper {
-        width: ~'calc(100% - 24px)';
-      }
-      span {
-        &.@{tree-prefix-cls}-checkbox {
-          + .@{tree-prefix-cls}-node-content-wrapper {
-            width: ~'calc(100% - 46px)';
-          }
-        }
-      }
-    }
-  }
+  .antTreeFn(@tree-prefix-cls);
 }
+
+@import './rtl';
diff --git a/components/tree/style/index.ts b/components/tree/style/index.tsx
similarity index 100%
rename from components/tree/style/index.ts
rename to components/tree/style/index.tsx
diff --git a/components/tree/style/mixin.less b/components/tree/style/mixin.less
index 929cecdee..197c20662 100644
--- a/components/tree/style/mixin.less
+++ b/components/tree/style/mixin.less
@@ -1,29 +1,274 @@
 @import '../../style/mixins/index';
 
 @tree-prefix-cls: ~'@{ant-prefix}-tree';
-@tree-select-prefix-cls: ~'@{ant-prefix}-select';
+@tree-node-prefix-cls: ~'@{tree-prefix-cls}-treenode';
+@select-tree-prefix-cls: ~'@{ant-prefix}-select-tree';
+@tree-motion: ~'@{ant-prefix}-motion-collapse';
+@tree-node-padding: (@padding-xs / 2);
+@tree-node-hightlight-color: inherit;
 
 .antTreeSwitcherIcon(@type: 'tree-default-open-icon') {
   .@{tree-prefix-cls}-switcher-icon,
-  .@{tree-select-prefix-cls}-switcher-icon {
-    .iconfont-size-under-12px(10px);
-
+  .@{select-tree-prefix-cls}-switcher-icon {
     display: inline-block;
-    font-weight: bold;
+    font-size: 10px;
+    vertical-align: baseline;
     svg {
       transition: transform 0.3s;
     }
   }
 }
 
-.antTreeShowLineIcon(@type) {
-  .@{tree-prefix-cls}-switcher-icon,
-  .@{tree-select-prefix-cls}-switcher-icon {
-    display: inline-block;
-    font-weight: normal;
-    font-size: 12px;
-    svg {
-      transition: transform 0.3s;
+.drop-indicator() {
+  .@{tree-prefix-cls}-drop-indicator {
+    position: absolute;
+    // it should displayed over the following node
+    z-index: 1;
+    height: 2px;
+    background-color: @primary-color;
+    border-radius: 1px;
+    pointer-events: none;
+    &::after {
+      position: absolute;
+      top: -3px;
+      left: -6px;
+      width: 8px;
+      height: 8px;
+      background-color: transparent;
+      border: 2px solid @primary-color;
+      border-radius: 50%;
+      content: '';
+    }
+  }
+}
+
+.antTreeFn(@custom-tree-prefix-cls) {
+  @custom-tree-node-prefix-cls: ~'@{custom-tree-prefix-cls}-treenode';
+  .reset-component();
+  background: @tree-bg;
+  border-radius: @border-radius-base;
+  transition: background-color 0.3s;
+
+  &-focused:not(:hover):not(&-active-focused) {
+    background: @primary-1;
+  }
+
+  // =================== Virtual List ===================
+  &-list-holder-inner {
+    align-items: flex-start;
+  }
+
+  &.@{custom-tree-prefix-cls}-block-node {
+    .@{custom-tree-prefix-cls}-list-holder-inner {
+      align-items: stretch;
+
+      // >>> Title
+      .@{custom-tree-prefix-cls}-node-content-wrapper {
+        flex: auto;
+      }
+    }
+  }
+
+  // ===================== TreeNode =====================
+  .@{custom-tree-node-prefix-cls} {
+    display: flex;
+    align-items: flex-start;
+    padding: 0 0 @tree-node-padding 0;
+    outline: none;
+    // Disabled
+    &-disabled {
+      // >>> Title
+      .@{custom-tree-prefix-cls}-node-content-wrapper {
+        color: @disabled-color;
+        cursor: not-allowed;
+
+        &:hover {
+          background: transparent;
+        }
+      }
+    }
+
+    &-active .@{custom-tree-prefix-cls}-node-content-wrapper {
+      background: @tree-node-hover-bg;
+    }
+
+    &:not(&-disabled).filter-node .@{custom-tree-prefix-cls}-title {
+      color: @tree-node-hightlight-color;
+      font-weight: 500;
+    }
+  }
+
+  // >>> Indent
+  &-indent {
+    align-self: stretch;
+    white-space: nowrap;
+    user-select: none;
+
+    &-unit {
+      display: inline-block;
+      width: @tree-title-height;
+    }
+  }
+
+  // >>> Switcher
+  &-switcher {
+    .antTreeSwitcherIcon();
+    position: relative;
+    flex: none;
+    align-self: stretch;
+    width: @tree-title-height;
+    margin: 0;
+    line-height: @tree-title-height;
+    text-align: center;
+    cursor: pointer;
+    user-select: none;
+
+    &-noop {
+      cursor: default;
+    }
+
+    &_close {
+      .@{custom-tree-prefix-cls}-switcher-icon {
+        svg {
+          transform: rotate(-90deg);
+        }
+      }
+    }
+
+    &-loading-icon {
+      color: @primary-color;
+    }
+
+    &-leaf-line {
+      position: relative;
+      z-index: 1;
+      display: inline-block;
+      width: 100%;
+      height: 100%;
+      &::before {
+        position: absolute;
+        top: 0;
+        bottom: -@tree-node-padding;
+        margin-left: -1px;
+        border-left: 1px solid @normal-color;
+        content: ' ';
+      }
+      &::after {
+        position: absolute;
+        width: @tree-title-height - 14px;
+        height: @tree-title-height - 10px;
+        margin-left: -1px;
+        border-bottom: 1px solid @normal-color;
+        content: ' ';
+      }
+    }
+  }
+
+  // >>> Checkbox
+  &-checkbox {
+    top: initial;
+    margin: ((@tree-title-height - @checkbox-size) / 2) 8px 0 0;
+  }
+
+  // >>> Title
+  & &-node-content-wrapper {
+    position: relative;
+    z-index: auto;
+    min-height: @tree-title-height;
+    margin: 0;
+    padding: 0 4px;
+    color: inherit;
+    line-height: @tree-title-height;
+    background: transparent;
+    border-radius: @border-radius-base;
+    cursor: pointer;
+    transition: all 0.3s, border 0s, line-height 0s, box-shadow 0s;
+
+    &:hover {
+      background-color: @tree-node-hover-bg;
+    }
+
+    &.@{custom-tree-prefix-cls}-node-selected {
+      background-color: @tree-node-selected-bg;
+    }
+
+    // Icon
+    .@{custom-tree-prefix-cls}-iconEle {
+      display: inline-block;
+      width: @tree-title-height;
+      height: @tree-title-height;
+      line-height: @tree-title-height;
+      text-align: center;
+      vertical-align: top;
+      &:empty {
+        display: none;
+      }
+    }
+  }
+
+  // https://github.com/ant-design/ant-design/issues/28217
+  &-unselectable &-node-content-wrapper:hover {
+    background-color: transparent;
+  }
+
+  // ==================== Draggable =====================
+  &-node-content-wrapper[draggable='true'] {
+    line-height: @tree-title-height;
+    user-select: none;
+
+    .drop-indicator();
+  }
+
+  .@{custom-tree-node-prefix-cls}.drop-container {
+    > [draggable] {
+      box-shadow: 0 0 0 2px @primary-color;
+    }
+  }
+
+  // ==================== Show Line =====================
+  &-show-line {
+    // ================ Indent lines ================
+    .@{custom-tree-prefix-cls}-indent {
+      &-unit {
+        position: relative;
+        height: 100%;
+
+        &::before {
+          position: absolute;
+          top: 0;
+          right: (@tree-title-height / 2);
+          bottom: -@tree-node-padding;
+          border-right: 1px solid @border-color-base;
+          content: '';
+        }
+
+        &-end {
+          &::before {
+            display: none;
+          }
+        }
+      }
+    }
+
+    // ============== Cover Background ==============
+    .@{custom-tree-prefix-cls}-switcher {
+      background: @component-background;
+
+      &-line-icon {
+        vertical-align: -0.225em;
+      }
+    }
+  }
+}
+
+.@{tree-node-prefix-cls}-leaf-last {
+  .@{tree-prefix-cls}-switcher {
+    &-leaf-line {
+      &::before {
+        top: auto !important;
+        bottom: auto !important;
+        height: @tree-title-height - 10px !important;
+      }
     }
   }
 }
diff --git a/components/tree/style/rtl.less b/components/tree/style/rtl.less
new file mode 100644
index 000000000..bc985c956
--- /dev/null
+++ b/components/tree/style/rtl.less
@@ -0,0 +1,72 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+@import '../../checkbox/style/mixin';
+
+@tree-prefix-cls: ~'@{ant-prefix}-tree';
+@select-tree-prefix-cls: ~'@{ant-prefix}-select-tree';
+@tree-node-prefix-cls: ~'@{tree-prefix-cls}-treenode';
+
+.@{tree-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+    .@{tree-prefix-cls}-node-content-wrapper[draggable='true'] {
+      .@{tree-prefix-cls}-drop-indicator {
+        &::after {
+          right: -6px;
+          left: unset;
+        }
+      }
+    }
+  }
+
+  // ===================== TreeNode =====================
+  .@{tree-node-prefix-cls} {
+    &-rtl {
+      direction: rtl;
+    }
+  }
+
+  // >>> Switcher
+  &-switcher {
+    &_close {
+      .@{tree-prefix-cls}-switcher-icon {
+        svg {
+          .@{tree-prefix-cls}-rtl & {
+            transform: rotate(90deg);
+          }
+        }
+      }
+    }
+  }
+  // ==================== Show Line =====================
+  &-show-line {
+    // ================ Indent lines ================
+    .@{tree-prefix-cls}-indent {
+      &-unit {
+        &::before {
+          .@{tree-prefix-cls}-rtl& {
+            right: auto;
+            left: -(@tree-title-height / 2) - 1px;
+            border-right: none;
+            border-left: 1px solid @border-color-base;
+          }
+        }
+      }
+    }
+  }
+  // >>> Checkbox
+  &-checkbox {
+    .@{tree-prefix-cls}-rtl& {
+      margin: ((@tree-title-height - @checkbox-size) / 2) 0 0 8px;
+    }
+  }
+}
+
+.@{select-tree-prefix-cls} {
+  // >>> Checkbox
+  &-checkbox {
+    .@{tree-prefix-cls}-select-dropdown-rtl & {
+      margin: ((@tree-title-height - @checkbox-size) / 2) 0 0 8px;
+    }
+  }
+}
diff --git a/components/tree/util.ts b/components/tree/util.ts
deleted file mode 100644
index b4fd83bc7..000000000
--- a/components/tree/util.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-import type { VNode } from 'vue';
-import { getNodeChildren, convertTreeToEntities } from '../vc-tree/src/util';
-import { getSlot } from '../_util/props-util';
-import type { TreeDataItem } from './Tree';
-
-enum Record {
-  None,
-  Start,
-  End,
-}
-
-type TreeKey = string | number;
-
-// TODO: Move this logic into `rc-tree`
-function traverseNodesKey(rootChildren: VNode[], callback?: Function) {
-  const nodeList = getNodeChildren(rootChildren) || [];
-
-  function processNode(node: VNode) {
-    const { key } = node;
-    const children = getSlot(node);
-    if (callback(key, node) !== false) {
-      traverseNodesKey(children, callback);
-    }
-  }
-
-  nodeList.forEach(processNode);
-}
-
-export function getFullKeyList(children: VNode[]) {
-  const { keyEntities } = convertTreeToEntities(children);
-  return [...keyEntities.keys()];
-}
-
-/** 计算选中范围，只考虑expanded情况以优化性能 */
-export function calcRangeKeys(
-  rootChildren: VNode[],
-  expandedKeys: TreeKey[],
-  startKey: TreeKey,
-  endKey: TreeKey,
-) {
-  const keys = [];
-  let record = Record.None;
-
-  if (startKey && startKey === endKey) {
-    return [startKey];
-  }
-  if (!startKey || !endKey) {
-    return [];
-  }
-
-  function matchKey(key: TreeKey) {
-    return key === startKey || key === endKey;
-  }
-
-  traverseNodesKey(rootChildren, (key: TreeKey) => {
-    if (record === Record.End) {
-      return false;
-    }
-
-    if (matchKey(key)) {
-      // Match test
-      keys.push(key);
-
-      if (record === Record.None) {
-        record = Record.Start;
-      } else if (record === Record.Start) {
-        record = Record.End;
-        return false;
-      }
-    } else if (record === Record.Start) {
-      // Append selection
-      keys.push(key);
-    }
-
-    if (expandedKeys.indexOf(key) === -1) {
-      return false;
-    }
-
-    return true;
-  });
-
-  return keys;
-}
-
-export function convertDirectoryKeysToNodes(rootChildren: VNode[], keys: TreeKey[]) {
-  const restKeys = [...keys];
-  const nodes = [];
-  traverseNodesKey(rootChildren, (key: TreeKey, node: VNode) => {
-    const index = restKeys.indexOf(key);
-    if (index !== -1) {
-      nodes.push(node);
-      restKeys.splice(index, 1);
-    }
-
-    return !!restKeys.length;
-  });
-  return nodes;
-}
-
-export function getFullKeyListByTreeData(treeData: TreeDataItem[], replaceFields: any = {}) {
-  let keys = [];
-  const { key = 'key', children = 'children' } = replaceFields;
-  (treeData || []).forEach((item: TreeDataItem) => {
-    keys.push(item[key]);
-    if (item[children]) {
-      keys = [...keys, ...getFullKeyListByTreeData(item[children], replaceFields)];
-    }
-  });
-  return keys;
-}
diff --git a/components/tree/utils/dictUtil.ts b/components/tree/utils/dictUtil.ts
new file mode 100644
index 000000000..00b7285c6
--- /dev/null
+++ b/components/tree/utils/dictUtil.ts
@@ -0,0 +1,92 @@
+import type { DataNode, Key } from '../../vc-tree/interface';
+
+enum Record {
+  None,
+  Start,
+  End,
+}
+
+function traverseNodesKey(
+  treeData: DataNode[],
+  callback: (key: Key | number | null, node: DataNode) => boolean,
+) {
+  function processNode(dataNode: DataNode) {
+    const { key, children } = dataNode;
+    if (callback(key, dataNode) !== false) {
+      traverseNodesKey(children || [], callback);
+    }
+  }
+
+  treeData.forEach(processNode);
+}
+
+/** 计算选中范围，只考虑expanded情况以优化性能 */
+export function calcRangeKeys({
+  treeData,
+  expandedKeys,
+  startKey,
+  endKey,
+}: {
+  treeData: DataNode[];
+  expandedKeys: Key[];
+  startKey?: Key;
+  endKey?: Key;
+}): Key[] {
+  const keys: Key[] = [];
+  let record: Record = Record.None;
+
+  if (startKey && startKey === endKey) {
+    return [startKey];
+  }
+  if (!startKey || !endKey) {
+    return [];
+  }
+
+  function matchKey(key: Key) {
+    return key === startKey || key === endKey;
+  }
+
+  traverseNodesKey(treeData, (key: Key) => {
+    if (record === Record.End) {
+      return false;
+    }
+
+    if (matchKey(key)) {
+      // Match test
+      keys.push(key);
+
+      if (record === Record.None) {
+        record = Record.Start;
+      } else if (record === Record.Start) {
+        record = Record.End;
+        return false;
+      }
+    } else if (record === Record.Start) {
+      // Append selection
+      keys.push(key);
+    }
+
+    if (expandedKeys.indexOf(key) === -1) {
+      return false;
+    }
+
+    return true;
+  });
+
+  return keys;
+}
+
+export function convertDirectoryKeysToNodes(treeData: DataNode[], keys: Key[]) {
+  const restKeys: Key[] = [...keys];
+  const nodes: DataNode[] = [];
+  traverseNodesKey(treeData, (key: Key, node: DataNode) => {
+    const index = restKeys.indexOf(key);
+    if (index !== -1) {
+      nodes.push(node);
+      restKeys.splice(index, 1);
+    }
+
+    return !!restKeys.length;
+  });
+  return nodes;
+}
diff --git a/components/tree/utils/dropIndicator.tsx b/components/tree/utils/dropIndicator.tsx
new file mode 100644
index 000000000..848b6a8a7
--- /dev/null
+++ b/components/tree/utils/dropIndicator.tsx
@@ -0,0 +1,33 @@
+import type { CSSProperties } from 'vue';
+
+export const offset = 4;
+
+export default function dropIndicatorRender(props: {
+  dropPosition: -1 | 0 | 1;
+  dropLevelOffset: number;
+  indent: number;
+  prefixCls: string;
+  direction: 'ltr' | 'rtl';
+}) {
+  const { dropPosition, dropLevelOffset, prefixCls, indent, direction = 'ltr' } = props;
+  const startPosition = direction === 'ltr' ? 'left' : 'right';
+  const endPosition = direction === 'ltr' ? 'right' : 'left';
+  const style: CSSProperties = {
+    [startPosition]: `${-dropLevelOffset * indent + offset}px`,
+    [endPosition]: 0,
+  };
+  switch (dropPosition) {
+    case -1:
+      style.top = `${-3}px`;
+      break;
+    case 1:
+      style.bottom = `${-3}px`;
+      break;
+    default:
+      // dropPosition === 0
+      style.bottom = `${-3}px`;
+      style[startPosition] = `${indent + offset}px`;
+      break;
+  }
+  return <div style={style} class={`${prefixCls}-drop-indicator`} />;
+}
diff --git a/components/tree/utils/iconUtil.tsx b/components/tree/utils/iconUtil.tsx
new file mode 100644
index 000000000..14a3d2f43
--- /dev/null
+++ b/components/tree/utils/iconUtil.tsx
@@ -0,0 +1,57 @@
+import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
+import FileOutlined from '@ant-design/icons-vue/FileOutlined';
+import MinusSquareOutlined from '@ant-design/icons-vue/MinusSquareOutlined';
+import PlusSquareOutlined from '@ant-design/icons-vue/PlusSquareOutlined';
+import CaretDownFilled from '@ant-design/icons-vue/CaretDownFilled';
+import type { AntTreeNodeProps } from '../Tree';
+import { isValidElement } from '../../_util/props-util';
+
+import { cloneVNode } from 'vue';
+
+export default function renderSwitcherIcon(
+  prefixCls: string,
+  switcherIcon: any,
+  showLine: boolean | { showLeafIcon: boolean } | undefined,
+  props: AntTreeNodeProps,
+) {
+  const { isLeaf, expanded, loading } = props;
+  let icon = switcherIcon;
+  if (loading) {
+    return <LoadingOutlined class={`${prefixCls}-switcher-loading-icon`} />;
+  }
+  let showLeafIcon: boolean;
+  if (showLine && typeof showLine === 'object') {
+    showLeafIcon = showLine.showLeafIcon;
+  }
+  let defaultIcon = null;
+  const switcherCls = `${prefixCls}-switcher-icon`;
+  if (isLeaf) {
+    if (showLine) {
+      if (typeof showLine === 'object' && !showLeafIcon) {
+        defaultIcon = <span class={`${prefixCls}-switcher-leaf-line`} />;
+      } else {
+        defaultIcon = <FileOutlined class={`${prefixCls}-switcher-line-icon`} />;
+      }
+    }
+    return defaultIcon;
+  } else {
+    defaultIcon = <CaretDownFilled class={switcherCls} />;
+    if (showLine) {
+      defaultIcon = expanded ? (
+        <MinusSquareOutlined class={`${prefixCls}-switcher-line-icon`} />
+      ) : (
+        <PlusSquareOutlined class={`${prefixCls}-switcher-line-icon`} />
+      );
+    }
+  }
+
+  if (typeof switcherIcon === 'function') {
+    icon = switcherIcon({ ...props, defaultIcon, switcherCls });
+  } else if (isValidElement(icon)) {
+    icon = cloneVNode(icon, {
+      class: switcherCls,
+    });
+  }
+
+  return icon || defaultIcon;
+}
diff --git a/components/upload/Upload.tsx b/components/upload/Upload.tsx
index 4e1041d73..e90a8a537 100644
--- a/components/upload/Upload.tsx
+++ b/components/upload/Upload.tsx
@@ -13,7 +13,28 @@ import UploadList from './UploadList';
 import { UploadProps } from './interface';
 import { T, fileToObject, genPercentAdd, getFileItem, removeFileItem } from './utils';
 import { defineComponent, inject } from 'vue';
-import { getDataAndAria } from '../vc-tree/src/util';
+import { getDataAndAriaProps } from '../_util/util';
+
+export type UploadFileStatus = 'error' | 'success' | 'done' | 'uploading' | 'removed';
+export interface UploadFile<T = any> {
+  uid: string;
+  size?: number;
+  name: string;
+  fileName?: string;
+  lastModified?: number;
+  lastModifiedDate?: Date;
+  url?: string;
+  status?: UploadFileStatus;
+  percent?: number;
+  thumbUrl?: string;
+  originFileObj?: any;
+  response?: T;
+  error?: any;
+  linkProps?: any;
+  type?: string;
+  xhr?: T;
+  preview?: string;
+}
 
 export default defineComponent({
   name: 'AUpload',
@@ -185,7 +206,10 @@ export default defineComponent({
       if (result === false) {
         this.handleChange({
           file,
-          fileList: uniqBy(stateFileList.concat(fileList.map(fileToObject)), item => item.uid),
+          fileList: uniqBy(
+            stateFileList.concat(fileList.map(fileToObject)),
+            (item: UploadFile) => item.uid,
+          ),
         });
         return false;
       }
@@ -280,7 +304,7 @@ export default defineComponent({
         [`${prefixCls}-disabled`]: disabled,
       });
       return (
-        <span class={className} {...getDataAndAria(this.$attrs)}>
+        <span class={className} {...getDataAndAriaProps(this.$attrs)}>
           <div
             class={dragCls}
             onDrop={this.onFileDrop}
diff --git a/components/vc-mentions/src/Mentions.tsx b/components/vc-mentions/src/Mentions.tsx
index ec291fe67..ee6a99042 100644
--- a/components/vc-mentions/src/Mentions.tsx
+++ b/components/vc-mentions/src/Mentions.tsx
@@ -114,6 +114,9 @@ export default defineComponent({
       const { measureText: prevMeasureText, measuring } = state;
       const { prefix, validateSearch } = props;
       const target = event.target as HTMLTextAreaElement;
+      if (target.composing) {
+        return;
+      }
       const selectionStartText = getBeforeSelectionText(target);
       const { location: measureIndex, prefix: measurePrefix } = getLastMeasureIndex(
         selectionStartText,
diff --git a/components/vc-select/OptionList.tsx b/components/vc-select/OptionList.tsx
index be343cc2b..209528205 100644
--- a/components/vc-select/OptionList.tsx
+++ b/components/vc-select/OptionList.tsx
@@ -5,7 +5,7 @@ import classNames from '../_util/classNames';
 import pickAttrs from '../_util/pickAttrs';
 import { isValidElement } from '../_util/props-util';
 import createRef from '../_util/createRef';
-import type { PropType, VNodeChild } from 'vue';
+import type { PropType } from 'vue';
 import { computed, defineComponent, nextTick, reactive, watch } from 'vue';
 import List from '../vc-virtual-list/List';
 import type {
@@ -16,18 +16,24 @@ import type {
 } from './interface';
 import type { RawValueType, FlattenOptionsType } from './interface/generator';
 import useMemo from '../_util/hooks/useMemo';
-export interface OptionListProps {
+
+export interface RefOptionListProps {
+  onKeydown: (e?: KeyboardEvent) => void;
+  onKeyup: (e?: KeyboardEvent) => void;
+  scrollTo?: (index: number) => void;
+}
+export interface OptionListProps<OptionType extends object> {
   prefixCls: string;
   id: string;
-  options: SelectOptionsType;
-  flattenOptions: FlattenOptionsType<SelectOptionsType>;
+  options: OptionType[];
+  flattenOptions: FlattenOptionsType<OptionType>;
   height: number;
   itemHeight: number;
   values: Set<RawValueType>;
   multiple: boolean;
   open: boolean;
   defaultActiveFirstOption?: boolean;
-  notFoundContent?: VNodeChild;
+  notFoundContent?: any;
   menuItemSelectedIcon?: RenderNode;
   childrenAsData: boolean;
   searchValue: string;
@@ -74,7 +80,7 @@ const OptionListProps = {
  * Using virtual list of option display.
  * Will fallback to dom if use customize render.
  */
-const OptionList = defineComponent<OptionListProps, { state?: any }>({
+const OptionList = defineComponent<OptionListProps<SelectOptionsType[number]>, { state?: any }>({
   name: 'OptionList',
   inheritAttrs: false,
   slots: ['option'],
@@ -147,20 +153,22 @@ const OptionList = defineComponent<OptionListProps, { state?: any }>({
     watch(
       () => props.open,
       () => {
-        nextTick(() => {
-          if (!props.multiple && props.open && props.values.size === 1) {
-            const value = Array.from(props.values)[0];
-            const index = memoFlattenOptions.value.findIndex(({ data }) => data.value === value);
-            setActive(index);
+        if (!props.multiple && props.open && props.values.size === 1) {
+          const value = Array.from(props.values)[0];
+          const index = memoFlattenOptions.value.findIndex(({ data }) => data.value === value);
+          setActive(index);
+          nextTick(() => {
             scrollIntoView(index);
-          }
-          // Force trigger scrollbar visible when open
-          if (props.open) {
+          });
+        }
+        // Force trigger scrollbar visible when open
+        if (props.open) {
+          nextTick(() => {
             listRef.current?.scrollTo(undefined);
-          }
-        });
+          });
+        }
       },
-      { immediate: true },
+      { immediate: true, flush: 'post' },
     );
 
     // ========================== Values ==========================
@@ -282,7 +290,7 @@ const OptionList = defineComponent<OptionListProps, { state?: any }>({
       virtual,
       onScroll,
       onMouseenter,
-    } = this.$props as OptionListProps;
+    } = this.$props;
     const renderOption = $slots.option;
     const { activeIndex } = this.state;
     // ========================== Render ==========================
diff --git a/components/vc-select/Select.tsx b/components/vc-select/Select.tsx
index f5328b483..6664a152a 100644
--- a/components/vc-select/Select.tsx
+++ b/components/vc-select/Select.tsx
@@ -43,13 +43,13 @@ import {
   fillOptionsWithMissingValue,
 } from './utils/valueUtil';
 import type { SelectProps } from './generate';
+import { selectBaseProps } from './generate';
 import generateSelector from './generate';
 import type { DefaultValueType } from './interface/generator';
 import warningProps from './utils/warningPropsUtil';
 import { defineComponent, ref } from 'vue';
-import omit from 'lodash-es/omit';
 
-const RefSelect = generateSelector<SelectOptionsType>({
+const RefSelect = generateSelector<SelectOptionsType[number]>({
   prefixCls: 'rc-select',
   components: {
     optionList: SelectOptionList as any,
@@ -64,12 +64,23 @@ const RefSelect = generateSelector<SelectOptionsType>({
   fillOptionsWithMissingValue,
 });
 
-export type ExportedSelectProps<ValueType extends DefaultValueType = DefaultValueType> =
-  SelectProps<SelectOptionsType, ValueType>;
+export type ExportedSelectProps<T extends DefaultValueType = DefaultValueType> = SelectProps<
+  SelectOptionsType[number],
+  T
+>;
 
-const Select = defineComponent<Omit<ExportedSelectProps, 'children'>>({
+export function selectProps<T>() {
+  return selectBaseProps<SelectOptionsType[number], T>();
+}
+
+const Select = defineComponent({
+  name: 'Select',
+  inheritAttrs: false,
+  Option,
+  OptGroup,
+  props: RefSelect.props,
   setup(props, { attrs, expose, slots }) {
-    const selectRef = ref(null);
+    const selectRef = ref();
     expose({
       focus: () => {
         selectRef.value?.focus();
@@ -91,8 +102,4 @@ const Select = defineComponent<Omit<ExportedSelectProps, 'children'>>({
     };
   },
 });
-Select.inheritAttrs = false;
-Select.props = omit(RefSelect.props, ['children']);
-Select.Option = Option;
-Select.OptGroup = OptGroup;
 export default Select;
diff --git a/components/vc-select/Selector/SingleSelector.tsx b/components/vc-select/Selector/SingleSelector.tsx
index fdbff431a..1f4a64dd7 100644
--- a/components/vc-select/Selector/SingleSelector.tsx
+++ b/components/vc-select/Selector/SingleSelector.tsx
@@ -2,8 +2,10 @@ import pickAttrs from '../../_util/pickAttrs';
 import Input from './Input';
 import type { InnerSelectorProps } from './interface';
 import type { VNodeChild } from 'vue';
-import { computed, defineComponent, Fragment, ref, watch } from 'vue';
+import { Fragment } from 'vue';
+import { computed, defineComponent, ref, watch } from 'vue';
 import PropTypes from '../../_util/vue-types';
+import { useInjectTreeSelectContext } from '../../vc-tree-select/Context';
 
 interface SelectorProps extends InnerSelectorProps {
   inputElement: VNodeChild;
@@ -50,6 +52,7 @@ const SingleSelector = defineComponent<SelectorProps>({
       }
       return inputValue;
     });
+    const treeSelectContext = useInjectTreeSelectContext();
     watch(
       [combobox, () => props.activeValue],
       () => {
@@ -94,6 +97,23 @@ const SingleSelector = defineComponent<SelectorProps>({
         onInputCompositionEnd,
       } = props;
       const item = values[0];
+      let titleNode = null;
+      // custom tree-select title by slot
+      if (item && treeSelectContext.value.slots) {
+        titleNode =
+          treeSelectContext.value.slots[item?.option?.data?.slots?.title] ||
+          treeSelectContext.value.slots.title ||
+          item.label;
+        if (typeof titleNode === 'function') {
+          titleNode = titleNode(item.option?.data || {});
+        }
+        //  else if (treeSelectContext.value.slots.titleRender) {
+        //   // 因历史 title 是覆盖逻辑，新增 titleRender，所有的 title 都走一遍 titleRender
+        //   titleNode = treeSelectContext.value.slots.titleRender(item.option?.data || {});
+        // }
+      } else {
+        titleNode = item?.label;
+      }
       return (
         <>
           <span class={`${prefixCls}-selection-search`}>
@@ -126,7 +146,7 @@ const SingleSelector = defineComponent<SelectorProps>({
           {/* Display value */}
           {!combobox.value && item && !hasTextInput.value && (
             <span class={`${prefixCls}-selection-item`} title={title.value}>
-              <Fragment key={item.key || item.value}>{item.label}</Fragment>
+              <Fragment key={item.key || item.value}>{titleNode}</Fragment>
             </span>
           )}
 
diff --git a/components/vc-select/Selector/index.tsx b/components/vc-select/Selector/index.tsx
index e6dd0f9a1..7a225fb01 100644
--- a/components/vc-select/Selector/index.tsx
+++ b/components/vc-select/Selector/index.tsx
@@ -52,12 +52,12 @@ export interface SelectorProps {
   // Motion
   choiceTransitionName?: string;
 
-  onToggleOpen: (open?: boolean) => void;
+  onToggleOpen: (open?: boolean) => void | any;
   /** `onSearch` returns go next step boolean to check if need do toggle open */
   onSearch: (searchText: string, fromTyping: boolean, isCompositing: boolean) => boolean;
   onSearchSubmit: (searchText: string) => void;
   onSelect: (value: RawValueType, option: { selected: boolean }) => void;
-  onInputKeyDown?: EventHandlerNonNull;
+  onInputKeyDown?: (e: KeyboardEvent) => void;
 
   /**
    * @private get real dom for trigger align.
diff --git a/components/vc-select/generate.tsx b/components/vc-select/generate.tsx
index f0049771e..9c8b45a4e 100644
--- a/components/vc-select/generate.tsx
+++ b/components/vc-select/generate.tsx
@@ -11,14 +11,13 @@ import KeyCode from '../_util/KeyCode';
 import classNames from '../_util/classNames';
 import Selector from './Selector';
 import SelectTrigger from './SelectTrigger';
-import type { RenderNode, Mode, RenderDOMFunc, OnActiveValue } from './interface';
+import type { Mode, RenderDOMFunc, OnActiveValue } from './interface';
 import type {
   GetLabeledValue,
   FilterOptions,
   FilterFunc,
   DefaultValueType,
   RawValueType,
-  LabelValueType,
   Key,
   DisplayLabelValueType,
   FlattenOptionsType,
@@ -26,7 +25,6 @@ import type {
   OnClear,
   SelectSource,
   CustomTagProps,
-  DropdownRender,
 } from './interface/generator';
 import { INTERNAL_PROPS_MARK } from './interface/generator';
 import type { OptionListProps } from './OptionList';
@@ -38,7 +36,8 @@ import { getSeparatedContent } from './utils/valueUtil';
 import useSelectTriggerControl from './hooks/useSelectTriggerControl';
 import useCacheDisplayValue from './hooks/useCacheDisplayValue';
 import useCacheOptions from './hooks/useCacheOptions';
-import type { CSSProperties, DefineComponent, VNode, VNodeChild } from 'vue';
+import type { CSSProperties, DefineComponent, PropType, VNode, VNodeChild } from 'vue';
+import { getCurrentInstance } from 'vue';
 import {
   computed,
   defineComponent,
@@ -50,8 +49,7 @@ import {
   watchEffect,
 } from 'vue';
 import createRef from '../_util/createRef';
-import PropTypes, { withUndefined } from '../_util/vue-types';
-import initDefaultProps from '../_util/props-util/initDefaultProps';
+import PropTypes from '../_util/vue-types';
 import warning from '../_util/warning';
 import isMobile from '../vc-util/isMobile';
 
@@ -68,248 +66,183 @@ const DEFAULT_OMIT_PROPS = [
   'tabindex',
 ];
 
-export const BaseProps = () => ({
-  prefixCls: PropTypes.string,
-  id: PropTypes.string,
-  class: PropTypes.string,
-  style: PropTypes.any,
+export function selectBaseProps<OptionType, ValueType>() {
+  return {
+    prefixCls: String,
+    id: String,
 
-  // Options
-  options: PropTypes.array,
-  mode: PropTypes.string,
+    // Options
+    options: { type: Array as PropType<OptionType[]> },
+    mode: { type: String as PropType<Mode> },
 
-  // Value
-  value: PropTypes.any,
-  defaultValue: PropTypes.any,
-  labelInValue: PropTypes.looseBool,
+    // Value
+    value: {
+      type: [String, Number, Object, Array] as PropType<ValueType>,
+      default: undefined as ValueType,
+    },
+    defaultValue: {
+      type: [String, Number, Object, Array] as PropType<ValueType>,
+      default: undefined as ValueType,
+    },
+    labelInValue: { type: Boolean, default: undefined },
 
-  // Search
-  inputValue: PropTypes.string,
-  searchValue: PropTypes.string,
-  optionFilterProp: PropTypes.string,
-  /**
-   * In Select, `false` means do nothing.
-   * In TreeSelect, `false` will highlight match item.
-   * It's by design.
-   */
-  filterOption: PropTypes.any,
-  filterSort: PropTypes.func,
-  showSearch: PropTypes.looseBool,
-  autoClearSearchValue: PropTypes.looseBool,
-  onSearch: PropTypes.func,
-  onClear: PropTypes.func,
+    // Search
+    inputValue: String,
+    searchValue: String,
+    optionFilterProp: String,
+    /**
+     * In Select, `false` means do nothing.
+     * In TreeSelect, `false` will highlight match item.
+     * It's by design.
+     */
+    filterOption: {
+      type: [Boolean, Function] as PropType<boolean | FilterFunc<OptionType>>,
+      default: undefined,
+    },
+    filterSort: {
+      type: Function as PropType<(optionA: OptionType, optionB: OptionType) => number>,
+    },
+    showSearch: { type: Boolean, default: undefined },
+    autoClearSearchValue: { type: Boolean, default: undefined },
+    onSearch: { type: Function as PropType<(value: string) => void> },
+    onClear: { type: Function as PropType<OnClear> },
 
-  // Icons
-  allowClear: PropTypes.looseBool,
-  clearIcon: PropTypes.VNodeChild,
-  showArrow: PropTypes.looseBool,
-  inputIcon: PropTypes.VNodeChild,
-  removeIcon: PropTypes.VNodeChild,
-  menuItemSelectedIcon: PropTypes.VNodeChild,
+    // Icons
+    allowClear: { type: Boolean, default: undefined },
+    clearIcon: PropTypes.any,
+    showArrow: { type: Boolean, default: undefined },
+    inputIcon: PropTypes.VNodeChild,
+    removeIcon: PropTypes.VNodeChild,
+    menuItemSelectedIcon: PropTypes.VNodeChild,
 
-  // Dropdown
-  open: PropTypes.looseBool,
-  defaultOpen: PropTypes.looseBool,
-  listHeight: PropTypes.number,
-  listItemHeight: PropTypes.number,
-  dropdownStyle: PropTypes.object,
-  dropdownClassName: PropTypes.string,
-  dropdownMatchSelectWidth: withUndefined(PropTypes.oneOfType([Boolean, Number])),
-  virtual: PropTypes.looseBool,
-  dropdownRender: PropTypes.func,
-  dropdownAlign: PropTypes.any,
-  animation: PropTypes.string,
-  transitionName: PropTypes.string,
-  getPopupContainer: PropTypes.func,
-  direction: PropTypes.string,
+    // Dropdown
+    open: { type: Boolean, default: undefined },
+    defaultOpen: { type: Boolean, default: undefined },
+    listHeight: Number,
+    listItemHeight: Number,
+    dropdownStyle: { type: Object as PropType<CSSProperties> },
+    dropdownClassName: String,
+    dropdownMatchSelectWidth: {
+      type: [Boolean, Number] as PropType<boolean | number>,
+      default: undefined,
+    },
+    virtual: { type: Boolean, default: undefined },
+    dropdownRender: { type: Function as PropType<(menu: VNode) => any> },
+    dropdownAlign: PropTypes.any,
+    animation: String,
+    transitionName: String,
+    getPopupContainer: { type: Function as PropType<RenderDOMFunc> },
+    direction: String,
 
-  // Others
-  disabled: PropTypes.looseBool,
-  loading: PropTypes.looseBool,
-  autofocus: PropTypes.looseBool,
-  defaultActiveFirstOption: PropTypes.looseBool,
-  notFoundContent: PropTypes.VNodeChild,
-  placeholder: PropTypes.VNodeChild,
-  backfill: PropTypes.looseBool,
-  getInputElement: PropTypes.func,
-  optionLabelProp: PropTypes.string,
-  maxTagTextLength: PropTypes.number,
-  maxTagCount: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  maxTagPlaceholder: PropTypes.any,
-  tokenSeparators: PropTypes.array,
-  tagRender: PropTypes.func,
-  showAction: PropTypes.array,
-  tabindex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    // Others
+    disabled: { type: Boolean, default: undefined },
+    loading: { type: Boolean, default: undefined },
+    autofocus: { type: Boolean, default: undefined },
+    defaultActiveFirstOption: { type: Boolean, default: undefined },
+    notFoundContent: PropTypes.any,
+    placeholder: PropTypes.any,
+    backfill: { type: Boolean, default: undefined },
+    /** @private Internal usage. Do not use in your production. */
+    getInputElement: { type: Function as PropType<() => any> },
+    optionLabelProp: String,
+    maxTagTextLength: Number,
+    maxTagCount: { type: [String, Number] as PropType<number | 'responsive'> },
+    maxTagPlaceholder: PropTypes.any,
+    tokenSeparators: { type: Array as PropType<string[]> },
+    tagRender: { type: Function as PropType<(props: CustomTagProps) => any> },
+    showAction: { type: Array as PropType<('focus' | 'click')[]> },
+    tabindex: { type: [Number, String] },
 
-  // Events
-  onKeyup: PropTypes.func,
-  onKeydown: PropTypes.func,
-  onPopupScroll: PropTypes.func,
-  onDropdownVisibleChange: PropTypes.func,
-  onSelect: PropTypes.func,
-  onDeselect: PropTypes.func,
-  onInputKeyDown: PropTypes.func,
-  onClick: PropTypes.func,
-  onChange: PropTypes.func,
-  onBlur: PropTypes.func,
-  onFocus: PropTypes.func,
-  onMousedown: PropTypes.func,
-  onMouseenter: PropTypes.func,
-  onMouseleave: PropTypes.func,
+    // Events
+    onKeyup: { type: Function as PropType<(e: KeyboardEvent) => void> },
+    onKeydown: { type: Function as PropType<(e: KeyboardEvent) => void> },
+    onPopupScroll: { type: Function as PropType<(e: UIEvent) => void> },
+    onDropdownVisibleChange: { type: Function as PropType<(open: boolean) => void> },
+    onSelect: {
+      type: Function as PropType<(value: SingleType<ValueType>, option: OptionType) => void>,
+    },
+    onDeselect: {
+      type: Function as PropType<(value: SingleType<ValueType>, option: OptionType) => void>,
+    },
+    onInputKeyDown: { type: Function as PropType<(e: KeyboardEvent) => void> },
+    onClick: { type: Function as PropType<(e: MouseEvent) => void> },
+    onChange: {
+      type: Function as PropType<(value: ValueType, option: OptionType | OptionType[]) => void>,
+    },
+    onBlur: { type: Function as PropType<(e: FocusEvent) => void> },
+    onFocus: { type: Function as PropType<(e: FocusEvent) => void> },
+    onMousedown: { type: Function as PropType<(e: MouseEvent) => void> },
+    onMouseenter: { type: Function as PropType<(e: MouseEvent) => void> },
+    onMouseleave: { type: Function as PropType<(e: MouseEvent) => void> },
 
-  // Motion
-  choiceTransitionName: PropTypes.string,
+    // Motion
+    choiceTransitionName: String,
 
-  // Internal props
-  /**
-   * Only used in current version for internal event process.
-   * Do not use in production environment.
-   */
-  internalProps: PropTypes.object,
-  children: PropTypes.array,
-});
-
-export interface SelectProps<OptionsType extends object[], ValueType> {
-  prefixCls?: string;
-  id?: string;
-  class?: string;
-  style?: CSSProperties;
-
-  // Options
-  options?: OptionsType;
-  children?: any[];
-  mode?: Mode;
-
-  // Value
-  value?: ValueType;
-  defaultValue?: ValueType;
-  labelInValue?: boolean;
-
-  // Search
-  inputValue?: string;
-  searchValue?: string;
-  optionFilterProp?: string;
-  /**
-   * In Select, `false` means do nothing.
-   * In TreeSelect, `false` will highlight match item.
-   * It's by design.
-   */
-  filterOption?: boolean | FilterFunc<OptionsType[number]>;
-  filterSort?: (optionA: OptionsType[number], optionB: OptionsType[number]) => number;
-  showSearch?: boolean;
-  autoClearSearchValue?: boolean;
-  onSearch?: (value: string) => void;
-  onClear?: OnClear;
-
-  // Icons
-  allowClear?: boolean;
-  clearIcon?: VNodeChild;
-  showArrow?: boolean;
-  inputIcon?: RenderNode;
-  removeIcon?: VNodeChild;
-  menuItemSelectedIcon?: RenderNode;
-
-  // Dropdown
-  open?: boolean;
-  defaultOpen?: boolean;
-  listHeight?: number;
-  listItemHeight?: number;
-  dropdownStyle?: CSSProperties;
-  dropdownClassName?: string;
-  dropdownMatchSelectWidth?: boolean | number;
-  virtual?: boolean;
-  dropdownRender?: DropdownRender;
-  dropdownAlign?: any;
-  animation?: string;
-  transitionName?: string;
-  getPopupContainer?: RenderDOMFunc;
-  direction?: string;
-
-  // Others
-  disabled?: boolean;
-  loading?: boolean;
-  autofocus?: boolean;
-  defaultActiveFirstOption?: boolean;
-  notFoundContent?: VNodeChild;
-  placeholder?: VNodeChild;
-  backfill?: boolean;
-  getInputElement?: () => VNodeChild | JSX.Element;
-  optionLabelProp?: string;
-  maxTagTextLength?: number;
-  maxTagCount?: number | 'responsive';
-  maxTagPlaceholder?: VNodeChild | ((omittedValues: LabelValueType[]) => VNodeChild);
-  tokenSeparators?: string[];
-  tagRender?: (props: CustomTagProps) => VNodeChild;
-  showAction?: ('focus' | 'click')[];
-  tabindex?: number | string;
-
-  // Events
-  onKeyup?: EventHandlerNonNull;
-  onKeydown?: EventHandlerNonNull;
-  onPopupScroll?: EventHandlerNonNull;
-  onDropdownVisibleChange?: (open: boolean) => void;
-  onSelect?: (value: SingleType<ValueType>, option: OptionsType[number]) => void;
-  onDeselect?: (value: SingleType<ValueType>, option: OptionsType[number]) => void;
-  onInputKeyDown?: EventHandlerNonNull;
-  onClick?: EventHandlerNonNull;
-  onChange?: (value: ValueType, option: OptionsType[number] | OptionsType) => void;
-  onBlur?: EventHandlerNonNull;
-  onFocus?: EventHandlerNonNull;
-  onMousedown?: EventHandlerNonNull;
-  onMouseenter?: EventHandlerNonNull;
-  onMouseleave?: EventHandlerNonNull;
-
-  // Motion
-  choiceTransitionName?: string;
-
-  // Internal props
-  /**
-   * Only used in current version for internal event process.
-   * Do not use in production environment.
-   */
-  internalProps?: {
-    mark?: string;
-    onClear?: OnClear;
-    skipTriggerChange?: boolean;
-    skipTriggerSelect?: boolean;
-    onRawSelect?: (value: RawValueType, option: OptionsType[number], source: SelectSource) => void;
-    onRawDeselect?: (
-      value: RawValueType,
-      option: OptionsType[number],
-      source: SelectSource,
-    ) => void;
+    // Internal props
+    /**
+     * Only used in current version for internal event process.
+     * Do not use in production environment.
+     */
+    internalProps: {
+      type: Object as PropType<{
+        mark?: string;
+        onClear?: OnClear;
+        skipTriggerChange?: boolean;
+        skipTriggerSelect?: boolean;
+        onRawSelect?: (value: RawValueType, option: OptionType, source: SelectSource) => void;
+        onRawDeselect?: (value: RawValueType, option: OptionType, source: SelectSource) => void;
+      }>,
+      default: undefined as {
+        mark?: string;
+        onClear?: OnClear;
+        skipTriggerChange?: boolean;
+        skipTriggerSelect?: boolean;
+        onRawSelect?: (value: RawValueType, option: OptionType, source: SelectSource) => void;
+        onRawDeselect?: (value: RawValueType, option: OptionType, source: SelectSource) => void;
+      },
+    },
+    children: { type: Array as PropType<any[]> },
   };
 }
 
-export interface GenerateConfig<OptionsType extends object[]> {
+class Helper<T1, T2> {
+  SelectBaseProps = selectBaseProps<T1, T2>();
+}
+type FuncReturnType<T1, T2> = Helper<T1, T2>['SelectBaseProps'];
+
+export type SelectProps<T1, T2> = FuncReturnType<T1, T2>;
+
+export interface GenerateConfig<OptionType extends object> {
   prefixCls: string;
   components: {
-    optionList: DefineComponent<Omit<OptionListProps, 'options'> & { options?: OptionsType }>;
+    optionList: DefineComponent<
+      Omit<OptionListProps<OptionType>, 'options'> & { options?: OptionType[] }
+    >;
   };
-  /** Convert jsx tree into `OptionsType` */
-  convertChildrenToData: (children: VNodeChild | JSX.Element) => OptionsType;
+  /** Convert jsx tree into `OptionType[]` */
+  convertChildrenToData: (children: VNodeChild | JSX.Element) => OptionType[];
   /** Flatten nest options into raw option list */
-  flattenOptions: (options: OptionsType, props: any) => FlattenOptionsType<OptionsType>;
+  flattenOptions: (options: OptionType[], props: any) => FlattenOptionsType<OptionType>;
   /** Convert single raw value into { label, value } format. Will be called by each value */
-  getLabeledValue: GetLabeledValue<FlattenOptionsType<OptionsType>>;
-  filterOptions: FilterOptions<OptionsType>;
+  getLabeledValue: GetLabeledValue<FlattenOptionsType<OptionType>>;
+  filterOptions: FilterOptions<OptionType[]>;
   findValueOption: // Need still support legacy ts api
-  | ((values: RawValueType[], options: FlattenOptionsType<OptionsType>) => OptionsType)
+  | ((values: RawValueType[], options: FlattenOptionsType<OptionType>) => OptionType[])
     // New API add prevValueOptions support
     | ((
         values: RawValueType[],
-        options: FlattenOptionsType<OptionsType>,
-        info?: { prevValueOptions?: OptionsType[] },
-      ) => OptionsType);
+        options: FlattenOptionsType<OptionType>,
+        info?: { prevValueOptions?: OptionType[][] },
+      ) => OptionType[]);
   /** Check if a value is disabled */
-  isValueDisabled: (value: RawValueType, options: FlattenOptionsType<OptionsType>) => boolean;
+  isValueDisabled: (value: RawValueType, options: FlattenOptionsType<OptionType>) => boolean;
   warningProps?: (props: any) => void;
   fillOptionsWithMissingValue?: (
-    options: OptionsType,
+    options: OptionType[],
     value: DefaultValueType,
     optionLabelProp: string,
     labelInValue: boolean,
-  ) => OptionsType;
+  ) => OptionType[];
   omitDOMProps?: (props: object) => object;
 }
 type ValueType = DefaultValueType;
@@ -318,13 +251,13 @@ type ValueType = DefaultValueType;
  * Do not use it in your prod env since we may refactor this.
  */
 export default function generateSelector<
-  OptionsType extends {
+  OptionType extends {
     value?: RawValueType;
-    label?: VNodeChild;
+    label?: any;
     key?: Key;
     disabled?: boolean;
-  }[],
->(config: GenerateConfig<OptionsType>) {
+  },
+>(config: GenerateConfig<OptionType>) {
   const {
     prefixCls: defaultPrefixCls,
     components: { optionList: OptionList },
@@ -338,10 +271,12 @@ export default function generateSelector<
     fillOptionsWithMissingValue,
     omitDOMProps,
   } = config as any;
-  const Select = defineComponent<SelectProps<OptionsType, ValueType>>({
+  const Select = defineComponent({
     name: 'Select',
     slots: ['option'],
-    setup(props: SelectProps<OptionsType, ValueType>) {
+    inheritAttrs: false,
+    props: selectBaseProps<OptionType, DefaultValueType>(),
+    setup(props, { expose, attrs, slots }) {
       const useInternalProps = computed(
         () => props.internalProps && props.internalProps.mark === INTERNAL_PROPS_MARK,
       );
@@ -350,10 +285,10 @@ export default function generateSelector<
         'Select',
         'optionFilterProp not support children, please use label instead',
       );
-      const containerRef = ref(null);
-      const triggerRef = ref(null);
-      const selectorRef = ref(null);
-      const listRef = ref(null);
+      const containerRef = ref();
+      const triggerRef = ref();
+      const selectorRef = ref();
+      const listRef = ref();
       const tokenWithEnter = computed(() =>
         (props.tokenSeparators || []).some(tokenSeparator =>
           ['\n', '\r\n'].includes(tokenSeparator),
@@ -419,7 +354,7 @@ export default function generateSelector<
 
       // ============================= Option =============================
       // Set by option list active, it will merge into search input when mode is `combobox`
-      const activeValue = ref(null);
+      const activeValue = ref();
       const setActiveValue = (val: string) => {
         activeValue.value = val;
       };
@@ -440,7 +375,7 @@ export default function generateSelector<
         return mergedSearchValue;
       });
 
-      const mergedOptions = computed((): OptionsType => {
+      const mergedOptions = computed((): OptionType[] => {
         let newOptions = props.options;
         if (newOptions === undefined) {
           newOptions = convertChildrenToData(props.children);
@@ -459,7 +394,7 @@ export default function generateSelector<
           );
         }
 
-        return newOptions || ([] as OptionsType);
+        return newOptions || ([] as OptionType[]);
       });
 
       const mergedFlattenOptions = computed(() => flattenOptions(mergedOptions.value, props));
@@ -467,12 +402,12 @@ export default function generateSelector<
       const getValueOption = useCacheOptions(mergedFlattenOptions);
 
       // Display options for OptionList
-      const displayOptions = computed<OptionsType>(() => {
+      const displayOptions = computed<OptionType[]>(() => {
         if (!mergedSearchValue.value || !mergedShowSearch.value) {
-          return [...mergedOptions.value] as OptionsType;
+          return [...mergedOptions.value] as OptionType[];
         }
         const { optionFilterProp = 'value', mode, filterOption } = props;
-        const filteredOptions: OptionsType = filterOptions(
+        const filteredOptions: OptionType[] = filterOptions(
           mergedSearchValue.value,
           mergedOptions.value,
           {
@@ -489,10 +424,10 @@ export default function generateSelector<
             value: mergedSearchValue.value,
             label: mergedSearchValue.value,
             key: '__RC_SELECT_TAG_PLACEHOLDER__',
-          });
+          } as OptionType);
         }
         if (props.filterSort && Array.isArray(filteredOptions)) {
-          return ([...filteredOptions] as OptionsType).sort(props.filterSort);
+          return ([...filteredOptions] as OptionType[]).sort(props.filterSort);
         }
 
         return filteredOptions;
@@ -521,10 +456,10 @@ export default function generateSelector<
             labelInValue: mergedLabelInValue.value,
             optionLabelProp: mergedOptionLabelProp.value,
           });
-
           return {
             ...displayValue,
             disabled: isValueDisabled(val, valueOptions),
+            option: valueOptions[0],
           };
         });
 
@@ -591,9 +526,9 @@ export default function generateSelector<
           return;
         }
         const newRawValuesOptions = getValueOption(newRawValues);
-        const outValues = toOuterValues<FlattenOptionsType<OptionsType>>(Array.from(newRawValues), {
+        const outValues = toOuterValues<FlattenOptionsType<OptionType>>(Array.from(newRawValues), {
           labelInValue: mergedLabelInValue.value,
-          options: newRawValuesOptions,
+          options: newRawValuesOptions as any,
           getLabeledValue,
           prevValueMap: mergedValueMap.value,
           optionLabelProp: mergedOptionLabelProp.value,
@@ -872,7 +807,7 @@ export default function generateSelector<
       };
 
       // KeyUp
-      const onInternalKeyUp = (event: Event) => {
+      const onInternalKeyUp = (event: KeyboardEvent) => {
         if (mergedOpen.value && listRef.value) {
           listRef.value.onKeyup(event);
         }
@@ -991,7 +926,7 @@ export default function generateSelector<
       };
 
       // ============================= Popup ==============================
-      const containerWidth = ref(null);
+      const containerWidth = ref<number>(null);
       onMounted(() => {
         watch(
           triggerOpen,
@@ -1013,348 +948,275 @@ export default function generateSelector<
       const blur = () => {
         selectorRef.value.blur();
       };
-      return {
+      expose({
         focus,
         blur,
-        scrollTo: listRef.value?.scrollTo,
-        tokenWithEnter,
-        mockFocused,
-        mergedId,
-        containerWidth,
-        onActiveValue,
-        accessibilityIndex,
-        mergedDefaultActiveFirstOption,
-        onInternalMouseDown,
-        onContainerFocus,
-        onContainerBlur,
-        onInternalKeyDown,
-        isMultiple,
-        mergedOpen,
-        displayOptions,
-        displayFlattenOptions,
-        rawValues,
-        onInternalOptionSelect,
-        onToggleOpen,
-        mergedSearchValue,
-        useInternalProps,
-        triggerChange,
-        triggerSearch,
-        mergedRawValue,
-        mergedShowSearch,
-        onInternalKeyUp,
-        triggerOpen,
-        mergedOptions,
-        onInternalSelectionSelect,
-        selectorDomRef,
-        displayValues,
-        activeValue,
-        onSearchSubmit,
-        containerRef,
-        listRef,
-        triggerRef,
-        selectorRef,
-      };
-    },
-    methods: {
-      // We need force update here since popup dom is render async
-      onPopupMouseEnter() {
-        (this as any).$forceUpdate();
-      },
-    },
-    render() {
-      const {
-        tokenWithEnter,
-        mockFocused,
-        mergedId,
-        containerWidth,
-        onActiveValue,
-        accessibilityIndex,
-        mergedDefaultActiveFirstOption,
-        onInternalMouseDown,
-        onInternalKeyDown,
-        isMultiple,
-        mergedOpen,
-        displayOptions,
-        displayFlattenOptions,
-        rawValues,
-        onInternalOptionSelect,
-        onToggleOpen,
-        mergedSearchValue,
-        onPopupMouseEnter,
-        useInternalProps,
-        triggerChange,
-        triggerSearch,
-        mergedRawValue,
-        mergedShowSearch,
-        onInternalKeyUp,
-        triggerOpen,
-        mergedOptions,
-        onInternalSelectionSelect,
-        selectorDomRef,
-        displayValues,
-        activeValue,
-        onSearchSubmit,
-        $slots: slots,
-      } = this as any;
-      const {
-        prefixCls = defaultPrefixCls,
-        class: className,
-        id,
-
-        open,
-        defaultOpen,
-        options,
-        children,
-
-        mode,
-        value,
-        defaultValue,
-        labelInValue,
-
-        // Search related
-        showSearch,
-        inputValue,
-        searchValue,
-        filterOption,
-        optionFilterProp,
-        autoClearSearchValue,
-        onSearch,
-
-        // Icons
-        allowClear,
-        clearIcon,
-        showArrow,
-        inputIcon,
-        menuItemSelectedIcon,
-
-        // Others
-        disabled,
-        loading,
-        defaultActiveFirstOption,
-        notFoundContent = 'Not Found',
-        optionLabelProp,
-        backfill,
-        getInputElement,
-        getPopupContainer,
-
-        // Dropdown
-        listHeight = 200,
-        listItemHeight = 20,
-        animation,
-        transitionName,
-        virtual,
-        dropdownStyle,
-        dropdownClassName,
-        dropdownMatchSelectWidth,
-        dropdownRender,
-        dropdownAlign,
-        showAction,
-        direction,
-
-        // Tags
-        tokenSeparators,
-        tagRender,
-
-        // Events
-        onPopupScroll,
-        onDropdownVisibleChange,
-        onFocus,
-        onBlur,
-        onKeyup,
-        onKeydown,
-        onMousedown,
-
-        onChange,
-        onSelect,
-        onDeselect,
-        onClear,
-
-        internalProps = {},
-
-        ...restProps
-      } = this.$props as SelectProps<OptionsType, ValueType>;
-
-      // ============================= Input ==============================
-      // Only works in `combobox`
-      const customizeInputElement: VNodeChild | JSX.Element =
-        (mode === 'combobox' && getInputElement && getInputElement()) || null;
-
-      const domProps = omitDOMProps ? omitDOMProps(restProps) : restProps;
-      DEFAULT_OMIT_PROPS.forEach(prop => {
-        delete domProps[prop];
+        scrollTo: (...args: any[]) => listRef.value?.scrollTo(...args),
       });
-      const popupNode = (
-        <OptionList
-          ref="listRef"
-          prefixCls={prefixCls}
-          id={mergedId}
-          open={mergedOpen}
-          childrenAsData={!options}
-          options={displayOptions}
-          flattenOptions={displayFlattenOptions}
-          multiple={isMultiple}
-          values={rawValues}
-          height={listHeight}
-          itemHeight={listItemHeight}
-          onSelect={onInternalOptionSelect}
-          onToggleOpen={onToggleOpen}
-          onActiveValue={onActiveValue}
-          defaultActiveFirstOption={mergedDefaultActiveFirstOption}
-          notFoundContent={notFoundContent}
-          onScroll={onPopupScroll}
-          searchValue={mergedSearchValue}
-          menuItemSelectedIcon={menuItemSelectedIcon}
-          virtual={virtual !== false && dropdownMatchSelectWidth !== false}
-          onMouseenter={onPopupMouseEnter}
-          v-slots={{ option: slots.option }}
-        />
-      );
-
-      // ============================= Clear ==============================
-      let clearNode: VNode | JSX.Element;
-      const onClearMouseDown = () => {
-        // Trigger internal `onClear` event
-        if (useInternalProps && internalProps.onClear) {
-          internalProps.onClear();
-        }
-
-        if (onClear) {
-          onClear();
-        }
-
-        triggerChange([]);
-        triggerSearch('', false, false);
+      const instance = getCurrentInstance();
+      const onPopupMouseEnter = () => {
+        // We need force update here since popup dom is render async
+        instance.update();
       };
+      return () => {
+        const {
+          prefixCls = defaultPrefixCls,
+          id,
 
-      if (!disabled && allowClear && (mergedRawValue.length || mergedSearchValue)) {
-        clearNode = (
-          <TransBtn
-            class={`${prefixCls}-clear`}
-            onMousedown={onClearMouseDown}
-            customizeIcon={clearIcon}
-          >
-            ×
-          </TransBtn>
-        );
-      }
+          open,
+          defaultOpen,
+          options,
+          children,
 
-      // ============================= Arrow ==============================
-      const mergedShowArrow =
-        showArrow !== undefined ? showArrow : loading || (!isMultiple && mode !== 'combobox');
-      let arrowNode: VNode | JSX.Element;
+          mode,
+          value,
+          defaultValue,
+          labelInValue,
 
-      if (mergedShowArrow) {
-        arrowNode = (
-          <TransBtn
-            class={classNames(`${prefixCls}-arrow`, {
-              [`${prefixCls}-arrow-loading`]: loading,
-            })}
-            customizeIcon={inputIcon}
-            customizeIconProps={{
-              loading,
-              searchValue: mergedSearchValue,
-              open: mergedOpen,
-              focused: mockFocused,
-              showSearch: mergedShowSearch,
-            }}
+          // Search related
+          showSearch,
+          inputValue,
+          searchValue,
+          filterOption,
+          optionFilterProp,
+          autoClearSearchValue,
+          onSearch,
+
+          // Icons
+          allowClear,
+          clearIcon,
+          showArrow,
+          inputIcon,
+          menuItemSelectedIcon,
+
+          // Others
+          disabled,
+          loading,
+          defaultActiveFirstOption,
+          notFoundContent = 'Not Found',
+          optionLabelProp,
+          backfill,
+          getInputElement,
+          getPopupContainer,
+
+          // Dropdown
+          listHeight = 200,
+          listItemHeight = 20,
+          animation,
+          transitionName,
+          virtual,
+          dropdownStyle,
+          dropdownClassName,
+          dropdownMatchSelectWidth,
+          dropdownRender,
+          dropdownAlign,
+          showAction,
+          direction,
+
+          // Tags
+          tokenSeparators,
+          tagRender,
+
+          // Events
+          onPopupScroll,
+          onDropdownVisibleChange,
+          onFocus,
+          onBlur,
+          onKeyup,
+          onKeydown,
+          onMousedown,
+
+          onChange,
+          onSelect,
+          onDeselect,
+          onClear,
+
+          internalProps = {},
+
+          ...restProps
+        } = { ...props, ...attrs }; //as SelectProps<OptionType[], ValueType>;
+        // ============================= Input ==============================
+        // Only works in `combobox`
+        const customizeInputElement: VNodeChild | JSX.Element =
+          (mode === 'combobox' && getInputElement && getInputElement()) || null;
+
+        const domProps = omitDOMProps ? omitDOMProps(restProps) : restProps;
+        DEFAULT_OMIT_PROPS.forEach(prop => {
+          delete domProps[prop];
+        });
+        const popupNode = (
+          <OptionList
+            ref={listRef}
+            prefixCls={prefixCls}
+            id={mergedId.value}
+            open={mergedOpen.value}
+            childrenAsData={!options}
+            options={displayOptions.value}
+            flattenOptions={displayFlattenOptions.value}
+            multiple={isMultiple.value}
+            values={rawValues.value}
+            height={listHeight}
+            itemHeight={listItemHeight}
+            onSelect={onInternalOptionSelect}
+            onToggleOpen={onToggleOpen}
+            onActiveValue={onActiveValue}
+            defaultActiveFirstOption={mergedDefaultActiveFirstOption.value}
+            notFoundContent={notFoundContent}
+            onScroll={onPopupScroll}
+            searchValue={mergedSearchValue.value}
+            menuItemSelectedIcon={menuItemSelectedIcon}
+            virtual={virtual !== false && dropdownMatchSelectWidth !== false}
+            onMouseenter={onPopupMouseEnter}
+            v-slots={{ ...slots, option: slots.option }}
           />
         );
-      }
 
-      // ============================ Warning =============================
-      if (process.env.NODE_ENV !== 'production' && warningProps) {
-        warningProps(this.$props);
-      }
+        // ============================= Clear ==============================
+        let clearNode: VNode | JSX.Element;
+        const onClearMouseDown = () => {
+          // Trigger internal `onClear` event
+          if (useInternalProps.value && internalProps.onClear) {
+            internalProps.onClear();
+          }
 
-      // ============================= Render =============================
-      const mergedClassName = classNames(prefixCls, className, {
-        [`${prefixCls}-focused`]: mockFocused,
-        [`${prefixCls}-multiple`]: isMultiple,
-        [`${prefixCls}-single`]: !isMultiple,
-        [`${prefixCls}-allow-clear`]: allowClear,
-        [`${prefixCls}-show-arrow`]: mergedShowArrow,
-        [`${prefixCls}-disabled`]: disabled,
-        [`${prefixCls}-loading`]: loading,
-        [`${prefixCls}-open`]: mergedOpen,
-        [`${prefixCls}-customize-input`]: customizeInputElement,
-        [`${prefixCls}-show-search`]: mergedShowSearch,
-      });
+          if (onClear) {
+            onClear();
+          }
 
-      return (
-        <div
-          class={mergedClassName}
-          {...domProps}
-          ref="containerRef"
-          onMousedown={onInternalMouseDown}
-          onKeydown={onInternalKeyDown}
-          onKeyup={onInternalKeyUp}
-          // onFocus={onContainerFocus} // trigger by input
-          // onBlur={onContainerBlur} // trigger by input
-        >
-          {mockFocused && !mergedOpen && (
-            <span
-              style={{
-                width: 0,
-                height: 0,
-                display: 'flex',
-                overflow: 'hidden',
-                opacity: 0,
-              }}
-              aria-live="polite"
+          triggerChange([]);
+          triggerSearch('', false, false);
+        };
+
+        if (!disabled && allowClear && (mergedRawValue.value.length || mergedSearchValue.value)) {
+          clearNode = (
+            <TransBtn
+              class={`${prefixCls}-clear`}
+              onMousedown={onClearMouseDown}
+              customizeIcon={clearIcon}
             >
-              {/* Merge into one string to make screen reader work as expect */}
-              {`${mergedRawValue.join(', ')}`}
-            </span>
-          )}
-          <SelectTrigger
-            ref="triggerRef"
-            disabled={disabled}
-            prefixCls={prefixCls}
-            visible={triggerOpen}
-            popupElement={popupNode}
-            containerWidth={containerWidth}
-            animation={animation}
-            transitionName={transitionName}
-            dropdownStyle={dropdownStyle}
-            dropdownClassName={dropdownClassName}
-            direction={direction}
-            dropdownMatchSelectWidth={dropdownMatchSelectWidth}
-            dropdownRender={dropdownRender as any}
-            dropdownAlign={dropdownAlign}
-            getPopupContainer={getPopupContainer}
-            empty={!mergedOptions.length}
-            getTriggerDOMNode={() => selectorDomRef.current}
-          >
-            <Selector
-              {...this.$props}
-              domRef={selectorDomRef}
-              prefixCls={prefixCls}
-              inputElement={customizeInputElement}
-              ref="selectorRef"
-              id={mergedId}
-              showSearch={mergedShowSearch}
-              mode={mode}
-              accessibilityIndex={accessibilityIndex}
-              multiple={isMultiple}
-              tagRender={tagRender}
-              values={displayValues}
-              open={mergedOpen}
-              onToggleOpen={onToggleOpen}
-              searchValue={mergedSearchValue}
-              activeValue={activeValue}
-              onSearch={triggerSearch}
-              onSearchSubmit={onSearchSubmit}
-              onSelect={onInternalSelectionSelect}
-              tokenWithEnter={tokenWithEnter}
-            />
-          </SelectTrigger>
+              ×
+            </TransBtn>
+          );
+        }
 
-          {arrowNode}
-          {clearNode}
-        </div>
-      );
+        // ============================= Arrow ==============================
+        const mergedShowArrow =
+          showArrow !== undefined
+            ? showArrow
+            : loading || (!isMultiple.value && mode !== 'combobox');
+        let arrowNode: VNode | JSX.Element;
+
+        if (mergedShowArrow) {
+          arrowNode = (
+            <TransBtn
+              class={classNames(`${prefixCls}-arrow`, {
+                [`${prefixCls}-arrow-loading`]: loading,
+              })}
+              customizeIcon={inputIcon}
+              customizeIconProps={{
+                loading,
+                searchValue: mergedSearchValue.value,
+                open: mergedOpen.value,
+                focused: mockFocused.value,
+                showSearch: mergedShowSearch.value,
+              }}
+            />
+          );
+        }
+
+        // ============================ Warning =============================
+        if (process.env.NODE_ENV !== 'production' && warningProps) {
+          warningProps(props);
+        }
+
+        // ============================= Render =============================
+        const mergedClassName = classNames(prefixCls, attrs.class, {
+          [`${prefixCls}-focused`]: mockFocused.value,
+          [`${prefixCls}-multiple`]: isMultiple.value,
+          [`${prefixCls}-single`]: !isMultiple.value,
+          [`${prefixCls}-allow-clear`]: allowClear,
+          [`${prefixCls}-show-arrow`]: mergedShowArrow,
+          [`${prefixCls}-disabled`]: disabled,
+          [`${prefixCls}-loading`]: loading,
+          [`${prefixCls}-open`]: mergedOpen.value,
+          [`${prefixCls}-customize-input`]: customizeInputElement,
+          [`${prefixCls}-show-search`]: mergedShowSearch.value,
+        });
+        return (
+          <div
+            {...domProps}
+            class={mergedClassName}
+            ref={containerRef}
+            onMousedown={onInternalMouseDown}
+            onKeydown={onInternalKeyDown}
+            onKeyup={onInternalKeyUp}
+            // onFocus={onContainerFocus} // trigger by input
+            // onBlur={onContainerBlur} // trigger by input
+          >
+            {mockFocused.value && !mergedOpen.value && (
+              <span
+                style={{
+                  width: 0,
+                  height: 0,
+                  display: 'flex',
+                  overflow: 'hidden',
+                  opacity: 0,
+                }}
+                aria-live="polite"
+              >
+                {/* Merge into one string to make screen reader work as expect */}
+                {`${mergedRawValue.value.join(', ')}`}
+              </span>
+            )}
+            <SelectTrigger
+              ref={triggerRef}
+              disabled={disabled}
+              prefixCls={prefixCls}
+              visible={triggerOpen.value}
+              popupElement={popupNode}
+              containerWidth={containerWidth.value}
+              animation={animation}
+              transitionName={transitionName}
+              dropdownStyle={dropdownStyle}
+              dropdownClassName={dropdownClassName}
+              direction={direction}
+              dropdownMatchSelectWidth={dropdownMatchSelectWidth}
+              dropdownRender={dropdownRender as any}
+              dropdownAlign={dropdownAlign}
+              getPopupContainer={getPopupContainer}
+              empty={!mergedOptions.value.length}
+              getTriggerDOMNode={() => selectorDomRef.current}
+            >
+              <Selector
+                {...props}
+                domRef={selectorDomRef}
+                prefixCls={prefixCls}
+                inputElement={customizeInputElement}
+                ref={selectorRef}
+                id={mergedId.value}
+                showSearch={mergedShowSearch.value}
+                mode={mode}
+                accessibilityIndex={accessibilityIndex.value}
+                multiple={isMultiple.value}
+                tagRender={tagRender}
+                values={displayValues.value}
+                open={mergedOpen.value}
+                onToggleOpen={onToggleOpen}
+                searchValue={mergedSearchValue.value}
+                activeValue={activeValue.value}
+                onSearch={triggerSearch}
+                onSearchSubmit={onSearchSubmit}
+                onSelect={onInternalSelectionSelect}
+                tokenWithEnter={tokenWithEnter.value}
+              />
+            </SelectTrigger>
+
+            {arrowNode}
+            {clearNode}
+          </div>
+        );
+      };
     },
   });
-  Select.props = initDefaultProps(BaseProps(), {});
   return Select;
 }
diff --git a/components/vc-select/hooks/useCacheOptions.ts b/components/vc-select/hooks/useCacheOptions.ts
index ec2904920..d96a2e578 100644
--- a/components/vc-select/hooks/useCacheOptions.ts
+++ b/components/vc-select/hooks/useCacheOptions.ts
@@ -1,17 +1,17 @@
-import type { Ref, VNodeChild } from 'vue';
+import type { Ref } from 'vue';
 import { computed } from 'vue';
 import type { RawValueType, FlattenOptionsType, Key } from '../interface/generator';
 
 export default function useCacheOptions<
-  OptionsType extends {
+  OptionType extends {
     value?: RawValueType;
-    label?: VNodeChild;
+    label?: any;
     key?: Key;
     disabled?: boolean;
-  }[],
+  },
 >(options: Ref) {
   const optionMap = computed(() => {
-    const map: Map<RawValueType, FlattenOptionsType<OptionsType>[number]> = new Map();
+    const map: Map<RawValueType, FlattenOptionsType<OptionType>[number]> = new Map();
     options.value.forEach((item: any) => {
       const {
         data: { value },
@@ -21,7 +21,7 @@ export default function useCacheOptions<
     return map;
   });
 
-  const getValueOption = (vals: RawValueType[]): FlattenOptionsType<OptionsType> =>
+  const getValueOption = (vals: RawValueType[]) =>
     vals.map(value => optionMap.value.get(value)).filter(Boolean);
 
   return getValueOption;
diff --git a/components/vc-select/index.ts b/components/vc-select/index.ts
index 0272bdf61..3d2f1ecce 100644
--- a/components/vc-select/index.ts
+++ b/components/vc-select/index.ts
@@ -1,10 +1,11 @@
 import type { ExportedSelectProps } from './Select';
-import Select from './Select';
+import Select, { selectProps } from './Select';
 import Option from './Option';
 import OptGroup from './OptGroup';
-import { BaseProps } from './generate';
+import { selectBaseProps } from './generate';
+import type { ExtractPropTypes } from 'vue';
 
-export type SelectProps<T = any> = ExportedSelectProps<T>;
-export { Option, OptGroup, BaseProps };
+export type SelectProps<T = any> = Partial<ExtractPropTypes<ExportedSelectProps<T>>>;
+export { Option, OptGroup, selectBaseProps, selectProps };
 
 export default Select;
diff --git a/components/vc-select/interface/generator.ts b/components/vc-select/interface/generator.ts
index 9674fa34a..79e1a0d57 100644
--- a/components/vc-select/interface/generator.ts
+++ b/components/vc-select/interface/generator.ts
@@ -56,9 +56,11 @@ export type FilterOptions<OptionsType extends object[]> = (
 
 export type FilterFunc<OptionType> = (inputValue: string, option?: OptionType) => boolean;
 
-export type FlattenOptionsType<OptionsType extends object[] = object[]> = {
+export type FlattenOptionsType<OptionType = object> = {
   key: Key;
-  data: OptionsType[number];
+  data: OptionType;
+  label?: any;
+  value?: RawValueType;
   /** Used for customize data */
   [name: string]: any; // eslint-disable-line @typescript-eslint/no-explicit-any
 }[];
diff --git a/components/vc-select/utils/warningPropsUtil.ts b/components/vc-select/utils/warningPropsUtil.ts
index 5873b48e2..b08b6afd5 100644
--- a/components/vc-select/utils/warningPropsUtil.ts
+++ b/components/vc-select/utils/warningPropsUtil.ts
@@ -1,7 +1,6 @@
 import warning, { noteOnce } from '../../vc-util/warning';
 import type { SelectProps } from '..';
 import { convertChildrenToData } from './legacyUtil';
-import type { OptionData } from '../interface';
 import { toArray } from './commonUtil';
 import type { RawValueType, LabelValueType } from '../interface/generator';
 import { isValidElement } from '../../_util/props-util';
@@ -36,23 +35,6 @@ function warningProps(props: SelectProps) {
     'Please avoid setting option to disabled in tags mode since user can always type text as tag.',
   );
 
-  // `combobox` & `tags` should option be `string` type
-  if (mode === 'tags' || mode === 'combobox') {
-    const hasNumberValue = mergedOptions.some(item => {
-      if (item.options) {
-        return item.options.some(
-          (opt: OptionData) => typeof ('value' in opt ? opt.value : opt.key) === 'number',
-        );
-      }
-      return typeof ('value' in item ? item.value : item.key) === 'number';
-    });
-
-    warning(
-      !hasNumberValue,
-      '`value` of Option should not use number type when `mode` is `tags` or `combobox`.',
-    );
-  }
-
   // `combobox` should not use `optionLabelProp`
   warning(
     mode !== 'combobox' || !optionLabelProp,
diff --git a/components/vc-tree-select/Context.tsx b/components/vc-tree-select/Context.tsx
new file mode 100644
index 000000000..9b7b8d8e7
--- /dev/null
+++ b/components/vc-tree-select/Context.tsx
@@ -0,0 +1,68 @@
+import type {
+  FlattenDataNode,
+  InternalDataEntity,
+  Key,
+  LegacyDataNode,
+  RawValueType,
+} from './interface';
+import type { SkipType } from './hooks/useKeyValueMapping';
+import type { ComputedRef, InjectionKey, PropType } from 'vue';
+import { computed, defineComponent, inject, provide } from 'vue';
+
+interface ContextProps {
+  checkable: boolean;
+  customCheckable: () => any;
+  checkedKeys: Key[];
+  halfCheckedKeys: Key[];
+  treeExpandedKeys: Key[];
+  treeDefaultExpandedKeys: Key[];
+  onTreeExpand: (keys: Key[]) => void;
+  treeDefaultExpandAll: boolean;
+  treeIcon: any;
+  showTreeIcon: boolean;
+  switcherIcon: any;
+  treeLine: boolean;
+  treeNodeFilterProp: string;
+  treeLoadedKeys: Key[];
+  treeMotion: any;
+  loadData: (treeNode: LegacyDataNode) => Promise<unknown>;
+  onTreeLoad: (loadedKeys: Key[]) => void;
+
+  // Cache help content. These can be generated by parent component.
+  // Let's reuse this.
+  getEntityByKey: (key: Key, skipType?: SkipType, ignoreDisabledCheck?: boolean) => FlattenDataNode;
+  getEntityByValue: (
+    value: RawValueType,
+    skipType?: SkipType,
+    ignoreDisabledCheck?: boolean,
+  ) => FlattenDataNode;
+
+  slots: {
+    title?: (data: InternalDataEntity) => any;
+    titleRender?: (data: InternalDataEntity) => any;
+    [key: string]: (d: any) => any | undefined;
+  };
+}
+
+const SelectContextKey: InjectionKey<ComputedRef<ContextProps>> = Symbol('SelectContextKey');
+
+export const SelectContext = defineComponent({
+  name: 'SelectContext',
+  props: {
+    value: { type: Object as PropType<ContextProps> },
+  },
+  setup(props, { slots }) {
+    provide(
+      SelectContextKey,
+      computed(() => props.value),
+    );
+    return () => slots.default?.();
+  },
+});
+
+export const useInjectTreeSelectContext = () => {
+  return inject(
+    SelectContextKey,
+    computed(() => ({} as ContextProps)),
+  );
+};
diff --git a/components/vc-tree-select/OptionList.tsx b/components/vc-tree-select/OptionList.tsx
new file mode 100644
index 000000000..5599754c7
--- /dev/null
+++ b/components/vc-tree-select/OptionList.tsx
@@ -0,0 +1,262 @@
+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 { optionListProps } from './props';
+import useMemo from '../_util/hooks/useMemo';
+import type { EventDataNode } from '../tree';
+import KeyCode from '../_util/KeyCode';
+import Tree from '../vc-tree/Tree';
+import type { TreeProps } from '../vc-tree/props';
+
+const HIDDEN_STYLE = {
+  width: 0,
+  height: 0,
+  display: 'flex',
+  overflow: 'hidden',
+  opacity: 0,
+  border: 0,
+  padding: 0,
+  margin: 0,
+};
+
+interface TreeEventInfo {
+  node: { key: Key };
+  selected?: boolean;
+  checked?: boolean;
+}
+
+type ReviseRefOptionListProps = Omit<RefOptionListProps, 'scrollTo'> & { scrollTo: ScrollTo };
+
+export default defineComponent({
+  name: 'OptionList',
+  inheritAttrs: false,
+  props: optionListProps<DataNode>(),
+  slots: ['notFoundContent', 'menuItemSelectedIcon'],
+  setup(props, { slots, expose }) {
+    const context = useInjectTreeSelectContext();
+
+    const treeRef = ref();
+    const memoOptions = useMemo(
+      () => props.options,
+      [() => props.open, () => props.options],
+      (next, prev) => next[0] && prev[1] !== next[1],
+    );
+
+    const valueKeys = computed(() => {
+      const { checkedKeys, getEntityByValue } = context.value;
+      return checkedKeys.map(val => {
+        const entity = getEntityByValue(val);
+        return entity ? entity.key : null;
+      });
+    });
+
+    const mergedCheckedKeys = computed(() => {
+      const { checkable, halfCheckedKeys } = context.value;
+      if (!checkable) {
+        return null;
+      }
+
+      return {
+        checked: valueKeys.value,
+        halfChecked: halfCheckedKeys,
+      };
+    });
+
+    watch(
+      () => props.open,
+      () => {
+        nextTick(() => {
+          if (props.open && !props.multiple && valueKeys.value.length) {
+            treeRef.value?.scrollTo({ key: valueKeys.value[0] });
+          }
+        });
+      },
+      { immediate: true, flush: 'post' },
+    );
+
+    // ========================== Search ==========================
+    const lowerSearchValue = computed(() => String(props.searchValue).toLowerCase());
+    const filterTreeNode = (treeNode: EventDataNode) => {
+      if (!lowerSearchValue.value) {
+        return false;
+      }
+      return String(treeNode[context.value.treeNodeFilterProp])
+        .toLowerCase()
+        .includes(lowerSearchValue.value);
+    };
+
+    // =========================== Keys ===========================
+    const expandedKeys = ref<Key[]>(context.value.treeDefaultExpandedKeys);
+    const searchExpandedKeys = ref<Key[]>(null);
+
+    watch(
+      () => props.searchValue,
+      () => {
+        if (props.searchValue) {
+          searchExpandedKeys.value = props.flattenOptions.map(o => o.key);
+        }
+      },
+      {
+        immediate: true,
+      },
+    );
+    const mergedExpandedKeys = computed(() => {
+      if (context.value.treeExpandedKeys) {
+        return [...context.value.treeExpandedKeys];
+      }
+      return props.searchValue ? searchExpandedKeys.value : expandedKeys.value;
+    });
+
+    const onInternalExpand = (keys: Key[]) => {
+      expandedKeys.value = keys;
+      searchExpandedKeys.value = keys;
+
+      context.value.onTreeExpand?.(keys);
+    };
+
+    // ========================== Events ==========================
+    const onListMouseDown = (event: MouseEvent) => {
+      event.preventDefault();
+    };
+
+    const onInternalSelect = (_: Key[], { node: { key } }: TreeEventInfo) => {
+      const { getEntityByKey, checkable, checkedKeys } = context.value;
+      const entity = getEntityByKey(key, checkable ? 'checkbox' : 'select');
+      if (entity !== null) {
+        props.onSelect?.(entity.data.value, {
+          selected: !checkedKeys.includes(entity.data.value),
+        });
+      }
+
+      if (!props.multiple) {
+        props.onToggleOpen?.(false);
+      }
+    };
+
+    // ========================= Keyboard =========================
+    const activeKey = ref<Key>(null);
+    const activeEntity = computed(() => context.value.getEntityByKey(activeKey.value));
+
+    const setActiveKey = (key: Key) => {
+      activeKey.value = key;
+    };
+    expose({
+      scrollTo: (...args: any[]) => treeRef.value?.scrollTo?.(...args),
+      onKeydown: (event: KeyboardEvent) => {
+        const { which } = event;
+        switch (which) {
+          // >>> Arrow keys
+          case KeyCode.UP:
+          case KeyCode.DOWN:
+          case KeyCode.LEFT:
+          case KeyCode.RIGHT:
+            treeRef.value?.onKeydown(event);
+            break;
+
+          // >>> Select item
+          case KeyCode.ENTER: {
+            const { selectable, value } = activeEntity.value?.data.node || {};
+            if (selectable !== false) {
+              onInternalSelect(null, {
+                node: { key: activeKey.value },
+                selected: !context.value.checkedKeys.includes(value),
+              });
+            }
+            break;
+          }
+
+          // >>> Close
+          case KeyCode.ESC: {
+            props.onToggleOpen(false);
+          }
+        }
+      },
+      onKeyup: () => {},
+    } as ReviseRefOptionListProps);
+
+    return () => {
+      const {
+        prefixCls,
+        height,
+        itemHeight,
+        virtual,
+        multiple,
+        searchValue,
+        open,
+        notFoundContent = slots.notFoundContent?.(),
+        onMouseenter,
+      } = props;
+      const {
+        checkable,
+        treeDefaultExpandAll,
+        treeIcon,
+        showTreeIcon,
+        switcherIcon,
+        treeLine,
+        loadData,
+        treeLoadedKeys,
+        treeMotion,
+        onTreeLoad,
+      } = context.value;
+      // ========================== Render ==========================
+      if (memoOptions.value.length === 0) {
+        return (
+          <div role="listbox" class={`${prefixCls}-empty`} onMousedown={onListMouseDown}>
+            {notFoundContent}
+          </div>
+        );
+      }
+
+      const treeProps: Partial<TreeProps> = {};
+      if (treeLoadedKeys) {
+        treeProps.loadedKeys = treeLoadedKeys;
+      }
+      if (mergedExpandedKeys.value) {
+        treeProps.expandedKeys = mergedExpandedKeys.value;
+      }
+      return (
+        <div onMousedown={onListMouseDown} onMouseenter={onMouseenter}>
+          {activeEntity.value && open && (
+            <span style={HIDDEN_STYLE} aria-live="assertive">
+              {activeEntity.value.data.value}
+            </span>
+          )}
+
+          <Tree
+            ref={treeRef}
+            focusable={false}
+            prefixCls={`${prefixCls}-tree`}
+            treeData={memoOptions.value as TreeDataNode[]}
+            height={height}
+            itemHeight={itemHeight}
+            virtual={virtual}
+            multiple={multiple}
+            icon={treeIcon}
+            showIcon={showTreeIcon}
+            switcherIcon={switcherIcon}
+            showLine={treeLine}
+            loadData={searchValue ? null : (loadData as any)}
+            motion={treeMotion}
+            // We handle keys by out instead tree self
+            checkable={checkable}
+            checkStrictly
+            checkedKeys={mergedCheckedKeys.value}
+            selectedKeys={!checkable ? valueKeys.value : []}
+            defaultExpandAll={treeDefaultExpandAll}
+            {...treeProps}
+            // Proxy event out
+            onActiveChange={setActiveKey}
+            onSelect={onInternalSelect}
+            onCheck={onInternalSelect as any}
+            onExpand={onInternalExpand}
+            onLoad={onTreeLoad}
+            filterTreeNode={filterTreeNode}
+            v-slots={{ ...slots, checkable: context.value.customCheckable }}
+          />
+        </div>
+      );
+    };
+  },
+});
diff --git a/components/vc-tree-select/TreeNode.tsx b/components/vc-tree-select/TreeNode.tsx
new file mode 100644
index 000000000..af6b752e0
--- /dev/null
+++ b/components/vc-tree-select/TreeNode.tsx
@@ -0,0 +1,15 @@
+/* istanbul ignore file */
+
+import type { FunctionalComponent } from 'vue';
+import type { DataNode, Key } from './interface';
+
+export interface TreeNodeProps extends Omit<DataNode, 'children'> {
+  value: Key;
+}
+
+/** This is a placeholder, not real render in dom */
+const TreeNode: FunctionalComponent<TreeNodeProps> & { isTreeSelectNode: boolean } = () => null;
+TreeNode.inheritAttrs = false;
+TreeNode.displayName = 'ATreeSelectNode';
+TreeNode.isTreeSelectNode = true;
+export default TreeNode;
diff --git a/components/vc-tree-select/TreeSelect.tsx b/components/vc-tree-select/TreeSelect.tsx
new file mode 100644
index 000000000..1f2d1684c
--- /dev/null
+++ b/components/vc-tree-select/TreeSelect.tsx
@@ -0,0 +1,6 @@
+import generate from './generate';
+import OptionList from './OptionList';
+
+const TreeSelect = generate({ prefixCls: 'vc-tree-select', optionList: OptionList as any });
+
+export default TreeSelect;
diff --git a/components/vc-tree-select/assets/icons.png b/components/vc-tree-select/assets/icons.png
deleted file mode 100644
index ffda01ef1..000000000
Binary files a/components/vc-tree-select/assets/icons.png and /dev/null differ
diff --git a/components/vc-tree-select/assets/index.less b/components/vc-tree-select/assets/index.less
deleted file mode 100644
index 17c4329f1..000000000
--- a/components/vc-tree-select/assets/index.less
+++ /dev/null
@@ -1,2 +0,0 @@
-@import './select.less';
-@import './tree.less';
diff --git a/components/vc-tree-select/assets/loading.gif b/components/vc-tree-select/assets/loading.gif
deleted file mode 100644
index e8c289293..000000000
Binary files a/components/vc-tree-select/assets/loading.gif and /dev/null differ
diff --git a/components/vc-tree-select/assets/minus.gif b/components/vc-tree-select/assets/minus.gif
deleted file mode 100644
index d561d36a9..000000000
Binary files a/components/vc-tree-select/assets/minus.gif and /dev/null differ
diff --git a/components/vc-tree-select/assets/select.less b/components/vc-tree-select/assets/select.less
deleted file mode 100644
index 2dfd7ef67..000000000
--- a/components/vc-tree-select/assets/select.less
+++ /dev/null
@@ -1,541 +0,0 @@
-@selectPrefixCls: rc-tree-select;
-
-.effect() {
-  animation-duration: 0.3s;
-  animation-fill-mode: both;
-  transform-origin: 0 0;
-}
-
-.@{selectPrefixCls} {
-  box-sizing: border-box;
-  display: inline-block;
-  position: relative;
-  vertical-align: middle;
-  color: #666;
-
-  &-allow-clear {
-    .@{selectPrefixCls}-selection--single .@{selectPrefixCls}-selection__rendered {
-      padding-right: 40px;
-    }
-  }
-
-  ul,
-  li {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-
-  > ul > li > a {
-    padding: 0;
-    background-color: #fff;
-  }
-
-  // arrow
-  &-arrow {
-    height: 26px;
-    position: absolute;
-    top: 1px;
-    right: 1px;
-    width: 20px;
-    &:after {
-      content: '';
-      border-color: #999999 transparent transparent transparent;
-      border-style: solid;
-      border-width: 5px 4px 0 4px;
-      height: 0;
-      width: 0;
-      margin-left: -4px;
-      margin-top: -2px;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-    }
-  }
-
-  &-selection {
-    outline: none;
-    user-select: none;
-    -webkit-user-select: none;
-
-    box-sizing: border-box;
-    display: block;
-
-    background-color: #fff;
-    border-radius: 6px;
-    border: 1px solid #d9d9d9;
-
-    &__clear {
-      font-weight: bold;
-      position: absolute;
-    }
-  }
-
-  &-enabled {
-    .@{selectPrefixCls}-selection {
-      &:hover {
-        border-color: #23c0fa;
-        box-shadow: 0 0 2px fadeout(#2db7f5, 20%);
-      }
-      &:active {
-        border-color: #2db7f5;
-      }
-    }
-
-    &.@{selectPrefixCls}-focused {
-      .@{selectPrefixCls}-selection {
-        //border-color: #23c0fa;
-        border-color: #7700fa;
-        box-shadow: 0 0 2px fadeout(#2db7f5, 20%);
-      }
-    }
-  }
-
-  &-selection--single {
-    height: 28px;
-    cursor: pointer;
-    position: relative;
-
-    .@{selectPrefixCls}-selection__rendered {
-      display: block;
-      padding-left: 10px;
-      padding-right: 20px;
-      line-height: 28px;
-    }
-
-    .@{selectPrefixCls}-selection-selected-value {
-      display: block;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-
-    .@{selectPrefixCls}-selection__clear {
-      top: 5px;
-      right: 20px;
-      &:after {
-        content: '×';
-      }
-    }
-  }
-
-  &-disabled {
-    color: #ccc;
-    cursor: not-allowed;
-
-    .@{selectPrefixCls}-selection--single,
-    .@{selectPrefixCls}-selection__choice__remove {
-      cursor: not-allowed;
-      color: #ccc;
-
-      &:hover {
-        cursor: not-allowed;
-        color: #ccc;
-      }
-    }
-  }
-
-  &-search__field__wrap {
-    display: inline-block;
-    position: relative;
-  }
-
-  &-search__field__placeholder {
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 3px;
-    color: #aaa;
-  }
-
-  &-search__field__mirror {
-    position: absolute;
-    top: 0;
-    left: -9999px;
-    white-space: pre;
-    pointer-events: none;
-  }
-
-  &-search--inline {
-    float: left;
-    width: 100%;
-    .@{selectPrefixCls}-search__field__wrap {
-      width: 100%;
-    }
-    .@{selectPrefixCls}-search__field {
-      border: none;
-      font-size: 100%;
-      //margin-top: 5px;
-      background: transparent;
-      outline: 0;
-      width: 100%;
-    }
-    > i {
-      float: right;
-    }
-  }
-
-  &-enabled&-selection--multiple {
-    cursor: text;
-  }
-
-  &-selection--multiple {
-    min-height: 28px;
-
-    .@{selectPrefixCls}-search--inline {
-      width: auto;
-      .@{selectPrefixCls}-search__field {
-        width: 0.75em;
-      }
-    }
-
-    .@{selectPrefixCls}-search__field__placeholder {
-      top: 5px;
-      left: 8px;
-    }
-
-    .@{selectPrefixCls}-selection__rendered {
-      //display: inline-block;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      padding-left: 8px;
-      padding-bottom: 2px;
-      padding-right: 10px;
-    }
-
-    > ul > li {
-      margin-top: 4px;
-      height: 20px;
-      line-height: 20px;
-    }
-
-    .@{selectPrefixCls}-selection__clear {
-      top: 5px;
-      right: 8px;
-    }
-  }
-
-  &-enabled {
-    .@{selectPrefixCls}-selection__choice {
-      cursor: default;
-      &:hover {
-        .@{selectPrefixCls}-selection__choice__remove {
-          opacity: 1;
-          transform: scale(1);
-        }
-        .@{selectPrefixCls}-selection__choice__remove
-          + .@{selectPrefixCls}-selection__choice__content {
-          margin-left: -8px;
-          margin-right: 8px;
-        }
-      }
-    }
-  }
-
-  & &-selection__choice {
-    background-color: #f3f3f3;
-    border-radius: 4px;
-    float: left;
-    padding: 0 15px;
-    margin-right: 4px;
-    position: relative;
-    overflow: hidden;
-    transition: padding 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045),
-      width 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045);
-
-    &__content {
-      margin-left: 0;
-      margin-right: 0;
-      transition: margin 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
-    }
-
-    &-zoom-enter,
-    &-zoom-appear,
-    &-zoom-leave {
-      .effect();
-      opacity: 0;
-      animation-play-state: paused;
-      animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-    }
-
-    &-zoom-leave {
-      opacity: 1;
-      animation-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
-    }
-
-    &-zoom-enter.@{selectPrefixCls}-selection__choice-zoom-enter-active,
-    &-zoom-appear.@{selectPrefixCls}-selection__choice-zoom-appear-active {
-      animation-play-state: running;
-      animation-name: rcSelectChoiceZoomIn;
-    }
-
-    &-zoom-leave.@{selectPrefixCls}-selection__choice-zoom-leave-active {
-      animation-play-state: running;
-      animation-name: rcSelectChoiceZoomOut;
-    }
-
-    @keyframes rcSelectChoiceZoomIn {
-      0% {
-        transform: scale(0.6);
-        opacity: 0;
-      }
-      100% {
-        transform: scale(1);
-        opacity: 1;
-      }
-    }
-
-    @keyframes rcSelectChoiceZoomOut {
-      to {
-        transform: scale(0);
-        opacity: 0;
-      }
-    }
-
-    &__remove {
-      color: #919191;
-      cursor: pointer;
-      font-weight: bold;
-      padding: 0 0 0 8px;
-      position: absolute;
-      opacity: 0;
-      transform: scale(0);
-      top: 0;
-      right: 2px;
-      transition: opacity 0.3s, transform 0.3s;
-
-      &:before {
-        content: '×';
-      }
-
-      &:hover {
-        color: #333;
-      }
-    }
-  }
-
-  &-dropdown {
-    background-color: white;
-    border: 1px solid #d9d9d9;
-    box-shadow: 0 0px 4px #d9d9d9;
-    border-radius: 4px;
-    box-sizing: border-box;
-    z-index: 100;
-    left: -9999px;
-    top: -9999px;
-    //border-top: none;
-    //border-top-left-radius: 0;
-    //border-top-right-radius: 0;
-    position: absolute;
-    outline: none;
-
-    &-hidden {
-      display: none;
-    }
-
-    &-menu {
-      outline: none;
-      margin: 0;
-      padding: 0;
-      list-style: none;
-      z-index: 9999;
-
-      > li {
-        margin: 0;
-        padding: 0;
-      }
-
-      &-item-group-list {
-        margin: 0;
-        padding: 0;
-
-        > li.@{selectPrefixCls}-menu-item {
-          padding-left: 20px;
-        }
-      }
-
-      &-item-group-title {
-        color: #999;
-        line-height: 1.5;
-        padding: 8px 10px;
-        border-bottom: 1px solid #dedede;
-      }
-
-      li&-item {
-        margin: 0;
-        position: relative;
-        display: block;
-        padding: 7px 10px;
-        font-weight: normal;
-        color: #666666;
-        white-space: nowrap;
-
-        &-selected {
-          background-color: #ddd;
-        }
-
-        &-active {
-          background-color: #5897fb;
-          color: white;
-          cursor: pointer;
-        }
-
-        &-disabled {
-          color: #ccc;
-          cursor: not-allowed;
-        }
-
-        &-divider {
-          height: 1px;
-          margin: 1px 0;
-          overflow: hidden;
-          background-color: #e5e5e5;
-          line-height: 0;
-        }
-      }
-    }
-
-    &-slide-up-enter,
-    &-slide-up-appear {
-      .effect();
-      opacity: 0;
-      animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
-      animation-play-state: paused;
-    }
-
-    &-slide-up-leave {
-      .effect();
-      opacity: 1;
-      animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
-      animation-play-state: paused;
-    }
-
-    &-slide-up-enter&-slide-up-enter-active&-placement-bottomLeft,
-    &-slide-up-appear&-slide-up-appear-active&-placement-bottomLeft {
-      animation-name: rcSelectDropdownSlideUpIn;
-      animation-play-state: running;
-    }
-
-    &-slide-up-leave&-slide-up-leave-active&-placement-bottomLeft {
-      animation-name: rcSelectDropdownSlideUpOut;
-      animation-play-state: running;
-    }
-
-    &-slide-up-enter&-slide-up-enter-active&-placement-topLeft,
-    &-slide-up-appear&-slide-up-appear-active&-placement-topLeft {
-      animation-name: rcSelectDropdownSlideDownIn;
-      animation-play-state: running;
-    }
-
-    &-slide-up-leave&-slide-up-leave-active&-placement-topLeft {
-      animation-name: rcSelectDropdownSlideDownOut;
-      animation-play-state: running;
-    }
-
-    @keyframes rcSelectDropdownSlideUpIn {
-      0% {
-        opacity: 0;
-        transform-origin: 0% 0%;
-        transform: scaleY(0);
-      }
-      100% {
-        opacity: 1;
-        transform-origin: 0% 0%;
-        transform: scaleY(1);
-      }
-    }
-    @keyframes rcSelectDropdownSlideUpOut {
-      0% {
-        opacity: 1;
-        transform-origin: 0% 0%;
-        transform: scaleY(1);
-      }
-      100% {
-        opacity: 0;
-        transform-origin: 0% 0%;
-        transform: scaleY(0);
-      }
-    }
-
-    @keyframes rcSelectDropdownSlideDownIn {
-      0% {
-        opacity: 0;
-        transform-origin: 0% 100%;
-        transform: scaleY(0);
-      }
-      100% {
-        opacity: 1;
-        transform-origin: 0% 100%;
-        transform: scaleY(1);
-      }
-    }
-    @keyframes rcSelectDropdownSlideDownOut {
-      0% {
-        opacity: 1;
-        transform-origin: 0% 100%;
-        transform: scaleY(1);
-      }
-      100% {
-        opacity: 0;
-        transform-origin: 0% 100%;
-        transform: scaleY(0);
-      }
-    }
-  }
-
-  &-dropdown-search {
-    display: block;
-    padding: 4px;
-    .@{selectPrefixCls}-search__field__wrap {
-      width: 100%;
-    }
-    .@{selectPrefixCls}-search__field__placeholder {
-      top: 4px;
-    }
-    .@{selectPrefixCls}-search__field {
-      padding: 4px;
-      width: 100%;
-      box-sizing: border-box;
-      border: 1px solid #d9d9d9;
-      border-radius: 4px;
-      outline: none;
-    }
-    &.@{selectPrefixCls}-search--hide {
-      display: none;
-    }
-  }
-
-  &-open {
-    .@{selectPrefixCls}-arrow:after {
-      border-color: transparent transparent #888 transparent;
-      border-width: 0 4px 5px 4px;
-    }
-  }
-
-  &-not-found {
-    display: inline-block;
-    padding: 8px;
-  }
-}
-
-.custom-icon-demo {
-  .@{selectPrefixCls} {
-    &-selection__choice__remove {
-      &:before {
-        content: '';
-      }
-    }
-
-    &-arrow {
-      &:after {
-        display: none;
-      }
-    }
-
-    &-selection__clear {
-      &:after {
-        content: '';
-      }
-    }
-  }
-}
diff --git a/components/vc-tree-select/assets/tree.less b/components/vc-tree-select/assets/tree.less
deleted file mode 100644
index bcbc68946..000000000
--- a/components/vc-tree-select/assets/tree.less
+++ /dev/null
@@ -1,166 +0,0 @@
-@treePrefixCls: rc-tree-select-tree;
-.@{treePrefixCls} {
-  margin: 0;
-  padding: 5px;
-  li {
-    padding: 0;
-    margin: 0;
-    list-style: none;
-    white-space: nowrap;
-    outline: 0;
-    a[draggable],
-    a[draggable='true'] {
-      color: #333;
-      -moz-user-select: none;
-      -khtml-user-select: none;
-      -webkit-user-select: none;
-      user-select: none;
-      /* Required to make elements draggable in old WebKit */
-      -khtml-user-drag: element;
-      -webkit-user-drag: element;
-    }
-    &.drag-over {
-      > a[draggable] {
-        background-color: #316ac5;
-        color: white;
-        border: 1px #316ac5 solid;
-        opacity: 0.8;
-      }
-    }
-    &.drag-over-gap-top {
-      > a[draggable] {
-        border-top: 2px blue solid;
-      }
-    }
-    &.drag-over-gap-bottom {
-      > a[draggable] {
-        border-bottom: 2px blue solid;
-      }
-    }
-    &.filter-node {
-      > .@{treePrefixCls}-node-content-wrapper {
-        color: #a60000 !important;
-        font-weight: bold !important;
-      }
-    }
-    ul {
-      margin: 0;
-      padding: 0 0 0 18px;
-      &.@{treePrefixCls}-line {
-        background: url('data:image/gif;base64,R0lGODlhCQACAIAAAMzMzP///yH5BAEAAAEALAAAAAAJAAIAAAIEjI9pUAA7')
-          0 0 repeat-y;
-      }
-    }
-    a {
-      display: inline-block;
-      padding: 1px 3px 0 0;
-      margin: 0;
-      cursor: pointer;
-      height: 17px;
-      text-decoration: none;
-      vertical-align: top;
-    }
-    span {
-      &.@{treePrefixCls}-switcher,
-      &.@{treePrefixCls}-checkbox,
-      &.@{treePrefixCls}-iconEle {
-        line-height: 16px;
-        margin-right: 2px;
-        width: 16px;
-        height: 16px;
-        display: inline-block;
-        vertical-align: middle;
-        border: 0 none;
-        cursor: pointer;
-        outline: none;
-        background-color: transparent;
-        background-repeat: no-repeat;
-        background-attachment: scroll;
-        background-image: url('data:image/png;base64,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');
-      }
-      &.@{treePrefixCls}-icon_loading {
-        margin-right: 2px;
-        vertical-align: top;
-        background: url('data:image/gif;base64,R0lGODlhEAAQAKIGAMLY8YSx5HOm4Mjc88/g9Ofw+v///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCgAGACwAAAAAEAAQAAADMGi6RbUwGjKIXCAA016PgRBElAVlG/RdLOO0X9nK61W39qvqiwz5Ls/rRqrggsdkAgAh+QQFCgAGACwCAAAABwAFAAADD2hqELAmiFBIYY4MAutdCQAh+QQFCgAGACwGAAAABwAFAAADD1hU1kaDOKMYCGAGEeYFCQAh+QQFCgAGACwKAAIABQAHAAADEFhUZjSkKdZqBQG0IELDQAIAIfkEBQoABgAsCgAGAAUABwAAAxBoVlRKgyjmlAIBqCDCzUoCACH5BAUKAAYALAYACgAHAAUAAAMPaGpFtYYMAgJgLogA610JACH5BAUKAAYALAIACgAHAAUAAAMPCAHWFiI4o1ghZZJB5i0JACH5BAUKAAYALAAABgAFAAcAAAMQCAFmIaEp1motpDQySMNFAgA7')
-          no-repeat scroll 0 0 transparent;
-      }
-      &.@{treePrefixCls}-switcher {
-        &-noop {
-          cursor: auto;
-          background: none;
-        }
-        &_open {
-          background-position: -93px -56px;
-        }
-        &_close {
-          background-position: -75px -56px;
-        }
-      }
-      &.@{treePrefixCls}-checkbox {
-        width: 13px;
-        height: 13px;
-        margin: 0 3px;
-        background-position: 0 0;
-        &-checked {
-          background-position: -14px 0;
-        }
-        &-indeterminate {
-          background-position: -14px -28px;
-        }
-        &-disabled {
-          background-position: 0 -56px;
-        }
-        &.@{treePrefixCls}-checkbox-checked.@{treePrefixCls}-checkbox-disabled {
-          background-position: -14px -56px;
-        }
-        &.@{treePrefixCls}-checkbox-indeterminate.@{treePrefixCls}-checkbox-disabled {
-          position: relative;
-          background: #ccc;
-          border-radius: 3px;
-          &::after {
-            content: ' ';
-            -webkit-transform: scale(1);
-            transform: scale(1);
-            position: absolute;
-            left: 3px;
-            top: 5px;
-            width: 5px;
-            height: 0;
-            border: 2px solid #fff;
-            border-top: 0;
-            border-left: 0;
-          }
-        }
-      }
-    }
-  }
-  &-child-tree {
-    display: none;
-    &-open {
-      display: block;
-    }
-  }
-  &-treenode-disabled {
-    > span,
-    > a,
-    > a span {
-      color: #ccc;
-      cursor: not-allowed;
-    }
-  }
-  &-node-selected {
-    background-color: #ffe6b0;
-    border: 1px #ffb951 solid;
-    opacity: 0.8;
-  }
-  &-icon__open {
-    margin-right: 2px;
-    background-position: -110px -16px;
-    vertical-align: top;
-  }
-  &-icon__close {
-    margin-right: 2px;
-    background-position: -110px 0;
-    vertical-align: top;
-  }
-}
diff --git a/components/vc-tree-select/generate.tsx b/components/vc-tree-select/generate.tsx
new file mode 100644
index 000000000..a5fc4bf25
--- /dev/null
+++ b/components/vc-tree-select/generate.tsx
@@ -0,0 +1,515 @@
+import type { GenerateConfig } from '../vc-select/generate';
+import generateSelector from '../vc-select/generate';
+import TreeNode from './TreeNode';
+import type {
+  DefaultValueType,
+  DataNode,
+  LabelValueType,
+  RawValueType,
+  ChangeEventExtra,
+  SelectSource,
+  FlattenDataNode,
+} from './interface';
+import {
+  flattenOptions,
+  filterOptions,
+  isValueDisabled,
+  findValueOption,
+  addValue,
+  removeValue,
+  getRawValueLabeled,
+  toArray,
+  fillFieldNames,
+} from './utils/valueUtil';
+import warningProps from './utils/warningPropsUtil';
+import { SelectContext } from './Context';
+import useTreeData from './hooks/useTreeData';
+import useKeyValueMap from './hooks/useKeyValueMap';
+import useKeyValueMapping from './hooks/useKeyValueMapping';
+import { formatStrategyKeys, SHOW_ALL, SHOW_PARENT, SHOW_CHILD } from './utils/strategyUtil';
+import { fillAdditionalInfo } from './utils/legacyUtil';
+import useSelectValues from './hooks/useSelectValues';
+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 { convertDataToEntities } from '../vc-tree/utils/treeUtil';
+import { conductCheck } from '../vc-tree/utils/conductUtil';
+import { warning } from '../vc-util/warning';
+import { INTERNAL_PROPS_MARK } from '../vc-select/interface/generator';
+
+const OMIT_PROPS: (keyof TreeSelectProps)[] = [
+  'expandedKeys' as any,
+  'treeData',
+  'treeCheckable',
+  'showCheckedStrategy',
+  'searchPlaceholder',
+  'treeLine',
+  'treeIcon',
+  'showTreeIcon',
+  'switcherIcon',
+  'treeNodeFilterProp',
+  'filterTreeNode',
+  'dropdownPopupAlign',
+  'treeDefaultExpandAll',
+  'treeCheckStrictly',
+  'treeExpandedKeys',
+  'treeLoadedKeys',
+  'treeMotion',
+  'onTreeExpand',
+  'onTreeLoad',
+  'labelRender',
+  'loadData',
+  'treeDataSimpleMode',
+  'treeNodeLabelProp',
+  'treeDefaultExpandedKeys',
+  'bordered',
+];
+
+export default function generate(config: {
+  prefixCls: string;
+  optionList: GenerateConfig<DataNode>['components']['optionList'];
+}) {
+  const { prefixCls, optionList } = config;
+
+  const RefSelect = generateSelector<DataNode>({
+    prefixCls,
+    components: {
+      optionList,
+    },
+    // Not use generate since we will handle ourself
+    convertChildrenToData: () => null,
+    flattenOptions,
+    // Handle `optionLabelProp` in TreeSelect component
+    getLabeledValue: getLabeledValue as any,
+    filterOptions,
+    isValueDisabled,
+    findValueOption,
+    omitDOMProps: (props: TreeSelectProps<any>) => omit(props, OMIT_PROPS),
+  });
+
+  return defineComponent({
+    name: 'TreeSelect',
+    props: treeSelectProps(),
+    slots: [
+      'title',
+      'placeholder',
+      'maxTagPlaceholder',
+      'treeIcon',
+      'switcherIcon',
+      'notFoundContent',
+      'treeCheckable',
+    ],
+    TreeNode,
+    SHOW_ALL,
+    SHOW_PARENT,
+    SHOW_CHILD,
+    setup(props, { expose, slots, attrs }) {
+      const mergedCheckable = computed(() => props.treeCheckable || props.treeCheckStrictly);
+      const mergedMultiple = computed(() => props.multiple || mergedCheckable.value);
+      const treeConduction = computed(() => props.treeCheckable && !props.treeCheckStrictly);
+      const mergedLabelInValue = computed(() => props.treeCheckStrictly || props.labelInValue);
+
+      // ======================= Tree Data =======================
+      // FieldNames
+      const mergedFieldNames = computed(() => fillFieldNames(props.fieldNames, true));
+      // Legacy both support `label` or `title` if not set.
+      // We have to fallback to function to handle this
+      const getTreeNodeTitle = (node: DataNode) => {
+        if (!props.treeData) {
+          return node.title;
+        }
+
+        if (mergedFieldNames.value?.label) {
+          return node[mergedFieldNames.value.label];
+        }
+
+        return node.label || node.title;
+      };
+
+      const getTreeNodeLabelProp = (entity: FlattenDataNode) => {
+        const { labelRender, treeNodeLabelProp } = props;
+        const { node } = entity.data;
+
+        if (labelRender) {
+          return labelRender(entity);
+        }
+
+        if (treeNodeLabelProp) {
+          return node[treeNodeLabelProp];
+        }
+
+        return getTreeNodeTitle(node);
+      };
+
+      const mergedTreeData = useTreeData(toRef(props, 'treeData'), toRef(props, 'children'), {
+        getLabelProp: getTreeNodeTitle,
+        simpleMode: toRef(props, 'treeDataSimpleMode'),
+        fieldNames: mergedFieldNames,
+      });
+
+      const flattedOptions = computed(() => flattenOptions(mergedTreeData.value));
+      const [cacheKeyMap, cacheValueMap] = useKeyValueMap(flattedOptions);
+      const [getEntityByKey, getEntityByValue] = useKeyValueMapping(cacheKeyMap, cacheValueMap);
+
+      // Only generate keyEntities for check conduction when is `treeCheckable`
+      const conductKeyEntities = computed(() => {
+        if (treeConduction.value) {
+          return convertDataToEntities(mergedTreeData.value).keyEntities;
+        }
+        return null;
+      });
+
+      // ========================== Ref ==========================
+      const selectRef = ref();
+
+      expose({
+        scrollTo: (...args: any[]) => selectRef.value.scrollTo?.(...args),
+        focus: () => selectRef.value.focus?.(),
+        blur: () => selectRef.value?.blur(),
+
+        /** @private Internal usage. It's save to remove if `rc-cascader` not use it any longer */
+        getEntityByValue,
+      });
+
+      const valueRef = ref<DefaultValueType>(props.defaultValue);
+
+      watch(
+        () => props.value,
+        () => {
+          if (props.value !== undefined) {
+            valueRef.value = props.value;
+          }
+        },
+        { immediate: true },
+      );
+
+      /** Get `missingRawValues` which not exist in the tree yet */
+      const splitRawValues = (newRawValues: RawValueType[]) => {
+        const missingRawValues = [];
+        const existRawValues = [];
+
+        // Keep missing value in the cache
+        newRawValues.forEach(val => {
+          if (getEntityByValue(val)) {
+            existRawValues.push(val);
+          } else {
+            missingRawValues.push(val);
+          }
+        });
+
+        return { missingRawValues, existRawValues };
+      };
+
+      const rawValues = ref<RawValueType[]>([]);
+      const rawHalfCheckedKeys = ref<RawValueType[]>([]);
+
+      watchEffect(() => {
+        const valueHalfCheckedKeys: RawValueType[] = [];
+        const newRawValues: RawValueType[] = [];
+
+        toArray(valueRef.value).forEach(item => {
+          if (item && typeof item === 'object' && 'value' in item) {
+            if (item.halfChecked && props.treeCheckStrictly) {
+              const entity = getEntityByValue(item.value);
+              valueHalfCheckedKeys.push(entity ? entity.key : item.value);
+            } else {
+              newRawValues.push(item.value);
+            }
+          } else {
+            newRawValues.push(item as RawValueType);
+          }
+        });
+
+        // We need do conduction of values
+        if (treeConduction.value) {
+          const { missingRawValues, existRawValues } = splitRawValues(newRawValues);
+          const keyList = existRawValues.map(val => getEntityByValue(val).key);
+
+          const { checkedKeys, halfCheckedKeys } = conductCheck(
+            keyList,
+            true,
+            conductKeyEntities.value,
+          );
+          rawValues.value = [
+            ...missingRawValues,
+            ...checkedKeys.map(key => getEntityByKey(key).data.value),
+          ];
+          rawHalfCheckedKeys.value = halfCheckedKeys;
+        } else {
+          [rawValues.value, rawHalfCheckedKeys.value] = [newRawValues, valueHalfCheckedKeys];
+        }
+      });
+
+      const selectValues = useSelectValues(rawValues, {
+        treeConduction,
+        value: valueRef,
+        showCheckedStrategy: toRef(props, 'showCheckedStrategy'),
+        conductKeyEntities,
+        getEntityByValue,
+        getEntityByKey,
+        getLabelProp: getTreeNodeLabelProp,
+      });
+
+      const triggerChange = (
+        newRawValues: RawValueType[],
+        extra: { triggerValue: RawValueType; selected: boolean },
+        source: SelectSource,
+      ) => {
+        const { onChange, showCheckedStrategy, treeCheckStrictly } = props;
+        const preValue = valueRef.value;
+        valueRef.value = mergedMultiple.value ? newRawValues : newRawValues[0];
+        if (onChange) {
+          let eventValues: RawValueType[] = newRawValues;
+          if (treeConduction.value && showCheckedStrategy !== 'SHOW_ALL') {
+            const keyList = newRawValues.map(val => {
+              const entity = getEntityByValue(val);
+              return entity ? entity.key : val;
+            });
+            const formattedKeyList = formatStrategyKeys(
+              keyList,
+              showCheckedStrategy,
+              conductKeyEntities.value,
+            );
+
+            eventValues = formattedKeyList.map(key => {
+              const entity = getEntityByKey(key);
+              return entity ? entity.data.value : key;
+            });
+          }
+
+          const { triggerValue, selected } = extra || {
+            triggerValue: undefined,
+            selected: undefined,
+          };
+
+          let returnValues = mergedLabelInValue.value
+            ? getRawValueLabeled(eventValues, preValue, getEntityByValue, getTreeNodeLabelProp)
+            : eventValues;
+
+          // We need fill half check back
+          if (treeCheckStrictly) {
+            const halfValues = rawHalfCheckedKeys.value
+              .map(key => {
+                const entity = getEntityByKey(key);
+                return entity ? entity.data.value : key;
+              })
+              .filter(val => !eventValues.includes(val));
+
+            returnValues = [
+              ...(returnValues as LabelValueType[]),
+              ...getRawValueLabeled(halfValues, preValue, getEntityByValue, getTreeNodeLabelProp),
+            ];
+          }
+
+          const additionalInfo = {
+            // [Legacy] Always return as array contains label & value
+            preValue: selectValues.value,
+            triggerValue,
+          } as ChangeEventExtra;
+
+          // [Legacy] Fill legacy data if user query.
+          // This is expansive that we only fill when user query
+          // https://github.com/react-component/tree-select/blob/fe33eb7c27830c9ac70cd1fdb1ebbe7bc679c16a/src/Select.jsx
+          let showPosition = true;
+          if (treeCheckStrictly || (source === 'selection' && !selected)) {
+            showPosition = false;
+          }
+
+          fillAdditionalInfo(
+            additionalInfo,
+            triggerValue,
+            newRawValues,
+            mergedTreeData.value,
+            showPosition,
+          );
+
+          if (mergedCheckable.value) {
+            additionalInfo.checked = selected;
+          } else {
+            additionalInfo.selected = selected;
+          }
+
+          onChange(
+            mergedMultiple.value ? returnValues : returnValues[0],
+            mergedLabelInValue.value
+              ? null
+              : eventValues.map(val => {
+                  const entity = getEntityByValue(val);
+                  return entity ? entity.data.title : null;
+                }),
+            additionalInfo,
+          );
+        }
+      };
+
+      const onInternalSelect = (
+        selectValue: RawValueType,
+        option: DataNode,
+        source: SelectSource,
+      ) => {
+        const eventValue = mergedLabelInValue.value ? selectValue : selectValue;
+
+        if (!mergedMultiple.value) {
+          // Single mode always set value
+          triggerChange([selectValue], { selected: true, triggerValue: selectValue }, source);
+        } else {
+          let newRawValues = addValue(rawValues.value, selectValue);
+
+          // Add keys if tree conduction
+          if (treeConduction.value) {
+            // Should keep missing values
+            const { missingRawValues, existRawValues } = splitRawValues(newRawValues);
+            const keyList = existRawValues.map(val => getEntityByValue(val).key);
+            const { checkedKeys } = conductCheck(keyList, true, conductKeyEntities.value);
+            newRawValues = [
+              ...missingRawValues,
+              ...checkedKeys.map(key => getEntityByKey(key).data.value),
+            ];
+          }
+
+          triggerChange(newRawValues, { selected: true, triggerValue: selectValue }, source);
+        }
+
+        props.onSelect?.(eventValue, option);
+      };
+
+      const onInternalDeselect = (
+        selectValue: RawValueType,
+        option: DataNode,
+        source: SelectSource,
+      ) => {
+        const eventValue = selectValue;
+
+        let newRawValues = removeValue(rawValues.value, selectValue);
+
+        // Remove keys if tree conduction
+        if (treeConduction.value) {
+          const { missingRawValues, existRawValues } = splitRawValues(newRawValues);
+          const keyList = existRawValues.map(val => getEntityByValue(val).key);
+          const { checkedKeys } = conductCheck(
+            keyList,
+            { checked: false, halfCheckedKeys: rawHalfCheckedKeys.value },
+            conductKeyEntities.value,
+          );
+          newRawValues = [
+            ...missingRawValues,
+            ...checkedKeys.map(key => getEntityByKey(key).data.value),
+          ];
+        }
+
+        triggerChange(newRawValues, { selected: false, triggerValue: selectValue }, source);
+
+        props.onDeselect?.(eventValue, option);
+      };
+
+      const onInternalClear = () => {
+        triggerChange([], null, 'clear');
+      };
+
+      // ========================= Open ==========================
+      const onInternalDropdownVisibleChange = (open: boolean) => {
+        if (props.onDropdownVisibleChange) {
+          const legacyParam = {};
+
+          Object.defineProperty(legacyParam, 'documentClickClose', {
+            get() {
+              warning(false, 'Second param of `onDropdownVisibleChange` has been removed.');
+              return false;
+            },
+          });
+
+          (props.onDropdownVisibleChange as any)(open, legacyParam);
+        }
+      };
+
+      // ======================== Warning ========================
+      if (process.env.NODE_ENV !== 'production') {
+        warningProps(props);
+      }
+
+      return () => {
+        const {
+          treeNodeFilterProp,
+          dropdownPopupAlign,
+          filterTreeNode,
+          treeDefaultExpandAll,
+          treeExpandedKeys,
+          treeDefaultExpandedKeys,
+          onTreeExpand,
+          treeIcon,
+          treeMotion,
+          showTreeIcon,
+          switcherIcon,
+          treeLine,
+          loadData,
+          treeLoadedKeys,
+          onTreeLoad,
+        } = props;
+        // ======================== Render =========================
+        // We pass some props into select props style
+        const selectProps = {
+          optionLabelProp: null,
+          optionFilterProp: treeNodeFilterProp,
+          dropdownAlign: dropdownPopupAlign,
+          internalProps: {
+            mark: INTERNAL_PROPS_MARK,
+            onClear: onInternalClear,
+            skipTriggerChange: true,
+            skipTriggerSelect: true,
+            onRawSelect: onInternalSelect,
+            onRawDeselect: onInternalDeselect,
+          },
+          filterOption: filterTreeNode,
+        };
+
+        if (props.filterTreeNode === undefined) {
+          delete selectProps.filterOption;
+        }
+        const selectContext = {
+          checkable: mergedCheckable.value,
+          loadData,
+          treeLoadedKeys,
+          onTreeLoad,
+          checkedKeys: rawValues.value,
+          halfCheckedKeys: rawHalfCheckedKeys.value,
+          treeDefaultExpandAll,
+          treeExpandedKeys,
+          treeDefaultExpandedKeys,
+          onTreeExpand,
+          treeIcon,
+          treeMotion,
+          showTreeIcon,
+          switcherIcon,
+          treeLine,
+          treeNodeFilterProp,
+          getEntityByKey,
+          getEntityByValue,
+          customCheckable: slots.treeCheckable,
+          slots,
+        };
+        return (
+          <SelectContext value={selectContext}>
+            <RefSelect
+              {...attrs}
+              ref={selectRef}
+              mode={mergedMultiple.value ? 'multiple' : null}
+              {...props}
+              {...selectProps}
+              value={selectValues.value}
+              // We will handle this ourself since we need calculate conduction
+              labelInValue
+              options={mergedTreeData.value}
+              onChange={null}
+              onSelect={null}
+              onDeselect={null}
+              onDropdownVisibleChange={onInternalDropdownVisibleChange}
+              v-slots={slots}
+            />
+          </SelectContext>
+        );
+      };
+    },
+  });
+}
diff --git a/components/vc-tree-select/hooks/useKeyValueMap.ts b/components/vc-tree-select/hooks/useKeyValueMap.ts
new file mode 100644
index 000000000..d8183601f
--- /dev/null
+++ b/components/vc-tree-select/hooks/useKeyValueMap.ts
@@ -0,0 +1,26 @@
+import type { ComputedRef, Ref } from 'vue';
+import { ref } from 'vue';
+import { 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());
+
+  watchEffect(() => {
+    const newCacheKeyMap = new Map();
+    const newCacheValueMap = new Map();
+    // Cache options by key
+    flattenOptions.value.forEach((dataNode: FlattenDataNode) => {
+      newCacheKeyMap.set(dataNode.key, dataNode);
+      newCacheValueMap.set(dataNode.data.value, dataNode);
+    });
+    cacheKeyMap.value = newCacheKeyMap;
+    cacheValueMap.value = newCacheValueMap;
+  });
+  return [cacheKeyMap, cacheValueMap];
+}
diff --git a/components/vc-tree-select/hooks/useKeyValueMapping.ts b/components/vc-tree-select/hooks/useKeyValueMapping.ts
new file mode 100644
index 000000000..e385a035a
--- /dev/null
+++ b/components/vc-tree-select/hooks/useKeyValueMapping.ts
@@ -0,0 +1,58 @@
+import type { Ref } from 'vue';
+import type { FlattenDataNode, Key, RawValueType } from '../interface';
+
+export type SkipType = null | 'select' | 'checkbox';
+
+export function isDisabled(dataNode: FlattenDataNode, skipType: SkipType): boolean {
+  if (!dataNode) {
+    return true;
+  }
+
+  const { disabled, disableCheckbox } = dataNode.data.node;
+
+  switch (skipType) {
+    case 'checkbox':
+      return disabled || disableCheckbox;
+
+    default:
+      return disabled;
+  }
+}
+
+export default function useKeyValueMapping(
+  cacheKeyMap: Ref<Map<Key, FlattenDataNode>>,
+  cacheValueMap: Ref<Map<RawValueType, FlattenDataNode>>,
+): [
+  (key: Key, skipType?: SkipType, ignoreDisabledCheck?: boolean) => FlattenDataNode,
+  (value: RawValueType, skipType?: SkipType, ignoreDisabledCheck?: boolean) => FlattenDataNode,
+] {
+  const getEntityByKey = (
+    key: Key,
+    skipType: SkipType = 'select',
+    ignoreDisabledCheck?: boolean,
+  ) => {
+    const dataNode = cacheKeyMap.value.get(key);
+
+    if (!ignoreDisabledCheck && isDisabled(dataNode, skipType)) {
+      return null;
+    }
+
+    return dataNode;
+  };
+
+  const getEntityByValue = (
+    value: RawValueType,
+    skipType: SkipType = 'select',
+    ignoreDisabledCheck?: boolean,
+  ) => {
+    const dataNode = cacheValueMap.value.get(value);
+
+    if (!ignoreDisabledCheck && isDisabled(dataNode, skipType)) {
+      return null;
+    }
+
+    return dataNode;
+  };
+
+  return [getEntityByKey, getEntityByValue];
+}
diff --git a/components/vc-tree-select/hooks/useSelectValues.ts b/components/vc-tree-select/hooks/useSelectValues.ts
new file mode 100644
index 000000000..61992f702
--- /dev/null
+++ b/components/vc-tree-select/hooks/useSelectValues.ts
@@ -0,0 +1,67 @@
+import type { RawValueType, FlattenDataNode, Key, LabelValueType } from '../interface';
+import type { SkipType } from './useKeyValueMapping';
+import { getRawValueLabeled } from '../utils/valueUtil';
+import type { CheckedStrategy } from '../utils/strategyUtil';
+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';
+
+interface Config {
+  treeConduction: Ref<boolean>;
+  /** Current `value` of TreeSelect */
+  value: Ref<DefaultValueType>;
+  showCheckedStrategy: Ref<CheckedStrategy>;
+  conductKeyEntities: Ref<Record<Key, DataEntity>>;
+  getEntityByKey: (key: Key, skipType?: SkipType, ignoreDisabledCheck?: boolean) => FlattenDataNode;
+  getEntityByValue: (
+    value: RawValueType,
+    skipType?: SkipType,
+    ignoreDisabledCheck?: boolean,
+  ) => FlattenDataNode;
+  getLabelProp: (entity: FlattenDataNode) => any;
+}
+
+/** Return  */
+export default function useSelectValues(
+  rawValues: Ref<RawValueType[]>,
+  {
+    value,
+    getEntityByValue,
+    getEntityByKey,
+    treeConduction,
+    showCheckedStrategy,
+    conductKeyEntities,
+    getLabelProp,
+  }: Config,
+): Ref<LabelValueType[]> {
+  const rawValueLabeled = ref([]);
+  watchEffect(() => {
+    let mergedRawValues = rawValues.value;
+
+    if (treeConduction.value) {
+      const rawKeys = formatStrategyKeys(
+        rawValues.value.map(val => {
+          const entity = getEntityByValue(val);
+          return entity ? entity.key : val;
+        }),
+        showCheckedStrategy.value,
+        conductKeyEntities.value,
+      );
+
+      mergedRawValues = rawKeys.map(key => {
+        const entity = getEntityByKey(key);
+        return entity ? entity.data.value : key;
+      });
+    }
+
+    rawValueLabeled.value = getRawValueLabeled(
+      mergedRawValues,
+      value.value,
+      getEntityByValue,
+      getLabelProp,
+    );
+  });
+  return rawValueLabeled;
+}
diff --git a/components/vc-tree-select/hooks/useTreeData.ts b/components/vc-tree-select/hooks/useTreeData.ts
new file mode 100644
index 000000000..22b8aaef0
--- /dev/null
+++ b/components/vc-tree-select/hooks/useTreeData.ts
@@ -0,0 +1,152 @@
+import { warning } from '../../vc-util/warning';
+import type { ComputedRef, Ref } from 'vue';
+import { computed } from 'vue';
+import type {
+  DataNode,
+  InternalDataEntity,
+  SimpleModeConfig,
+  RawValueType,
+  FieldNames,
+} from '../interface';
+import { convertChildrenToData } from '../utils/legacyUtil';
+
+const MAX_WARNING_TIMES = 10;
+
+function parseSimpleTreeData(
+  treeData: DataNode[],
+  { id, pId, rootPId }: SimpleModeConfig,
+): DataNode[] {
+  const keyNodes = {};
+  const rootNodeList = [];
+
+  // Fill in the map
+  const nodeList = treeData.map(node => {
+    const clone = { ...node };
+    const key = clone[id];
+    keyNodes[key] = clone;
+    clone.key = clone.key || key;
+    return clone;
+  });
+
+  // Connect tree
+  nodeList.forEach(node => {
+    const parentKey = node[pId];
+    const parent = keyNodes[parentKey];
+
+    // Fill parent
+    if (parent) {
+      parent.children = parent.children || [];
+      parent.children.push(node);
+    }
+
+    // Fill root tree node
+    if (parentKey === rootPId || (!parent && rootPId === null)) {
+      rootNodeList.push(node);
+    }
+  });
+
+  return rootNodeList;
+}
+
+/**
+ * Format `treeData` with `value` & `key` which is used for calculation
+ */
+function formatTreeData(
+  treeData: DataNode[],
+  getLabelProp: (node: DataNode) => any,
+  fieldNames: FieldNames,
+): InternalDataEntity[] {
+  let warningTimes = 0;
+  const valueSet = new Set<RawValueType>();
+
+  // Field names
+  const { value: fieldValue, children: fieldChildren } = fieldNames;
+
+  function dig(dataNodes: DataNode[]) {
+    return (dataNodes || []).map(node => {
+      const { key, disableCheckbox, disabled } = node;
+
+      const value = node[fieldValue];
+      const mergedValue = fieldValue in node ? value : key;
+
+      const dataNode: InternalDataEntity = {
+        disableCheckbox,
+        disabled,
+        key: key !== null && key !== undefined ? key : mergedValue,
+        value: mergedValue,
+        title: getLabelProp(node),
+        node,
+        dataRef: node,
+      };
+
+      if (node.slots) {
+        dataNode.slots = node.slots;
+      }
+
+      // Check `key` & `value` and warning user
+      if (process.env.NODE_ENV !== 'production') {
+        if (
+          key !== null &&
+          key !== undefined &&
+          value !== undefined &&
+          String(key) !== String(value) &&
+          warningTimes < MAX_WARNING_TIMES
+        ) {
+          warningTimes += 1;
+          warning(
+            false,
+            `\`key\` or \`value\` with TreeNode must be the same or you can remove one of them. key: ${key}, value: ${value}.`,
+          );
+        }
+
+        warning(!valueSet.has(value), `Same \`value\` exist in the tree: ${value}`);
+        valueSet.add(value);
+      }
+
+      if (fieldChildren in node) {
+        dataNode.children = dig(node[fieldChildren]);
+      }
+
+      return dataNode;
+    });
+  }
+
+  return dig(treeData);
+}
+
+/**
+ * Convert `treeData` or `children` into formatted `treeData`.
+ * Will not re-calculate if `treeData` or `children` not change.
+ */
+export default function useTreeData(
+  treeData: Ref<DataNode[]>,
+  children: Ref<any[]>,
+  {
+    getLabelProp,
+    simpleMode,
+    fieldNames,
+  }: {
+    getLabelProp: (node: DataNode) => any;
+    simpleMode: Ref<boolean | SimpleModeConfig>;
+    fieldNames: Ref<FieldNames>;
+  },
+): ComputedRef<InternalDataEntity[]> {
+  return computed(() => {
+    if (treeData.value) {
+      return formatTreeData(
+        simpleMode.value
+          ? parseSimpleTreeData(treeData.value, {
+              id: 'id',
+              pId: 'pId',
+              rootPId: null,
+              ...(simpleMode.value !== true ? simpleMode.value : {}),
+            })
+          : treeData.value,
+        getLabelProp,
+        fieldNames.value,
+      );
+    } else {
+      return formatTreeData(convertChildrenToData(children.value), getLabelProp, fieldNames.value);
+    }
+  });
+}
diff --git a/components/vc-tree-select/index.js b/components/vc-tree-select/index.js
deleted file mode 100644
index 88582055f..000000000
--- a/components/vc-tree-select/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-// export this package's api
-// base 2.9.3
-import TreeSelect from './src';
-export default TreeSelect;
-
-export { TreeNode, SHOW_ALL, SHOW_PARENT, SHOW_CHILD } from './src';
diff --git a/components/vc-tree-select/index.tsx b/components/vc-tree-select/index.tsx
new file mode 100644
index 000000000..59b815d7c
--- /dev/null
+++ b/components/vc-tree-select/index.tsx
@@ -0,0 +1,8 @@
+import TreeSelect from './TreeSelect';
+import TreeNode from './TreeNode';
+import { SHOW_ALL, SHOW_CHILD, SHOW_PARENT } from './utils/strategyUtil';
+import { TreeSelectProps, treeSelectProps } from './props';
+
+export { TreeNode, SHOW_ALL, SHOW_CHILD, SHOW_PARENT, TreeSelectProps, treeSelectProps };
+
+export default TreeSelect;
diff --git a/components/vc-tree-select/interface.ts b/components/vc-tree-select/interface.ts
new file mode 100644
index 000000000..1f659ddf3
--- /dev/null
+++ b/components/vc-tree-select/interface.ts
@@ -0,0 +1,97 @@
+export type SelectSource = 'option' | 'selection' | 'input' | 'clear';
+
+export type Key = string | number;
+
+export type RawValueType = string | number;
+
+export interface LabelValueType {
+  key?: Key;
+  value?: RawValueType;
+  label?: any;
+  /** Only works on `treeCheckStrictly` */
+  halfChecked?: boolean;
+}
+
+export type DefaultValueType = RawValueType | RawValueType[] | LabelValueType | LabelValueType[];
+
+export interface DataNode {
+  value?: RawValueType;
+  title?: any;
+  label?: any;
+  key?: Key;
+  disabled?: boolean;
+  disableCheckbox?: boolean;
+  checkable?: boolean;
+  children?: DataNode[];
+
+  /** Customize data info */
+  [prop: string]: any;
+}
+
+export interface InternalDataEntity {
+  key: Key;
+  value: RawValueType;
+  title?: any;
+  disableCheckbox?: boolean;
+  disabled?: boolean;
+  children?: InternalDataEntity[];
+
+  /** Origin DataNode */
+  node: DataNode;
+
+  dataRef: DataNode;
+
+  slots?: Record<string, string>; // 兼容 V2
+}
+
+export interface LegacyDataNode extends DataNode {
+  props: any;
+}
+
+export interface TreeDataNode extends DataNode {
+  key: Key;
+  children?: TreeDataNode[];
+}
+
+export interface FlattenDataNode {
+  data: InternalDataEntity;
+  key: Key;
+  value: RawValueType;
+  level: number;
+  parent?: FlattenDataNode;
+}
+
+export interface SimpleModeConfig {
+  id?: Key;
+  pId?: Key;
+  rootPId?: Key;
+}
+
+/** @deprecated This is only used for legacy compatible. Not works on new code. */
+export interface LegacyCheckedNode {
+  pos: string;
+  node: any;
+  children?: LegacyCheckedNode[];
+}
+
+export interface ChangeEventExtra {
+  /** @deprecated Please save prev value by control logic instead */
+  preValue: LabelValueType[];
+  triggerValue: RawValueType;
+  /** @deprecated Use `onSelect` or `onDeselect` instead. */
+  selected?: boolean;
+  /** @deprecated Use `onSelect` or `onDeselect` instead. */
+  checked?: boolean;
+
+  // Not sure if exist user still use this. We have to keep but not recommend user to use
+  /** @deprecated This prop not work as react node anymore. */
+  triggerNode: any;
+  /** @deprecated This prop not work as react node anymore. */
+  allCheckedNodes: LegacyCheckedNode[];
+}
+
+export interface FieldNames {
+  value?: string;
+  label?: string;
+  children?: string;
+}
diff --git a/components/vc-tree-select/props.ts b/components/vc-tree-select/props.ts
new file mode 100644
index 000000000..cae99fe47
--- /dev/null
+++ b/components/vc-tree-select/props.ts
@@ -0,0 +1,140 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { DataNode } from './interface';
+import { selectBaseProps } from '../vc-select';
+import type { FilterFunc } from '../vc-select/interface/generator';
+import omit from '../_util/omit';
+import type { Key } from '../_util/type';
+import PropTypes from '../_util/vue-types';
+import type {
+  ChangeEventExtra,
+  DefaultValueType,
+  FieldNames,
+  FlattenDataNode,
+  LabelValueType,
+  LegacyDataNode,
+  RawValueType,
+  SimpleModeConfig,
+} from './interface';
+import type { CheckedStrategy } from './utils/strategyUtil';
+
+export function optionListProps<OptionsType>() {
+  return {
+    prefixCls: String,
+    id: String,
+    options: { type: Array as PropType<OptionsType[]> },
+    flattenOptions: { type: Array as PropType<FlattenDataNode[]> },
+    height: Number,
+    itemHeight: Number,
+    virtual: { type: Boolean, default: undefined },
+    values: { type: Set as PropType<Set<RawValueType>> },
+    multiple: { type: Boolean, default: undefined },
+    open: { type: Boolean, default: undefined },
+    defaultActiveFirstOption: { type: Boolean, default: undefined },
+    notFoundContent: PropTypes.any,
+    menuItemSelectedIcon: PropTypes.any,
+    childrenAsData: { type: Boolean, default: undefined },
+    searchValue: String,
+
+    onSelect: {
+      type: Function as PropType<(value: RawValueType, option: { selected: boolean }) => void>,
+    },
+    onToggleOpen: { type: Function as PropType<(open?: boolean) => void> },
+    /** Tell Select that some value is now active to make accessibility work */
+    onActiveValue: { type: Function as PropType<(value: RawValueType, index: number) => void> },
+    onScroll: { type: Function as PropType<(e: UIEvent) => void> },
+
+    onMouseenter: { type: Function as PropType<() => void> },
+  };
+}
+
+export function treeSelectProps<ValueType = DefaultValueType>() {
+  const selectProps = omit(selectBaseProps<DataNode, ValueType>(), [
+    'onChange',
+    'mode',
+    'menuItemSelectedIcon',
+    'dropdownAlign',
+    'backfill',
+    'getInputElement',
+    'optionLabelProp',
+    'tokenSeparators',
+    'filterOption',
+  ]);
+  return {
+    ...selectProps,
+
+    multiple: { type: Boolean, default: undefined },
+    showArrow: { type: Boolean, default: undefined },
+    showSearch: { type: Boolean, default: undefined },
+    open: { type: Boolean, default: undefined },
+    defaultOpen: { type: Boolean, default: undefined },
+    value: { type: [String, Number, Object, Array] as PropType<ValueType> },
+    defaultValue: { type: [String, Number, Object, Array] as PropType<ValueType> },
+    disabled: { type: Boolean, default: undefined },
+
+    placeholder: PropTypes.any,
+    /** @deprecated Use `searchValue` instead */
+    inputValue: String,
+    searchValue: String,
+    autoClearSearchValue: { type: Boolean, default: undefined },
+
+    maxTagPlaceholder: { type: Function as PropType<(omittedValues: LabelValueType[]) => any> },
+
+    fieldNames: { type: Object as PropType<FieldNames> },
+    loadData: { type: Function as PropType<(dataNode: LegacyDataNode) => Promise<unknown>> },
+    treeNodeFilterProp: String,
+    treeNodeLabelProp: String,
+    treeDataSimpleMode: {
+      type: [Boolean, Object] as PropType<boolean | SimpleModeConfig>,
+      default: undefined,
+    },
+    treeExpandedKeys: { type: Array as PropType<Key[]> },
+    treeDefaultExpandedKeys: { type: Array as PropType<Key[]> },
+    treeLoadedKeys: { type: Array as PropType<Key[]> },
+    treeCheckable: { type: Boolean, default: undefined },
+    treeCheckStrictly: { type: Boolean, default: undefined },
+    showCheckedStrategy: { type: String as PropType<CheckedStrategy> },
+    treeDefaultExpandAll: { type: Boolean, default: undefined },
+    treeData: { type: Array as PropType<DataNode[]> },
+    treeLine: { type: Boolean, default: undefined },
+    treeIcon: PropTypes.any,
+    showTreeIcon: { type: Boolean, default: undefined },
+    switcherIcon: PropTypes.any,
+    treeMotion: PropTypes.any,
+    children: Array,
+
+    filterTreeNode: {
+      type: [Boolean, Function] as PropType<boolean | FilterFunc<LegacyDataNode>>,
+      default: undefined,
+    },
+    dropdownPopupAlign: PropTypes.any,
+
+    // Event
+    onSearch: { type: Function as PropType<(value: string) => void> },
+    onChange: {
+      type: Function as PropType<
+        (value: ValueType, labelList: any[], extra: ChangeEventExtra) => void
+      >,
+    },
+    onTreeExpand: { type: Function as PropType<(expandedKeys: Key[]) => void> },
+    onTreeLoad: { type: Function as PropType<(loadedKeys: Key[]) => void> },
+    onDropdownVisibleChange: { type: Function as PropType<(open: boolean) => void> },
+
+    // Legacy
+    /** `searchPlaceholder` has been removed since search box has been merged into input box */
+    searchPlaceholder: PropTypes.any,
+
+    /** @private This is not standard API since we only used in `rc-cascader`. Do not use in your production */
+    labelRender: { type: Function as PropType<(entity: FlattenDataNode) => any> },
+  };
+}
+
+class Helper<T> {
+  ReturnOptionListProps = optionListProps<T>();
+  ReturnTreeSelectProps = treeSelectProps<T>();
+}
+
+export type OptionListProps = Partial<ExtractPropTypes<Helper<DataNode>['ReturnOptionListProps']>>;
+
+export type TreeSelectProps<T = DefaultValueType> = Partial<
+  ExtractPropTypes<Helper<T>['ReturnTreeSelectProps']>
+>;
diff --git a/components/vc-tree-select/src/Base/BasePopup.jsx b/components/vc-tree-select/src/Base/BasePopup.jsx
deleted file mode 100644
index 64721be35..000000000
--- a/components/vc-tree-select/src/Base/BasePopup.jsx
+++ /dev/null
@@ -1,285 +0,0 @@
-import { inject } from 'vue';
-import warning from 'warning';
-import PropTypes from '../../../_util/vue-types';
-import Tree from '../../../vc-tree';
-import BaseMixin from '../../../_util/BaseMixin';
-import { createRef } from '../util';
-
-// export const popupContextTypes = {
-//   onPopupKeyDown: PropTypes.func.isRequired,
-//   onTreeNodeSelect: PropTypes.func.isRequired,
-//   onTreeNodeCheck: PropTypes.func.isRequired,
-// }
-function getDerivedState(nextProps, prevState) {
-  const {
-    _prevProps: prevProps = {},
-    _loadedKeys: loadedKeys,
-    _expandedKeyList: expandedKeyList,
-    _cachedExpandedKeyList: cachedExpandedKeyList,
-  } = prevState || {};
-  const {
-    valueList,
-    valueEntities,
-    keyEntities,
-    treeExpandedKeys,
-    filteredTreeNodes,
-    upperSearchValue,
-  } = nextProps;
-
-  const newState = {
-    _prevProps: { ...nextProps },
-  };
-
-  // Check value update
-  if (valueList !== prevProps.valueList) {
-    newState._keyList = valueList
-      .map(({ value }) => valueEntities[value])
-      .filter(entity => entity)
-      .map(({ key }) => key);
-  }
-
-  // Show all when tree is in filter mode
-  if (
-    !treeExpandedKeys &&
-    filteredTreeNodes &&
-    filteredTreeNodes.length &&
-    filteredTreeNodes !== prevProps.filteredTreeNodes
-  ) {
-    newState._expandedKeyList = [...keyEntities.keys()];
-  }
-
-  // Cache `expandedKeyList` when filter set
-  if (upperSearchValue && !prevProps.upperSearchValue) {
-    newState._cachedExpandedKeyList = expandedKeyList;
-  } else if (!upperSearchValue && prevProps.upperSearchValue && !treeExpandedKeys) {
-    newState._expandedKeyList = cachedExpandedKeyList || [];
-    newState._cachedExpandedKeyList = [];
-  }
-
-  // Use expandedKeys if provided
-  if (prevProps.treeExpandedKeys !== treeExpandedKeys) {
-    newState._expandedKeyList = treeExpandedKeys;
-  }
-
-  // Clean loadedKeys if key not exist in keyEntities anymore
-  if (nextProps.loadData) {
-    newState._loadedKeys = loadedKeys.filter(key => keyEntities.has(key));
-  }
-
-  return newState;
-}
-const BasePopup = {
-  mixins: [BaseMixin],
-  inheritAttrs: false,
-  name: 'BasePopup',
-  props: {
-    prefixCls: PropTypes.string,
-    upperSearchValue: PropTypes.string,
-    valueList: PropTypes.array,
-    searchHalfCheckedKeys: PropTypes.array,
-    valueEntities: PropTypes.object,
-    keyEntities: Map,
-    treeIcon: PropTypes.looseBool,
-    treeLine: PropTypes.looseBool,
-    treeNodeFilterProp: PropTypes.string,
-    treeCheckable: PropTypes.any,
-    treeCheckStrictly: PropTypes.looseBool,
-    treeDefaultExpandAll: PropTypes.looseBool,
-    treeDefaultExpandedKeys: PropTypes.array,
-    treeExpandedKeys: PropTypes.array,
-    loadData: PropTypes.func,
-    multiple: PropTypes.looseBool,
-    // onTreeExpand: PropTypes.func,
-    searchValue: PropTypes.string,
-    treeNodes: PropTypes.any,
-    filteredTreeNodes: PropTypes.any,
-    notFoundContent: PropTypes.any,
-
-    ariaId: PropTypes.string,
-    switcherIcon: PropTypes.any,
-    // HOC
-    renderSearch: PropTypes.func,
-    // onTreeExpanded: PropTypes.func,
-
-    __propsSymbol__: PropTypes.any,
-  },
-  setup() {
-    return {
-      vcTreeSelect: inject('vcTreeSelect', {}),
-    };
-  },
-  watch: {
-    __propsSymbol__() {
-      const state = getDerivedState(this.$props, this.$data);
-      this.setState(state);
-    },
-  },
-  data() {
-    this.treeRef = createRef();
-    warning(this.$props.__propsSymbol__, 'must pass __propsSymbol__');
-    const { treeDefaultExpandAll, treeDefaultExpandedKeys, keyEntities } = this.$props;
-
-    // TODO: make `expandedKeyList` control
-    let expandedKeyList = treeDefaultExpandedKeys;
-    if (treeDefaultExpandAll) {
-      expandedKeyList = [...keyEntities.keys()];
-    }
-
-    const state = {
-      _keyList: [],
-      _expandedKeyList: expandedKeyList,
-      // Cache `expandedKeyList` when tree is in filter. This is used in `getDerivedState`
-      _cachedExpandedKeyList: [],
-      _loadedKeys: [],
-      _prevProps: {},
-    };
-    return {
-      ...state,
-      ...getDerivedState(this.$props, state),
-    };
-  },
-  methods: {
-    onTreeExpand(expandedKeyList) {
-      const { treeExpandedKeys } = this.$props;
-
-      // Set uncontrolled state
-      if (!treeExpandedKeys) {
-        this.setState({ _expandedKeyList: expandedKeyList }, () => {
-          this.__emit('treeExpanded');
-        });
-      }
-      this.__emit('treeExpand', expandedKeyList);
-    },
-
-    onLoad(loadedKeys) {
-      this.setState({ _loadedKeys: loadedKeys });
-    },
-
-    getTree() {
-      return this.treeRef.current;
-    },
-
-    /**
-     * Not pass `loadData` when searching. To avoid loop ajax call makes browser crash.
-     */
-    getLoadData() {
-      const { loadData, upperSearchValue } = this.$props;
-      if (upperSearchValue) return null;
-      return loadData;
-    },
-
-    /**
-     * This method pass to Tree component which is used for add filtered class
-     * in TreeNode > li
-     */
-    filterTreeNode(treeNode) {
-      const { upperSearchValue, treeNodeFilterProp } = this.$props;
-
-      const filterVal = treeNode[treeNodeFilterProp];
-      if (typeof filterVal === 'string') {
-        return upperSearchValue && filterVal.toUpperCase().indexOf(upperSearchValue) !== -1;
-      }
-
-      return false;
-    },
-
-    renderNotFound() {
-      const { prefixCls, notFoundContent } = this.$props;
-
-      return <span class={`${prefixCls}-not-found`}>{notFoundContent}</span>;
-    },
-  },
-
-  render() {
-    const {
-      _keyList: keyList,
-      _expandedKeyList: expandedKeyList,
-      _loadedKeys: loadedKeys,
-    } = this.$data;
-    const {
-      prefixCls,
-      treeNodes,
-      filteredTreeNodes,
-      treeIcon,
-      treeLine,
-      treeCheckable,
-      treeCheckStrictly,
-      multiple,
-      ariaId,
-      renderSearch,
-      switcherIcon,
-      searchHalfCheckedKeys,
-    } = this.$props;
-    const {
-      vcTreeSelect: { onPopupKeyDown, onTreeNodeSelect, onTreeNodeCheck },
-    } = this;
-
-    const loadData = this.getLoadData();
-
-    const treeProps = {};
-
-    if (treeCheckable) {
-      treeProps.checkedKeys = keyList;
-    } else {
-      treeProps.selectedKeys = keyList;
-    }
-    let $notFound;
-    let $treeNodes;
-    if (filteredTreeNodes) {
-      if (filteredTreeNodes.length) {
-        treeProps.checkStrictly = true;
-        $treeNodes = filteredTreeNodes;
-
-        // Fill halfCheckedKeys
-        if (treeCheckable && !treeCheckStrictly) {
-          treeProps.checkedKeys = {
-            checked: keyList,
-            halfChecked: searchHalfCheckedKeys,
-          };
-        }
-      } else {
-        $notFound = this.renderNotFound();
-      }
-    } else if (!treeNodes || !treeNodes.length) {
-      $notFound = this.renderNotFound();
-    } else {
-      $treeNodes = treeNodes;
-    }
-
-    let $tree;
-    if ($notFound) {
-      $tree = $notFound;
-    } else {
-      const treeAllProps = {
-        prefixCls: `${prefixCls}-tree`,
-        showIcon: treeIcon,
-        showLine: treeLine,
-        selectable: !treeCheckable,
-        checkable: treeCheckable,
-        checkStrictly: treeCheckStrictly,
-        multiple,
-        loadData,
-        loadedKeys,
-        expandedKeys: expandedKeyList,
-        filterTreeNode: this.filterTreeNode,
-        switcherIcon,
-        ...treeProps,
-        children: $treeNodes,
-        onSelect: onTreeNodeSelect,
-        onCheck: onTreeNodeCheck,
-        onExpand: this.onTreeExpand,
-        onLoad: this.onLoad,
-      };
-      $tree = <Tree {...treeAllProps} ref={this.treeRef} __propsSymbol__={[]} />;
-    }
-
-    return (
-      <div role="listbox" id={ariaId} onKeydown={onPopupKeyDown} tabindex={-1}>
-        {renderSearch ? renderSearch() : null}
-        {$tree}
-      </div>
-    );
-  },
-};
-
-export default BasePopup;
diff --git a/components/vc-tree-select/src/Base/BaseSelector.jsx b/components/vc-tree-select/src/Base/BaseSelector.jsx
deleted file mode 100644
index fa3a899e4..000000000
--- a/components/vc-tree-select/src/Base/BaseSelector.jsx
+++ /dev/null
@@ -1,201 +0,0 @@
-/**
- * Input Box is in different position for different mode.
- * This not the same design as `Select` cause it's followed by antd 0.x `Select`.
- * We will not follow the new design immediately since antd 3.x is already released.
- *
- * So this file named as Selector to avoid confuse.
- */
-import { inject } from 'vue';
-import { createRef } from '../util';
-import PropTypes from '../../../_util/vue-types';
-import classNames from '../../../_util/classNames';
-import { initDefaultProps, getComponent } from '../../../_util/props-util';
-import BaseMixin from '../../../_util/BaseMixin';
-export const selectorPropTypes = () => ({
-  prefixCls: PropTypes.string,
-  open: PropTypes.looseBool,
-  selectorValueList: PropTypes.array,
-  allowClear: PropTypes.looseBool,
-  showArrow: PropTypes.looseBool,
-  // onClick: PropTypes.func,
-  // onBlur: PropTypes.func,
-  // onFocus: PropTypes.func,
-  removeSelected: PropTypes.func,
-  choiceTransitionName: PropTypes.string,
-  // Pass by component
-  ariaId: PropTypes.string,
-  inputIcon: PropTypes.any,
-  clearIcon: PropTypes.any,
-  removeIcon: PropTypes.any,
-  placeholder: PropTypes.any,
-  disabled: PropTypes.looseBool,
-  focused: PropTypes.looseBool,
-  isMultiple: PropTypes.looseBool,
-  showSearch: PropTypes.looseBool,
-  searchValue: PropTypes.string,
-});
-
-function noop() {}
-export default function () {
-  const BaseSelector = {
-    name: 'BaseSelector',
-    inheritAttrs: false,
-    mixins: [BaseMixin],
-    props: initDefaultProps(
-      {
-        ...selectorPropTypes(),
-
-        // Pass by HOC
-        renderSelection: PropTypes.func.isRequired,
-        renderPlaceholder: PropTypes.func,
-        tabindex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-      },
-      {
-        tabindex: 0,
-      },
-    ),
-    setup() {
-      return {
-        vcTreeSelect: inject('vcTreeSelect', {}),
-      };
-    },
-    created() {
-      this.domRef = createRef();
-    },
-    methods: {
-      onFocus(e) {
-        const { focused } = this.$props;
-        const {
-          vcTreeSelect: { onSelectorFocus },
-        } = this;
-
-        if (!focused) {
-          onSelectorFocus();
-        }
-        this.__emit('focus', e);
-      },
-
-      onBlur(e) {
-        const {
-          vcTreeSelect: { onSelectorBlur },
-        } = this;
-
-        // TODO: Not trigger when is inner component get focused
-        onSelectorBlur();
-        this.__emit('blur', e);
-      },
-
-      focus() {
-        this.domRef.current.focus();
-      },
-
-      blur() {
-        this.domRef.current.blur();
-      },
-
-      renderClear() {
-        const { prefixCls, allowClear, selectorValueList } = this.$props;
-        const {
-          vcTreeSelect: { onSelectorClear },
-        } = this;
-
-        if (!allowClear || !selectorValueList.length || !selectorValueList[0].value) {
-          return null;
-        }
-        const clearIcon = getComponent(this, 'clearIcon');
-        return (
-          <span
-            key="clear"
-            unselectable="on"
-            aria-hidden="true"
-            style="user-select: none;"
-            class={`${prefixCls}-clear`}
-            onClick={onSelectorClear}
-          >
-            {clearIcon}
-          </span>
-        );
-      },
-
-      renderArrow() {
-        const { prefixCls, showArrow } = this.$props;
-        if (!showArrow) {
-          return null;
-        }
-        const inputIcon = getComponent(this, 'inputIcon');
-        return (
-          <span
-            key="arrow"
-            class={`${prefixCls}-arrow`}
-            style={{ outline: 'none', userSelect: 'none' }}
-          >
-            {inputIcon}
-          </span>
-        );
-      },
-    },
-
-    render() {
-      const {
-        prefixCls,
-        open,
-        focused,
-        disabled,
-        allowClear,
-        ariaId,
-        renderSelection,
-        renderPlaceholder,
-        tabindex,
-        isMultiple,
-        showArrow,
-        showSearch,
-      } = this.$props;
-      const { class: className, style, onClick = noop } = this.$attrs;
-      const {
-        vcTreeSelect: { onSelectorKeyDown },
-      } = this;
-
-      let myTabIndex = tabindex;
-      if (disabled) {
-        myTabIndex = null;
-      }
-      const mergedClassName = classNames(prefixCls, className, {
-        [`${prefixCls}-focused`]: open || focused,
-        [`${prefixCls}-multiple`]: isMultiple,
-        [`${prefixCls}-single`]: !isMultiple,
-        [`${prefixCls}-allow-clear`]: allowClear,
-        [`${prefixCls}-show-arrow`]: showArrow,
-        [`${prefixCls}-disabled`]: disabled,
-        [`${prefixCls}-open`]: open,
-        [`${prefixCls}-show-search`]: showSearch,
-      });
-      return (
-        <div
-          style={style}
-          onClick={onClick}
-          class={mergedClassName}
-          ref={this.domRef}
-          role="combobox"
-          aria-expanded={open}
-          aria-owns={open ? ariaId : undefined}
-          aria-controls={open ? ariaId : undefined}
-          aria-haspopup="listbox"
-          aria-disabled={disabled}
-          tabindex={myTabIndex}
-          onFocus={this.onFocus}
-          onBlur={this.onBlur}
-          onKeydown={onSelectorKeyDown}
-        >
-          <span class={`${prefixCls}-selector`}>
-            {renderSelection()}
-            {renderPlaceholder && renderPlaceholder()}
-          </span>
-          {this.renderArrow()}
-          {this.renderClear()}
-        </div>
-      );
-    },
-  };
-
-  return BaseSelector;
-}
diff --git a/components/vc-tree-select/src/Popup/MultiplePopup.jsx b/components/vc-tree-select/src/Popup/MultiplePopup.jsx
deleted file mode 100644
index 09b09a279..000000000
--- a/components/vc-tree-select/src/Popup/MultiplePopup.jsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import BasePopup from '../Base/BasePopup';
-
-export default BasePopup;
diff --git a/components/vc-tree-select/src/Popup/SinglePopup.jsx b/components/vc-tree-select/src/Popup/SinglePopup.jsx
deleted file mode 100644
index 179be5e23..000000000
--- a/components/vc-tree-select/src/Popup/SinglePopup.jsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import PropTypes from '../../../_util/vue-types';
-import BasePopup from '../Base/BasePopup';
-import SearchInput from '../SearchInput';
-import { createRef } from '../util';
-
-const SinglePopup = {
-  name: 'SinglePopup',
-  inheritAttrs: false,
-  props: {
-    ...BasePopup.props,
-    ...SearchInput.props,
-    searchValue: PropTypes.string,
-    showSearch: PropTypes.looseBool,
-    dropdownPrefixCls: PropTypes.string,
-    disabled: PropTypes.looseBool,
-    searchPlaceholder: PropTypes.string,
-  },
-  created() {
-    this.inputRef = createRef();
-    this.searchRef = createRef();
-    this.popupRef = createRef();
-  },
-  methods: {
-    onPlaceholderClick() {
-      this.inputRef.current.focus();
-    },
-    getTree() {
-      return this.popupRef.current && this.popupRef.current.getTree();
-    },
-    _renderPlaceholder() {
-      const { searchPlaceholder, searchValue, prefixCls } = this.$props;
-
-      if (!searchPlaceholder) {
-        return null;
-      }
-
-      return (
-        <span
-          style={{
-            display: searchValue ? 'none' : 'block',
-          }}
-          onClick={this.onPlaceholderClick}
-          class={`${prefixCls}-selection-placeholder`}
-        >
-          {searchPlaceholder}
-        </span>
-      );
-    },
-
-    _renderSearch() {
-      const { showSearch, dropdownPrefixCls } = this.$props;
-
-      if (!showSearch) {
-        return null;
-      }
-
-      return (
-        <span class={`${dropdownPrefixCls}-search`} ref={this.searchRef}>
-          <SearchInput
-            {...{ ...this.$props, ...this.$attrs, renderPlaceholder: this._renderPlaceholder }}
-            ref={this.inputRef}
-          />
-        </span>
-      );
-    },
-  },
-  render() {
-    return (
-      <BasePopup
-        {...{
-          ...this.$props,
-          ...this.$attrs,
-          renderSearch: this._renderSearch,
-        }}
-        ref={this.popupRef}
-        __propsSymbol__={[]}
-      />
-    );
-  },
-};
-
-export default SinglePopup;
diff --git a/components/vc-tree-select/src/SearchInput.jsx b/components/vc-tree-select/src/SearchInput.jsx
deleted file mode 100644
index 6e4bd8ef5..000000000
--- a/components/vc-tree-select/src/SearchInput.jsx
+++ /dev/null
@@ -1,170 +0,0 @@
-/**
- * Since search box is in different position with different mode.
- * - Single: in the popup box
- * - multiple: in the selector
- * Move the code as a SearchInput for easy management.
- */
-import BaseInput from '../../_util/BaseInput';
-import { inject, ref, onMounted, computed, watch } from 'vue';
-import PropTypes from '../../_util/vue-types';
-import { createRef } from './util';
-
-const SearchInput = {
-  name: 'SearchInput',
-  inheritAttrs: false,
-  props: {
-    open: PropTypes.looseBool,
-    searchValue: PropTypes.string,
-    prefixCls: PropTypes.string,
-    disabled: PropTypes.looseBool,
-    renderPlaceholder: PropTypes.func,
-    needAlign: PropTypes.looseBool,
-    ariaId: PropTypes.string,
-    isMultiple: PropTypes.looseBool.def(true),
-    showSearch: PropTypes.looseBool,
-  },
-  emits: ['mirrorSearchValueChange'],
-  setup(props, { emit }) {
-    const measureRef = ref();
-    const inputWidth = ref(0);
-    const mirrorSearchValue = ref(props.searchValue);
-    watch(
-      computed(() => props.searchValue),
-      () => {
-        mirrorSearchValue.value = props.searchValue;
-      },
-    );
-    watch(
-      mirrorSearchValue,
-      () => {
-        emit('mirrorSearchValueChange', mirrorSearchValue.value);
-      },
-      { immediate: true },
-    );
-    // We measure width and set to the input immediately
-    onMounted(() => {
-      if (props.isMultiple) {
-        watch(
-          mirrorSearchValue,
-          () => {
-            inputWidth.value = measureRef.value.scrollWidth;
-          },
-          { flush: 'post', immediate: true },
-        );
-      }
-    });
-    return {
-      measureRef,
-      inputWidth,
-      vcTreeSelect: inject('vcTreeSelect', {}),
-      mirrorSearchValue,
-    };
-  },
-  created() {
-    this.inputRef = createRef();
-    this.prevProps = { ...this.$props };
-  },
-  mounted() {
-    this.$nextTick(() => {
-      const { open } = this.$props;
-
-      if (open) {
-        this.focus(true);
-      }
-    });
-  },
-
-  updated() {
-    const { open } = this.$props;
-    const { prevProps } = this;
-    this.$nextTick(() => {
-      if (open && prevProps.open !== open) {
-        this.focus();
-      }
-
-      this.prevProps = { ...this.$props };
-    });
-  },
-  methods: {
-    /**
-     * Need additional timeout for focus cause parent dom is not ready when didMount trigger
-     */
-    focus(isDidMount) {
-      if (this.inputRef.current) {
-        if (isDidMount) {
-          setTimeout(() => {
-            this.inputRef.current.focus();
-          }, 0);
-        } else {
-          // set it into else, Avoid scrolling when focus
-          this.inputRef.current.focus();
-        }
-      }
-    },
-
-    blur() {
-      if (this.inputRef.current) {
-        this.inputRef.current.blur();
-      }
-    },
-    handleInputChange(e) {
-      const { value, composing } = e.target;
-      const { searchValue = '' } = this;
-      if (e.isComposing || composing || searchValue === value) {
-        this.mirrorSearchValue = value;
-        return;
-      }
-      this.vcTreeSelect.onSearchInputChange(e);
-    },
-  },
-
-  render() {
-    const {
-      searchValue,
-      prefixCls,
-      disabled,
-      renderPlaceholder,
-      open,
-      ariaId,
-      isMultiple,
-      showSearch,
-    } = this.$props;
-    const {
-      vcTreeSelect: { onSearchInputKeyDown },
-      handleInputChange,
-      mirrorSearchValue,
-      inputWidth,
-    } = this;
-    return (
-      <>
-        <span
-          class={`${prefixCls}-selection-search`}
-          style={isMultiple ? { width: inputWidth + 'px' } : {}}
-        >
-          <BaseInput
-            type="text"
-            ref={this.inputRef}
-            onChange={handleInputChange}
-            onKeydown={onSearchInputKeyDown}
-            value={searchValue}
-            disabled={disabled}
-            readonly={!showSearch}
-            class={`${prefixCls}-selection-search-input`}
-            aria-label="filter select"
-            aria-autocomplete="list"
-            aria-controls={open ? ariaId : undefined}
-            aria-multiline="false"
-          />
-          {isMultiple ? (
-            <span ref="measureRef" class={`${prefixCls}-selection-search-mirror`} aria-hidden>
-              {mirrorSearchValue}&nbsp;
-            </span>
-          ) : null}
-        </span>
-        {renderPlaceholder && !mirrorSearchValue ? renderPlaceholder() : null}
-      </>
-    );
-  },
-};
-
-export default SearchInput;
diff --git a/components/vc-tree-select/src/Select.jsx b/components/vc-tree-select/src/Select.jsx
deleted file mode 100644
index f606d66e7..000000000
--- a/components/vc-tree-select/src/Select.jsx
+++ /dev/null
@@ -1,1134 +0,0 @@
-/**
- * ARIA: https://www.w3.org/TR/wai-aria/#combobox
- * Sample 1: https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/combobox/aria1.1pattern/listbox-combo.html
- * Sample 2: https://www.w3.org/blog/wai-components-gallery/widget/combobox-with-aria-autocompleteinline/
- *
- * Tab logic:
- * Popup is close
- * 1. Focus input (mark component as focused)
- * 2. Press enter to show the popup
- * 3. If popup has input, focus it
- *
- * Popup is open
- * 1. press tab to close the popup
- * 2. Focus back to the selection input box
- * 3. Let the native tab going on
- *
- * TreeSelect use 2 design type.
- * In single mode, we should focus on the `span`
- * In multiple mode, we should focus on the `input`
- */
-import { defineComponent, provide } from 'vue';
-import shallowEqual from '../../_util/shallowequal';
-import scrollIntoView from 'dom-scroll-into-view';
-import warning from 'warning';
-import PropTypes, { withUndefined } from '../../_util/vue-types';
-import KeyCode from '../../_util/KeyCode';
-
-import SelectTrigger from './SelectTrigger';
-import SingleSelector from './Selector/SingleSelector';
-import MultipleSelector from './Selector/MultipleSelector';
-
-import { SHOW_ALL, SHOW_PARENT, SHOW_CHILD } from './strategies';
-import BaseMixin from '../../_util/BaseMixin';
-import {
-  createRef,
-  generateAriaId,
-  formatInternalValue,
-  formatSelectorValue,
-  parseSimpleTreeData,
-  convertDataToTree,
-  convertTreeToEntities,
-  conductCheck,
-  getHalfCheckedKeys,
-  flatToHierarchy,
-  isPosRelated,
-  isLabelInValue,
-  getFilterTree,
-  cleanEntity,
-  findPopupContainer,
-} from './util';
-import SelectNode from './SelectNode';
-import {
-  initDefaultProps,
-  getOptionProps,
-  getPropsData,
-  findDOMNode,
-} from '../../_util/props-util';
-import BasePopup from './Popup/MultiplePopup';
-function getWatch(keys = []) {
-  const watch = {};
-  keys.forEach(k => {
-    watch[k] = function () {
-      this.needSyncKeys[k] = true;
-    };
-  });
-  return watch;
-}
-const Select = defineComponent({
-  name: 'Select',
-  mixins: [BaseMixin],
-  inheritAttrs: false,
-  props: initDefaultProps(
-    {
-      prefixCls: PropTypes.string,
-      prefixAria: PropTypes.string,
-      multiple: PropTypes.looseBool,
-      showArrow: PropTypes.looseBool,
-      open: PropTypes.looseBool,
-      value: PropTypes.any,
-
-      autofocus: PropTypes.looseBool,
-
-      defaultOpen: PropTypes.looseBool,
-      defaultValue: PropTypes.any,
-
-      showSearch: PropTypes.looseBool,
-      placeholder: PropTypes.any,
-      inputValue: PropTypes.string, // [Legacy] Deprecated. Use `searchValue` instead.
-      searchValue: PropTypes.string,
-      autoClearSearchValue: PropTypes.looseBool,
-      searchPlaceholder: PropTypes.any, // [Legacy] Confuse with placeholder
-      disabled: PropTypes.looseBool,
-      children: PropTypes.any,
-      labelInValue: PropTypes.looseBool,
-      maxTagCount: PropTypes.number,
-      maxTagPlaceholder: PropTypes.any,
-      maxTagTextLength: PropTypes.number,
-      showCheckedStrategy: PropTypes.oneOf([SHOW_ALL, SHOW_PARENT, SHOW_CHILD]),
-      dropdownClassName: PropTypes.string,
-      dropdownStyle: PropTypes.object,
-      dropdownVisibleChange: PropTypes.func,
-      dropdownMatchSelectWidth: PropTypes.looseBool,
-      treeData: PropTypes.array,
-      treeDataSimpleMode: withUndefined(
-        PropTypes.oneOfType([PropTypes.looseBool, PropTypes.object]),
-      ),
-      treeNodeFilterProp: PropTypes.string,
-      treeNodeLabelProp: PropTypes.string,
-      treeCheckable: PropTypes.any,
-      // treeCheckable: PropTypes.any,
-      treeCheckStrictly: PropTypes.looseBool,
-      treeIcon: PropTypes.looseBool,
-      treeLine: PropTypes.looseBool,
-      treeDefaultExpandAll: PropTypes.looseBool,
-      treeDefaultExpandedKeys: PropTypes.array,
-      treeExpandedKeys: PropTypes.array,
-      loadData: PropTypes.func,
-      filterTreeNode: withUndefined(PropTypes.oneOfType([PropTypes.func, PropTypes.looseBool])),
-
-      notFoundContent: PropTypes.any,
-      getPopupContainer: PropTypes.func,
-
-      // onSearch: PropTypes.func,
-      // onSelect: PropTypes.func,
-      // onDeselect: PropTypes.func,
-      // onChange: PropTypes.func,
-      // onDropdownVisibleChange: PropTypes.func,
-
-      // onTreeExpand: PropTypes.func,
-      allowClear: PropTypes.looseBool,
-      transitionName: PropTypes.string,
-      animation: PropTypes.string,
-      choiceTransitionName: PropTypes.string,
-      inputIcon: PropTypes.any,
-      clearIcon: PropTypes.any,
-      removeIcon: PropTypes.any,
-      switcherIcon: PropTypes.any,
-      __propsSymbol__: PropTypes.any,
-    },
-    {
-      prefixCls: 'rc-tree-select',
-      prefixAria: 'rc-tree-select',
-      showArrow: true,
-      showSearch: true,
-      autoClearSearchValue: true,
-      showCheckedStrategy: SHOW_CHILD,
-
-      // dropdownMatchSelectWidth change the origin design, set to false now
-      // ref: https://github.com/react-component/select/blob/4cad95e098a341a09de239ad6981067188842020/src/Select.jsx#L344
-      // ref: https://github.com/react-component/select/pull/71
-      treeNodeFilterProp: 'value',
-      treeNodeLabelProp: 'title',
-      treeIcon: false,
-      notFoundContent: 'Not Found',
-      dropdownStyle: {},
-      dropdownVisibleChange: () => {
-        return true;
-      },
-    },
-  ),
-
-  data() {
-    warning(this.$props.__propsSymbol__, 'must pass __propsSymbol__');
-    const { prefixAria, defaultOpen, open } = this.$props;
-    this.needSyncKeys = {};
-    this.selectorRef = createRef();
-    this.selectTriggerRef = createRef();
-
-    // ARIA need `aria-controls` props mapping
-    // Since this need user input. Let's generate ourselves
-    this.ariaId = generateAriaId(`${prefixAria}-list`);
-
-    const state = {
-      _open: open || defaultOpen,
-      _valueList: [],
-      _searchHalfCheckedKeys: [],
-      _missValueList: [], // Contains the value not in the tree
-      _selectorValueList: [], // Used for multiple selector
-      _valueEntities: {},
-      _posEntities: new Map(),
-      _keyEntities: new Map(),
-      _searchValue: '',
-      _prevProps: {},
-      _init: true,
-      _focused: undefined,
-      _treeNodes: undefined,
-      _filteredTreeNodes: undefined,
-    };
-    const newState = this.getDerivedState(this.$props, state);
-    return {
-      ...state,
-      ...newState,
-    };
-  },
-
-  watch: {
-    ...getWatch(['treeData', 'defaultValue', 'value']),
-    __propsSymbol__() {
-      const state = this.getDerivedState(this.$props, this.$data);
-      this.setState(state);
-      this.needSyncKeys = {};
-    },
-    _valueList() {
-      this.$nextTick(() => {
-        this.forcePopupAlign();
-      });
-    },
-    _open(open) {
-      this.$nextTick(() => {
-        if (!open && !this.isSearchValueControlled()) {
-          this.setState({ _searchValue: '' });
-        }
-        if (open && !this.$data._searchValue) {
-          this.setState({ _filteredTreeNodes: null });
-        }
-        const { prefixCls } = this.$props;
-        const { _selectorValueList: selectorValueList, _valueEntities: valueEntities } = this.$data;
-        const isMultiple = this.isMultiple();
-
-        // Scroll to value position, only need sync on single mode
-        if (!isMultiple && selectorValueList.length && open && this.popup) {
-          const { value } = selectorValueList[0];
-          const { domTreeNodes } = this.popup.getTree();
-          const { key } = valueEntities[value] || {};
-          const treeNode = domTreeNodes[key];
-
-          if (treeNode) {
-            const domNode = findDOMNode(treeNode);
-            requestAnimationFrame(() => {
-              const popupNode = findDOMNode(this.popup);
-              const triggerContainer = findPopupContainer(popupNode, `${prefixCls}-dropdown`);
-
-              if (domNode && triggerContainer) {
-                scrollIntoView(domNode, triggerContainer, {
-                  onlyScrollIfNeeded: true,
-                  offsetTop: 0,
-                });
-              }
-            });
-          }
-        }
-      });
-    },
-  },
-  created() {
-    provide('vcTreeSelect', {
-      onSelectorFocus: this.onSelectorFocus,
-      onSelectorBlur: this.onSelectorBlur,
-      onSelectorKeyDown: this.onComponentKeyDown,
-      onSelectorClear: this.onSelectorClear,
-      onMultipleSelectorRemove: this.onMultipleSelectorRemove,
-
-      onTreeNodeSelect: this.onTreeNodeSelect,
-      onTreeNodeCheck: this.onTreeNodeCheck,
-      onPopupKeyDown: this.onComponentKeyDown,
-
-      onSearchInputChange: this.onSearchInputChange,
-      onSearchInputKeyDown: this.onSearchInputKeyDown,
-    });
-  },
-  mounted() {
-    this.$nextTick(() => {
-      const { autofocus, disabled } = this.$props;
-      if (autofocus && !disabled) {
-        this.focus();
-      }
-    });
-  },
-
-  methods: {
-    getDerivedState(nextProps, prevState) {
-      const { _prevProps: prevProps = {} } = prevState;
-      const {
-        treeCheckable,
-        treeCheckStrictly,
-        filterTreeNode,
-        treeNodeFilterProp,
-        treeDataSimpleMode,
-      } = nextProps;
-      const newState = {
-        _prevProps: { ...nextProps },
-        _init: false,
-      };
-      const self = this;
-      // Process the state when props updated
-      function processState(propName, updater) {
-        if (prevProps[propName] !== nextProps[propName] || self.needSyncKeys[propName]) {
-          updater(nextProps[propName], prevProps[propName]);
-          return true;
-        }
-        return false;
-      }
-
-      let valueRefresh = false;
-
-      // Open
-      processState('open', propValue => {
-        newState._open = propValue;
-      });
-
-      // Tree Nodes
-      let treeNodes;
-      let treeDataChanged = false;
-      let treeDataModeChanged = false;
-      processState('treeData', propValue => {
-        treeNodes = convertDataToTree(propValue);
-        treeDataChanged = true;
-      });
-
-      processState('treeDataSimpleMode', (propValue, prevValue) => {
-        if (!propValue) return;
-
-        const prev = !prevValue || prevValue === true ? {} : prevValue;
-
-        // Shallow equal to avoid dynamic prop object
-        if (!shallowEqual(propValue, prev)) {
-          treeDataModeChanged = true;
-        }
-      });
-
-      // Parse by `treeDataSimpleMode`
-      if (treeDataSimpleMode && (treeDataChanged || treeDataModeChanged)) {
-        const simpleMapper = {
-          id: 'id',
-          pId: 'pId',
-          rootPId: null,
-          ...(treeDataSimpleMode !== true ? treeDataSimpleMode : {}),
-        };
-        treeNodes = convertDataToTree(parseSimpleTreeData(nextProps.treeData, simpleMapper));
-      }
-
-      // If `treeData` not provide, use children TreeNodes
-      if (!nextProps.treeData) {
-        // processState('children', (propValue) => {
-        //   treeNodes = Array.isArray(propValue) ? propValue : [propValue]
-        // })
-        treeNodes = this.children || [];
-      }
-
-      // Convert `treeData` to entities
-      if (treeNodes) {
-        const entitiesMap = convertTreeToEntities(treeNodes);
-        newState._treeNodes = treeNodes;
-        newState._posEntities = entitiesMap.posEntities;
-        newState._valueEntities = entitiesMap.valueEntities;
-        newState._keyEntities = entitiesMap.keyEntities;
-
-        valueRefresh = true;
-      }
-
-      // Value List
-      if (prevState._init) {
-        processState('defaultValue', propValue => {
-          newState._valueList = formatInternalValue(propValue, nextProps);
-          valueRefresh = true;
-        });
-      }
-
-      processState('value', propValue => {
-        newState._valueList = formatInternalValue(propValue, nextProps);
-        valueRefresh = true;
-      });
-
-      // Selector Value List
-      if (valueRefresh) {
-        // Find out that value not exist in the tree
-        const missValueList = [];
-        const filteredValueList = [];
-        const keyList = [];
-
-        // Get latest value list
-        let latestValueList = newState._valueList;
-        if (!latestValueList) {
-          // Also need add prev missValueList to avoid new treeNodes contains the value
-          latestValueList = [...prevState._valueList, ...prevState._missValueList];
-        }
-
-        // Get key by value
-        const valueLabels = {};
-        latestValueList.forEach(wrapperValue => {
-          const { value, label } = wrapperValue;
-          const entity = (newState._valueEntities || prevState._valueEntities)[value];
-          valueLabels[value] = label;
-
-          if (entity) {
-            keyList.push(entity.key);
-            filteredValueList.push(wrapperValue);
-            return;
-          }
-
-          // If not match, it may caused by ajax load. We need keep this
-          missValueList.push(wrapperValue);
-        });
-
-        // We need calculate the value when tree is checked tree
-        if (treeCheckable && !treeCheckStrictly) {
-          // Calculate the keys need to be checked
-          const { checkedKeys } = conductCheck(
-            keyList,
-            true,
-            newState._keyEntities || prevState._keyEntities,
-          );
-
-          // Format value list again for internal usage
-          newState._valueList = checkedKeys.map(key => {
-            const val = (newState._keyEntities || prevState._keyEntities).get(key).value;
-
-            const wrappedValue = {
-              value: val,
-            };
-
-            if (valueLabels[val] !== undefined) {
-              wrappedValue.label = valueLabels[val];
-            }
-
-            return wrappedValue;
-          });
-        } else {
-          newState._valueList = filteredValueList;
-        }
-
-        // Fill the missValueList, we still need display in the selector
-        newState._missValueList = missValueList;
-
-        // Calculate the value list for `Selector` usage
-        newState._selectorValueList = formatSelectorValue(
-          newState._valueList,
-          nextProps,
-          newState._valueEntities || prevState._valueEntities,
-        );
-      }
-
-      // [Legacy] To align with `Select` component,
-      // We use `searchValue` instead of `inputValue` but still keep the api
-      // `inputValue` support `null` to work as `autoClearSearchValue`
-      processState('inputValue', propValue => {
-        if (propValue !== null) {
-          newState._searchValue = propValue;
-        }
-      });
-
-      // Search value
-      processState('searchValue', propValue => {
-        newState._searchValue = propValue;
-      });
-
-      // Do the search logic
-      if (newState._searchValue !== undefined || (prevState._searchValue && treeNodes)) {
-        const searchValue =
-          newState._searchValue !== undefined ? newState._searchValue : prevState._searchValue;
-        const upperSearchValue = String(searchValue).toUpperCase();
-
-        let filterTreeNodeFn = filterTreeNode;
-        if (filterTreeNode === false) {
-          // Don't filter if is false
-          filterTreeNodeFn = () => true;
-        } else if (typeof filterTreeNodeFn !== 'function') {
-          // When is not function (true or undefined), use inner filter
-          filterTreeNodeFn = (_, node) => {
-            const nodeValue = String(getPropsData(node)[treeNodeFilterProp]).toUpperCase();
-            return nodeValue.indexOf(upperSearchValue) !== -1;
-          };
-        }
-
-        newState._filteredTreeNodes = getFilterTree(
-          newState._treeNodes || prevState._treeNodes,
-          searchValue,
-          filterTreeNodeFn,
-          newState._valueEntities || prevState._valueEntities,
-          SelectNode,
-        );
-      }
-
-      // We should re-calculate the halfCheckedKeys when in search mode
-      if (
-        valueRefresh &&
-        treeCheckable &&
-        !treeCheckStrictly &&
-        (newState._searchValue || prevState._searchValue)
-      ) {
-        newState._searchHalfCheckedKeys = getHalfCheckedKeys(
-          newState._valueList,
-          newState._valueEntities || prevState._valueEntities,
-        );
-      }
-
-      // Checked Strategy
-      processState('showCheckedStrategy', () => {
-        newState._selectorValueList =
-          newState._selectorValueList ||
-          formatSelectorValue(
-            newState._valueList || prevState._valueList,
-            nextProps,
-            newState._valueEntities || prevState._valueEntities,
-          );
-      });
-      return newState;
-    },
-    // ==================== Selector ====================
-    onSelectorFocus() {
-      this.setState({ _focused: true });
-    },
-
-    onSelectorBlur() {
-      this.setState({ _focused: false });
-
-      // TODO: Close when Popup is also not focused
-      // this.setState({ open: false });
-    },
-
-    // Handle key board event in both Selector and Popup
-    onComponentKeyDown(event) {
-      const { _open: open } = this.$data;
-      const { keyCode } = event;
-
-      if (!open) {
-        if ([KeyCode.ENTER, KeyCode.DOWN].indexOf(keyCode) !== -1) {
-          this.setOpenState(true);
-        }
-      } else if (KeyCode.ESC === keyCode) {
-        this.setOpenState(false);
-      } else if ([KeyCode.UP, KeyCode.DOWN, KeyCode.LEFT, KeyCode.RIGHT].indexOf(keyCode) !== -1) {
-        // TODO: Handle `open` state
-        event.stopPropagation();
-      }
-    },
-
-    onDeselect(wrappedValue, node, nodeEventInfo) {
-      this.__emit('deselect', wrappedValue, node, nodeEventInfo);
-    },
-
-    onSelectorClear(event) {
-      const { disabled } = this.$props;
-      if (disabled) return;
-
-      this.triggerChange([], []);
-
-      if (!this.isSearchValueControlled()) {
-        this.setUncontrolledState({
-          _searchValue: '',
-          _filteredTreeNodes: null,
-        });
-      }
-
-      event.stopPropagation();
-    },
-
-    onMultipleSelectorRemove(event, removeValue) {
-      event.stopPropagation();
-
-      const {
-        _valueList: valueList,
-        _missValueList: missValueList,
-        _valueEntities: valueEntities,
-      } = this.$data;
-
-      const { treeCheckable, treeCheckStrictly, treeNodeLabelProp, disabled } = this.$props;
-      if (disabled) return;
-
-      // Find trigger entity
-      const triggerEntity = valueEntities[removeValue];
-
-      // Clean up value
-      let newValueList = valueList;
-      if (triggerEntity) {
-        // If value is in tree
-        if (treeCheckable && !treeCheckStrictly) {
-          newValueList = valueList.filter(({ value }) => {
-            const entity = valueEntities[value];
-            return !isPosRelated(entity.pos, triggerEntity.pos);
-          });
-        } else {
-          newValueList = valueList.filter(({ value }) => value !== removeValue);
-        }
-      }
-
-      const triggerNode = triggerEntity ? triggerEntity.node : null;
-
-      const extraInfo = {
-        triggerValue: removeValue,
-        triggerNode,
-      };
-      const deselectInfo = {
-        node: triggerNode,
-      };
-
-      // [Legacy] Little hack on this to make same action as `onCheck` event.
-      if (treeCheckable) {
-        const filteredEntityList = newValueList.map(({ value }) => valueEntities[value]);
-
-        deselectInfo.event = 'check';
-        deselectInfo.checked = false;
-        deselectInfo.checkedNodes = filteredEntityList.map(({ node }) => node);
-        deselectInfo.checkedNodesPositions = filteredEntityList.map(({ node, pos }) => ({
-          node,
-          pos,
-        }));
-
-        if (treeCheckStrictly) {
-          extraInfo.allCheckedNodes = deselectInfo.checkedNodes;
-        } else {
-          // TODO: It's too expansive to get `halfCheckedKeys` in onDeselect. Not pass this.
-          extraInfo.allCheckedNodes = flatToHierarchy(filteredEntityList).map(({ node }) => node);
-        }
-      } else {
-        deselectInfo.event = 'select';
-        deselectInfo.selected = false;
-        deselectInfo.selectedNodes = newValueList.map(
-          ({ value }) => (valueEntities[value] || {}).node,
-        );
-      }
-
-      // Some value user pass prop is not in the tree, we also need clean it
-      const newMissValueList = missValueList.filter(({ value }) => value !== removeValue);
-      let wrappedValue;
-      if (this.isLabelInValue()) {
-        wrappedValue = {
-          label: triggerNode ? getPropsData(triggerNode)[treeNodeLabelProp] : null,
-          value: removeValue,
-        };
-      } else {
-        wrappedValue = removeValue;
-      }
-
-      this.onDeselect(wrappedValue, triggerNode, deselectInfo);
-
-      this.triggerChange(newMissValueList, newValueList, extraInfo);
-    },
-
-    // ===================== Popup ======================
-    onValueTrigger(isAdd, nodeList, nodeEventInfo, nodeExtraInfo) {
-      const { node } = nodeEventInfo;
-      const { value } = node.$props;
-      const {
-        _missValueList: missValueList,
-        _valueEntities: valueEntities,
-        _keyEntities: keyEntities,
-        _searchValue: searchValue,
-      } = this.$data;
-      const {
-        disabled,
-        inputValue,
-        treeNodeLabelProp,
-        treeCheckable,
-        treeCheckStrictly,
-        autoClearSearchValue,
-      } = this.$props;
-      const label = node.$props[treeNodeLabelProp];
-
-      if (disabled) return;
-
-      // Wrap the return value for user
-      let wrappedValue;
-      if (this.isLabelInValue()) {
-        wrappedValue = {
-          value,
-          label,
-        };
-      } else {
-        wrappedValue = value;
-      }
-
-      // [Legacy] Origin code not trigger `onDeselect` every time. Let's align the behaviour.
-      if (isAdd) {
-        this.__emit('select', wrappedValue, node, nodeEventInfo);
-      } else {
-        this.__emit('deselect', wrappedValue, node, nodeEventInfo);
-      }
-
-      // Get wrapped value list.
-      // This is a bit hack cause we use key to match the value.
-      let newValueList = nodeList.map(node => {
-        const props = getPropsData(node);
-        return {
-          value: props.value,
-          label: props[treeNodeLabelProp],
-        };
-      });
-
-      // When is `treeCheckable` and with `searchValue`, `valueList` is not full filled.
-      // We need calculate the missing nodes.
-      if (treeCheckable && !treeCheckStrictly) {
-        let keyList = newValueList.map(({ value: val }) => valueEntities[val].key);
-        if (isAdd) {
-          keyList = conductCheck(keyList, true, keyEntities).checkedKeys;
-        } else {
-          keyList = conductCheck([valueEntities[value].key], false, keyEntities, {
-            checkedKeys: keyList,
-          }).checkedKeys;
-        }
-        newValueList = keyList.map(key => {
-          const props = getPropsData(keyEntities.get(key).node);
-          return {
-            value: props.value,
-            label: props[treeNodeLabelProp],
-          };
-        });
-      }
-
-      // Clean up `searchValue` when this prop is set
-      if (autoClearSearchValue || inputValue === null) {
-        // Clean state `searchValue` if uncontrolled
-        if (!this.isSearchValueControlled()) {
-          this.setUncontrolledState({
-            _searchValue: '',
-            _filteredTreeNodes: null,
-          });
-        }
-
-        // Trigger onSearch if `searchValue` to be empty.
-        // We should also trigger onSearch with empty string here
-        // since if user use `treeExpandedKeys`, it need user have the ability to reset it.
-        if (searchValue && searchValue.length) {
-          this.__emit('search', '');
-        }
-      }
-
-      // [Legacy] Provide extra info
-      const extraInfo = {
-        ...nodeExtraInfo,
-        triggerValue: value,
-        triggerNode: node,
-      };
-
-      this.triggerChange(missValueList, newValueList, extraInfo);
-    },
-
-    onTreeNodeSelect(_, nodeEventInfo) {
-      const { _valueList: valueList, _valueEntities: valueEntities } = this.$data;
-      const { treeCheckable, multiple } = this.$props;
-      if (treeCheckable) return;
-
-      if (!multiple) {
-        this.setOpenState(false);
-      }
-
-      const isAdd = nodeEventInfo.selected;
-      const {
-        $props: { value: selectedValue },
-      } = nodeEventInfo.node;
-
-      let newValueList;
-
-      if (!multiple) {
-        newValueList = [{ value: selectedValue }];
-      } else {
-        newValueList = valueList.filter(({ value }) => value !== selectedValue);
-        if (isAdd) {
-          newValueList.push({ value: selectedValue });
-        }
-      }
-
-      const selectedNodes = newValueList
-        .map(({ value }) => valueEntities[value])
-        .filter(entity => entity)
-        .map(({ node }) => node);
-
-      this.onValueTrigger(isAdd, selectedNodes, nodeEventInfo, { selected: isAdd });
-    },
-
-    onTreeNodeCheck(_, nodeEventInfo) {
-      const {
-        _searchValue: searchValue,
-        _keyEntities: keyEntities,
-        _valueEntities: valueEntities,
-        _valueList: valueList,
-      } = this.$data;
-      const { treeCheckStrictly } = this.$props;
-
-      const { checkedNodes, checkedNodesPositions } = nodeEventInfo;
-      const isAdd = nodeEventInfo.checked;
-
-      const extraInfo = {
-        checked: isAdd,
-      };
-
-      let checkedNodeList = checkedNodes;
-
-      // [Legacy] Check event provide `allCheckedNodes`.
-      // When `treeCheckStrictly` or internal `searchValue` is set, TreeNode will be unrelated:
-      // - Related: Show the top checked nodes and has children prop.
-      // - Unrelated: Show all the checked nodes.
-      if (searchValue) {
-        const oriKeyList = valueList
-          .map(({ value }) => valueEntities[value])
-          .filter(entity => entity)
-          .map(({ key }) => key);
-
-        let keyList;
-        if (isAdd) {
-          keyList = Array.from(
-            new Set([
-              ...oriKeyList,
-              ...checkedNodeList.map(node => {
-                const { value } = getPropsData(node);
-                return valueEntities[value].key;
-              }),
-            ]),
-          );
-        } else {
-          keyList = conductCheck([getPropsData(nodeEventInfo.node).eventKey], false, keyEntities, {
-            checkedKeys: oriKeyList,
-          }).checkedKeys;
-        }
-
-        checkedNodeList = keyList.map(key => keyEntities.get(key).node);
-
-        // Let's follow as not `treeCheckStrictly` format
-        extraInfo.allCheckedNodes = keyList.map(key => cleanEntity(keyEntities.get(key)));
-      } else if (treeCheckStrictly) {
-        extraInfo.allCheckedNodes = nodeEventInfo.checkedNodes;
-      } else {
-        extraInfo.allCheckedNodes = flatToHierarchy(checkedNodesPositions);
-      }
-
-      this.onValueTrigger(isAdd, checkedNodeList, nodeEventInfo, extraInfo);
-    },
-
-    // ==================== Trigger =====================
-
-    onDropdownVisibleChange(open) {
-      const { multiple, treeCheckable } = this.$props;
-      const { _searchValue } = this.$data;
-
-      // When set open success and single mode,
-      // we will reset the input content.
-      if (open && !multiple && !treeCheckable && _searchValue) {
-        this.setUncontrolledState({
-          _searchValue: '',
-          _filteredTreeNodes: null,
-        });
-      }
-      this.setOpenState(open, true);
-    },
-
-    onSearchInputChange(event) {
-      const value = event.target.value;
-      const { _treeNodes: treeNodes, _valueEntities: valueEntities } = this.$data;
-      const { filterTreeNode, treeNodeFilterProp } = this.$props;
-      this.__emit('search', value);
-
-      let isSet = false;
-
-      if (!this.isSearchValueControlled()) {
-        isSet = this.setUncontrolledState({
-          _searchValue: value,
-        });
-        this.setOpenState(true);
-      }
-
-      if (isSet) {
-        // Do the search logic
-        const upperSearchValue = String(value).toUpperCase();
-        let filterTreeNodeFn = filterTreeNode;
-        if (filterTreeNode === false) {
-          filterTreeNodeFn = () => true;
-        } else if (!filterTreeNodeFn) {
-          filterTreeNodeFn = (_, node) => {
-            const nodeValue = String(getPropsData(node)[treeNodeFilterProp]).toUpperCase();
-            return nodeValue.indexOf(upperSearchValue) !== -1;
-          };
-        }
-
-        this.setState({
-          _filteredTreeNodes: getFilterTree(
-            treeNodes,
-            value,
-            filterTreeNodeFn,
-            valueEntities,
-            SelectNode,
-          ),
-        });
-      }
-    },
-
-    onSearchInputKeyDown(event) {
-      const {
-        _searchValue: searchValue,
-        _valueList: valueList,
-        _valueEntities: valueEntities,
-      } = this.$data;
-
-      const { keyCode } = event;
-
-      if (KeyCode.BACKSPACE === keyCode && this.isMultiple() && !searchValue && valueList.length) {
-        let lastValue = valueList[valueList.length - 1].value;
-        const { treeCheckStrictly } = this.$props;
-        if (!treeCheckStrictly) {
-          let cur = valueEntities[lastValue];
-          while (cur) {
-            if (valueList.some(j => j.value === cur.value)) {
-              lastValue = cur.value;
-              cur = cur.parent;
-            } else {
-              cur = null;
-            }
-          }
-        }
-        this.onMultipleSelectorRemove(event, lastValue);
-      }
-    },
-
-    onChoiceAnimationLeave() {
-      requestAnimationFrame(() => {
-        this.forcePopupAlign();
-      });
-    },
-
-    setPopupRef(popup) {
-      this.popup = popup;
-    },
-
-    /**
-     * Only update the value which is not in props
-     */
-    setUncontrolledState(state) {
-      let needSync = false;
-      const newState = {};
-      const props = getOptionProps(this);
-      Object.keys(state).forEach(name => {
-        if (name.slice(1) in props) return;
-
-        needSync = true;
-        newState[name] = state[name];
-      });
-
-      if (needSync) {
-        this.setState(newState);
-      }
-
-      return needSync;
-    },
-
-    // [Legacy] Origin provide `documentClickClose` which triggered by `Trigger`
-    // Currently `TreeSelect` align the hide popup logic as `Select` which blur to hide.
-    // `documentClickClose` is not accurate anymore. Let's just keep the key word.
-    setOpenState(open, byTrigger = false) {
-      const { dropdownVisibleChange } = this.$props;
-
-      if (
-        dropdownVisibleChange &&
-        dropdownVisibleChange(open, { documentClickClose: !open && byTrigger }) === false
-      ) {
-        return;
-      }
-
-      this.setUncontrolledState({ _open: open });
-    },
-
-    // Tree checkable is also a multiple case
-    isMultiple() {
-      const { multiple, treeCheckable } = this.$props;
-      return !!(multiple || treeCheckable);
-    },
-
-    isLabelInValue() {
-      return isLabelInValue(this.$props);
-    },
-
-    // [Legacy] To align with `Select` component,
-    // We use `searchValue` instead of `inputValue`
-    // but currently still need support that.
-    // Add this method the check if is controlled
-    isSearchValueControlled() {
-      const props = getOptionProps(this);
-      const { inputValue } = props;
-      if ('searchValue' in props) return true;
-      return 'inputValue' in props && inputValue !== null;
-    },
-
-    forcePopupAlign() {
-      const $trigger = this.selectTriggerRef.current;
-      if ($trigger) {
-        $trigger.forcePopupAlign();
-      }
-    },
-
-    delayForcePopupAlign() {
-      // Wait 2 frame to avoid dom update & dom algin in the same time
-      // https://github.com/ant-design/ant-design/issues/12031
-      requestAnimationFrame(() => {
-        requestAnimationFrame(this.forcePopupAlign);
-      });
-    },
-
-    /**
-     * 1. Update state valueList.
-     * 2. Fire `onChange` event to user.
-     */
-    triggerChange(missValueList, valueList, extraInfo = {}) {
-      const {
-        _valueEntities: valueEntities,
-        _searchValue: searchValue,
-        _selectorValueList: prevSelectorValueList,
-      } = this.$data;
-      const props = getOptionProps(this);
-      const { disabled, treeCheckable, treeCheckStrictly } = props;
-      if (disabled) return;
-
-      // Trigger
-      const extra = {
-        // [Legacy] Always return as array contains label & value
-        preValue: prevSelectorValueList.map(({ label, value }) => ({ label, value })),
-        ...extraInfo,
-      };
-
-      // Format value by `treeCheckStrictly`
-      const selectorValueList = formatSelectorValue(valueList, props, valueEntities);
-
-      if (!('value' in props)) {
-        const newState = {
-          _missValueList: missValueList,
-          _valueList: valueList,
-          _selectorValueList: selectorValueList,
-        };
-
-        if (searchValue && treeCheckable && !treeCheckStrictly) {
-          newState._searchHalfCheckedKeys = getHalfCheckedKeys(valueList, valueEntities);
-        }
-
-        this.setState(newState);
-      }
-
-      // Only do the logic when `onChange` function provided
-      if (this.$attrs.onChange) {
-        let connectValueList;
-
-        // Get value by mode
-        if (this.isMultiple()) {
-          connectValueList = [...missValueList, ...selectorValueList];
-        } else {
-          connectValueList = selectorValueList.slice(0, 1);
-        }
-
-        let labelList = null;
-        let returnValue;
-
-        if (this.isLabelInValue()) {
-          returnValue = connectValueList.map(({ label, value }) => ({ label, value }));
-        } else {
-          labelList = [];
-          returnValue = connectValueList.map(({ label, value }) => {
-            labelList.push(label);
-            return value;
-          });
-        }
-
-        if (!this.isMultiple()) {
-          returnValue = returnValue[0];
-        }
-        this.__emit('change', returnValue, labelList, extra);
-      }
-    },
-
-    focus() {
-      this.selectorRef.current.focus();
-    },
-
-    blur() {
-      this.selectorRef.current.blur();
-    },
-  },
-
-  // ===================== Render =====================
-
-  render() {
-    const {
-      _valueList: valueList,
-      _missValueList: missValueList,
-      _selectorValueList: selectorValueList,
-      _searchHalfCheckedKeys: searchHalfCheckedKeys,
-      _valueEntities: valueEntities,
-      _keyEntities: keyEntities,
-      _searchValue: searchValue,
-      _open: open,
-      _focused: focused,
-      _treeNodes: treeNodes,
-      _filteredTreeNodes: filteredTreeNodes,
-    } = this.$data;
-    const props = getOptionProps(this);
-    const { prefixCls, treeExpandedKeys } = props;
-    const isMultiple = this.isMultiple();
-
-    const passProps = {
-      ...props,
-      ...this.$attrs,
-      isMultiple,
-      valueList,
-      searchHalfCheckedKeys,
-      selectorValueList: [...missValueList, ...selectorValueList],
-      valueEntities,
-      keyEntities,
-      searchValue,
-      upperSearchValue: (searchValue || '').toUpperCase(), // Perf save
-      open,
-      focused,
-      dropdownPrefixCls: `${prefixCls}-dropdown`,
-      ariaId: this.ariaId,
-      onChoiceAnimationLeave: this.onChoiceAnimationLeave,
-      vSlots: this.$slots,
-    };
-    const popupProps = {
-      ...passProps,
-      treeNodes,
-      filteredTreeNodes,
-      // Tree expanded control
-      treeExpandedKeys,
-      onTreeExpanded: this.delayForcePopupAlign,
-      ref: this.setPopupRef,
-    };
-
-    const $popup = <BasePopup {...popupProps} __propsSymbol__={[]} />;
-
-    const Selector = isMultiple ? MultipleSelector : SingleSelector;
-    const $selector = <Selector {...passProps} isMultiple={isMultiple} ref={this.selectorRef} />;
-    const selectTriggerProps = {
-      ...passProps,
-      popupElement: $popup,
-      dropdownVisibleChange: this.onDropdownVisibleChange,
-      ref: this.selectTriggerRef,
-    };
-    return <SelectTrigger {...selectTriggerProps}>{$selector}</SelectTrigger>;
-  },
-});
-
-Select.TreeNode = SelectNode;
-Select.SHOW_ALL = SHOW_ALL;
-Select.SHOW_PARENT = SHOW_PARENT;
-Select.SHOW_CHILD = SHOW_CHILD;
-
-// Let warning show correct component name
-Select.name = 'TreeSelect';
-
-export default Select;
diff --git a/components/vc-tree-select/src/SelectNode.jsx b/components/vc-tree-select/src/SelectNode.jsx
deleted file mode 100644
index 925aff366..000000000
--- a/components/vc-tree-select/src/SelectNode.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import VcTree from '../../vc-tree';
-/**
- * SelectNode wrapped the tree node.
- * Let's use SelectNode instead of TreeNode
- * since TreeNode is so confuse here.
- */
-const TreeNode = VcTree.TreeNode;
-function SelectNode(_, { attrs, slots }) {
-  return <TreeNode {...attrs} v-slots={slots} />;
-}
-
-SelectNode.isTreeNode = true;
-SelectNode.inheritAttrs = false;
-SelectNode.displayName = 'ATreeSelectNode';
-export default SelectNode;
diff --git a/components/vc-tree-select/src/SelectTrigger.jsx b/components/vc-tree-select/src/SelectTrigger.jsx
deleted file mode 100644
index 4c177f3b0..000000000
--- a/components/vc-tree-select/src/SelectTrigger.jsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import PropTypes from '../../_util/vue-types';
-import Trigger from '../../vc-trigger';
-import { createRef } from './util';
-import classNames from '../../_util/classNames';
-import { getSlot } from '../../_util/props-util';
-
-const BUILT_IN_PLACEMENTS = {
-  bottomLeft: {
-    points: ['tl', 'bl'],
-    offset: [0, 4],
-    overflow: {
-      adjustX: 0,
-      adjustY: 1,
-    },
-    ignoreShake: true,
-  },
-  topLeft: {
-    points: ['bl', 'tl'],
-    offset: [0, -4],
-    overflow: {
-      adjustX: 0,
-      adjustY: 1,
-    },
-    ignoreShake: true,
-  },
-};
-
-const SelectTrigger = {
-  name: 'SelectTrigger',
-  inheritAttrs: false,
-  props: {
-    // Pass by outside user props
-    disabled: PropTypes.looseBool,
-    showSearch: PropTypes.looseBool,
-    prefixCls: PropTypes.string,
-    dropdownPopupAlign: PropTypes.object,
-    dropdownClassName: PropTypes.string,
-    dropdownStyle: PropTypes.object,
-    transitionName: PropTypes.string,
-    animation: PropTypes.string,
-    getPopupContainer: PropTypes.func,
-
-    dropdownMatchSelectWidth: PropTypes.looseBool,
-
-    // Pass by Select
-    isMultiple: PropTypes.looseBool,
-    dropdownPrefixCls: PropTypes.string,
-    dropdownVisibleChange: PropTypes.func,
-    popupElement: PropTypes.any,
-    open: PropTypes.looseBool,
-  },
-  created() {
-    this.triggerRef = createRef();
-  },
-  methods: {
-    getDropdownTransitionName() {
-      const { transitionName, animation, dropdownPrefixCls } = this.$props;
-      if (!transitionName && animation) {
-        return `${dropdownPrefixCls}-${animation}`;
-      }
-      return transitionName;
-    },
-
-    forcePopupAlign() {
-      const $trigger = this.triggerRef.current;
-      if ($trigger) {
-        $trigger.forcePopupAlign();
-      }
-    },
-  },
-
-  render() {
-    const {
-      disabled,
-      isMultiple,
-      dropdownPopupAlign,
-      dropdownMatchSelectWidth,
-      dropdownClassName,
-      dropdownStyle,
-      dropdownVisibleChange,
-      getPopupContainer,
-      dropdownPrefixCls,
-      popupElement,
-      open,
-    } = this.$props;
-
-    // TODO: [Legacy] Use new action when trigger fixed: https://github.com/react-component/trigger/pull/86
-
-    // When false do nothing with the width
-    // ref: https://github.com/ant-design/ant-design/issues/10927
-    let stretch;
-    if (dropdownMatchSelectWidth !== false) {
-      stretch = dropdownMatchSelectWidth ? 'width' : 'minWidth';
-    }
-    return (
-      <Trigger
-        ref={this.triggerRef}
-        action={disabled ? [] : ['click']}
-        popupPlacement="bottomLeft"
-        builtinPlacements={BUILT_IN_PLACEMENTS}
-        popupAlign={dropdownPopupAlign}
-        prefixCls={dropdownPrefixCls}
-        popupTransitionName={this.getDropdownTransitionName()}
-        onPopupVisibleChange={dropdownVisibleChange}
-        popup={popupElement}
-        popupVisible={open}
-        getPopupContainer={getPopupContainer}
-        stretch={stretch}
-        popupClassName={classNames(dropdownClassName, {
-          [`${dropdownPrefixCls}--multiple`]: isMultiple,
-          [`${dropdownPrefixCls}--single`]: !isMultiple,
-        })}
-        popupStyle={dropdownStyle}
-      >
-        {getSlot(this)}
-      </Trigger>
-    );
-  },
-};
-
-export default SelectTrigger;
diff --git a/components/vc-tree-select/src/Selector/MultipleSelector/Selection.jsx b/components/vc-tree-select/src/Selector/MultipleSelector/Selection.jsx
deleted file mode 100644
index 50d21ae13..000000000
--- a/components/vc-tree-select/src/Selector/MultipleSelector/Selection.jsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import classNames from '../../../../_util/classNames';
-import PropTypes from '../../../../_util/vue-types';
-import { toTitle, UNSELECTABLE_ATTRIBUTE, UNSELECTABLE_STYLE } from '../../util';
-import { getComponent } from '../../../../_util/props-util';
-import BaseMixin from '../../../../_util/BaseMixin';
-
-const Selection = {
-  mixins: [BaseMixin],
-  inheritAttrs: false,
-  props: {
-    prefixCls: PropTypes.string,
-    maxTagTextLength: PropTypes.number,
-    // onRemove: PropTypes.func,
-
-    label: PropTypes.any,
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    removeIcon: PropTypes.any,
-  },
-  methods: {
-    onRemove(event) {
-      const { value } = this.$props;
-      this.__emit('remove', event, value);
-      event.stopPropagation();
-    },
-  },
-
-  render() {
-    const { prefixCls, maxTagTextLength, label, value } = this.$props;
-    let content = label || value;
-    if (maxTagTextLength && typeof content === 'string' && content.length > maxTagTextLength) {
-      content = `${content.slice(0, maxTagTextLength)}...`;
-    }
-    const { class: className, style, onRemove } = this.$attrs;
-    return (
-      <span
-        style={{ ...UNSELECTABLE_STYLE, ...style }}
-        {...UNSELECTABLE_ATTRIBUTE}
-        role="menuitem"
-        class={classNames(`${prefixCls}-selection-item`, className)}
-        title={toTitle(label)}
-      >
-        <span class={`${prefixCls}-selection-item-content`}>{content}</span>
-        {onRemove && (
-          <span class={`${prefixCls}-selection-item-remove`} onClick={this.onRemove}>
-            {getComponent(this, 'removeIcon')}
-          </span>
-        )}
-      </span>
-    );
-  },
-};
-
-export default Selection;
diff --git a/components/vc-tree-select/src/Selector/MultipleSelector/index.jsx b/components/vc-tree-select/src/Selector/MultipleSelector/index.jsx
deleted file mode 100644
index f3899fd31..000000000
--- a/components/vc-tree-select/src/Selector/MultipleSelector/index.jsx
+++ /dev/null
@@ -1,161 +0,0 @@
-import { inject } from 'vue';
-import PropTypes from '../../../../_util/vue-types';
-import { createRef } from '../../util';
-import generateSelector, { selectorPropTypes } from '../../Base/BaseSelector';
-import SearchInput from '../../SearchInput';
-import Selection from './Selection';
-import { getComponent, getSlot } from '../../../../_util/props-util';
-import BaseMixin from '../../../../_util/BaseMixin';
-const TREE_SELECT_EMPTY_VALUE_KEY = 'RC_TREE_SELECT_EMPTY_VALUE_KEY';
-
-const Selector = generateSelector('multiple');
-
-// export const multipleSelectorContextTypes = {
-//   onMultipleSelectorRemove: PropTypes.func.isRequired,
-// }
-
-const MultipleSelector = {
-  name: 'MultipleSelector',
-  mixins: [BaseMixin],
-  inheritAttrs: false,
-  props: {
-    ...selectorPropTypes(),
-    ...SearchInput.props,
-    selectorValueList: PropTypes.array,
-    disabled: PropTypes.looseBool,
-    labelInValue: PropTypes.looseBool,
-    maxTagCount: PropTypes.number,
-    maxTagPlaceholder: PropTypes.any,
-
-    // onChoiceAnimationLeave: PropTypes.func,
-  },
-  setup() {
-    return {
-      vcTreeSelect: inject('vcTreeSelect', {}),
-    };
-  },
-  created() {
-    this.inputRef = createRef();
-  },
-  methods: {
-    onPlaceholderClick() {
-      this.inputRef.current.focus();
-    },
-
-    focus() {
-      this.inputRef.current.focus();
-    },
-    blur() {
-      this.inputRef.current.blur();
-    },
-
-    _renderPlaceholder() {
-      const { prefixCls, placeholder, searchPlaceholder, searchValue, selectorValueList } =
-        this.$props;
-
-      const currentPlaceholder = placeholder || searchPlaceholder;
-
-      if (!currentPlaceholder) return null;
-
-      const hidden = searchValue || selectorValueList.length;
-
-      // [Legacy] Not remove the placeholder
-      return (
-        <span
-          style={{
-            display: hidden ? 'none' : 'block',
-          }}
-          onClick={this.onPlaceholderClick}
-          class={`${prefixCls}-selection-placeholder`}
-        >
-          {currentPlaceholder}
-        </span>
-      );
-    },
-    onChoiceAnimationLeave(...args) {
-      this.__emit('choiceAnimationLeave', ...args);
-    },
-    renderSelection() {
-      const { selectorValueList, labelInValue, maxTagCount } = this.$props;
-      const children = getSlot(this);
-      const {
-        vcTreeSelect: { onMultipleSelectorRemove },
-      } = this;
-      // Check if `maxTagCount` is set
-      let myValueList = selectorValueList;
-      if (maxTagCount >= 0) {
-        myValueList = selectorValueList.slice(0, maxTagCount);
-      }
-      // Selector node list
-      const selectedValueNodes = myValueList.map(({ label, value }) => (
-        <Selection
-          {...{
-            ...this.$props,
-            label,
-            value,
-            onRemove: onMultipleSelectorRemove,
-          }}
-          key={value || TREE_SELECT_EMPTY_VALUE_KEY}
-        >
-          {children}
-        </Selection>
-      ));
-
-      // Rest node count
-      if (maxTagCount >= 0 && maxTagCount < selectorValueList.length) {
-        let content = `+ ${selectorValueList.length - maxTagCount} ...`;
-        const maxTagPlaceholder = getComponent(this, 'maxTagPlaceholder', {}, false);
-        if (typeof maxTagPlaceholder === 'string') {
-          content = maxTagPlaceholder;
-        } else if (typeof maxTagPlaceholder === 'function') {
-          const restValueList = selectorValueList.slice(maxTagCount);
-          content = maxTagPlaceholder(
-            labelInValue ? restValueList : restValueList.map(({ value }) => value),
-          );
-        }
-
-        const restNodeSelect = (
-          <Selection
-            {...{
-              ...this.$props,
-              label: content,
-              value: null,
-            }}
-            key="rc-tree-select-internal-max-tag-counter"
-          >
-            {children}
-          </Selection>
-        );
-
-        selectedValueNodes.push(restNodeSelect);
-      }
-
-      selectedValueNodes.push(
-        <SearchInput key="SearchInput" {...this.$props} {...this.$attrs} ref={this.inputRef}>
-          {children}
-        </SearchInput>,
-      );
-
-      return selectedValueNodes;
-    },
-  },
-
-  render() {
-    return (
-      <Selector
-        {...{
-          ...this.$props,
-          ...this.$attrs,
-          tabindex: -1,
-          showArrow: false,
-          renderSelection: this.renderSelection,
-          renderPlaceholder: this._renderPlaceholder,
-        }}
-      >
-        {getSlot(this)}
-      </Selector>
-    );
-  },
-};
-
-export default MultipleSelector;
diff --git a/components/vc-tree-select/src/Selector/SingleSelector.jsx b/components/vc-tree-select/src/Selector/SingleSelector.jsx
deleted file mode 100644
index cff257733..000000000
--- a/components/vc-tree-select/src/Selector/SingleSelector.jsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import generateSelector, { selectorPropTypes } from '../Base/BaseSelector';
-import { toTitle } from '../util';
-import { getOptionProps } from '../../../_util/props-util';
-import { createRef } from '../util';
-import SearchInput from '../SearchInput';
-const Selector = generateSelector('single');
-
-const SingleSelector = {
-  name: 'SingleSelector',
-  inheritAttrs: false,
-  props: selectorPropTypes(),
-  created() {
-    this.selectorRef = createRef();
-    this.inputRef = createRef();
-  },
-  data() {
-    return {
-      mirrorSearchValue: this.searchValue,
-    };
-  },
-  watch: {
-    searchValue(val) {
-      this.mirrorSearchValue = val;
-    },
-  },
-  methods: {
-    onPlaceholderClick() {
-      this.inputRef.current.focus();
-    },
-    focus() {
-      this.selectorRef.current.focus();
-    },
-    blur() {
-      this.selectorRef.current.blur();
-    },
-    _renderPlaceholder() {
-      const { prefixCls, placeholder, searchPlaceholder, selectorValueList } = this.$props;
-
-      const currentPlaceholder = placeholder || searchPlaceholder;
-
-      if (!currentPlaceholder) return null;
-
-      const hidden = this.mirrorSearchValue || selectorValueList.length;
-
-      // [Legacy] Not remove the placeholder
-      return (
-        <span
-          style={{
-            display: hidden ? 'none' : 'block',
-          }}
-          onClick={this.onPlaceholderClick}
-          class={`${prefixCls}-selection-placeholder`}
-        >
-          {currentPlaceholder}
-        </span>
-      );
-    },
-    onMirrorSearchValueChange(value) {
-      this.mirrorSearchValue = value;
-    },
-    renderSelection() {
-      const { selectorValueList, prefixCls } = this.$props;
-      const selectedValueNodes = [];
-      if (selectorValueList.length && !this.mirrorSearchValue) {
-        const { label, value } = selectorValueList[0];
-        selectedValueNodes.push(
-          <span key={value} title={toTitle(label)} class={`${prefixCls}-selection-item`}>
-            {label || value}
-          </span>,
-        );
-      }
-      selectedValueNodes.push(
-        <SearchInput
-          {...this.$props}
-          {...this.$attrs}
-          ref={this.inputRef}
-          isMultiple={false}
-          onMirrorSearchValueChange={this.onMirrorSearchValueChange}
-        />,
-      );
-      return selectedValueNodes;
-    },
-  },
-
-  render() {
-    const props = {
-      ...getOptionProps(this),
-      ...this.$attrs,
-      renderSelection: this.renderSelection,
-      renderPlaceholder: this._renderPlaceholder,
-      ref: this.selectorRef,
-    };
-    return <Selector {...props} />;
-  },
-};
-
-export default SingleSelector;
diff --git a/components/vc-tree-select/src/index.js b/components/vc-tree-select/src/index.js
deleted file mode 100644
index 49f26730e..000000000
--- a/components/vc-tree-select/src/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import Select from './Select';
-import SelectNode from './SelectNode';
-
-export { SHOW_ALL, SHOW_CHILD, SHOW_PARENT } from './strategies';
-export const TreeNode = SelectNode;
-
-export default Select;
diff --git a/components/vc-tree-select/src/propTypes.js b/components/vc-tree-select/src/propTypes.js
deleted file mode 100644
index c3fcefea0..000000000
--- a/components/vc-tree-select/src/propTypes.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import PropTypes from '../../_util/vue-types';
-import { isLabelInValue } from './util';
-
-const internalValProp = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
-
-export function genArrProps(propType) {
-  return PropTypes.oneOfType([propType, PropTypes.arrayOf(propType)]);
-}
-
-/**
- * Origin code check `multiple` is true when `treeCheckStrictly` & `labelInValue`.
- * But in process logic is already cover to array.
- * Check array is not necessary. Let's simplify this check logic.
- */
-export function valueProp(...args) {
-  const [props, propName, Component] = args;
-
-  if (isLabelInValue(props)) {
-    const err = genArrProps(
-      PropTypes.shape({
-        label: PropTypes.any,
-        value: internalValProp,
-      }).loose,
-    )(...args);
-    if (err) {
-      return new Error(
-        `Invalid prop \`${propName}\` supplied to \`${Component}\`. ` +
-          `You should use { label: string, value: string | number } or [{ label: string, value: string | number }] instead.`,
-      );
-    }
-    return null;
-  }
-
-  const err = genArrProps(internalValProp)(...args);
-  if (err) {
-    return new Error(
-      `Invalid prop \`${propName}\` supplied to \`${Component}\`. ` +
-        `You should use string or [string] instead.`,
-    );
-  }
-  return null;
-}
diff --git a/components/vc-tree-select/src/strategies.js b/components/vc-tree-select/src/strategies.js
deleted file mode 100644
index b5cf1944b..000000000
--- a/components/vc-tree-select/src/strategies.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export const SHOW_ALL = 'SHOW_ALL';
-export const SHOW_PARENT = 'SHOW_PARENT';
-export const SHOW_CHILD = 'SHOW_CHILD';
diff --git a/components/vc-tree-select/src/util.js b/components/vc-tree-select/src/util.js
deleted file mode 100644
index c9f9b3f87..000000000
--- a/components/vc-tree-select/src/util.js
+++ /dev/null
@@ -1,431 +0,0 @@
-import warning from 'warning';
-import {
-  convertDataToTree as vcConvertDataToTree,
-  convertTreeToEntities as vcConvertTreeToEntities,
-  conductCheck as rcConductCheck,
-} from '../../vc-tree/src/util';
-import { hasClass } from '../../vc-util/Dom/class';
-import { SHOW_CHILD, SHOW_PARENT } from './strategies';
-import { getSlot, getPropsData, isEmptyElement } from '../../_util/props-util';
-
-let warnDeprecatedLabel = false;
-
-// =================== DOM =====================
-export function findPopupContainer(node, prefixClass) {
-  let current = node;
-  while (current) {
-    if (hasClass(current, prefixClass)) {
-      return current;
-    }
-    current = current.parentNode;
-  }
-
-  return null;
-}
-
-// =================== MISC ====================
-export function toTitle(title) {
-  if (typeof title === 'string') {
-    return title;
-  }
-  return null;
-}
-
-export function toArray(data) {
-  if (data === undefined || data === null) return [];
-
-  return Array.isArray(data) ? data : [data];
-}
-
-export function createRef() {
-  const func = function setRef(node) {
-    func.current = node;
-  };
-  return func;
-}
-
-// =============== Legacy ===============
-export const UNSELECTABLE_STYLE = {
-  userSelect: 'none',
-  WebkitUserSelect: 'none',
-};
-
-export const UNSELECTABLE_ATTRIBUTE = {
-  unselectable: 'unselectable',
-};
-
-/**
- * Convert position list to hierarchy structure.
- * This is little hack since use '-' to split the position.
- */
-export function flatToHierarchy(positionList) {
-  if (!positionList.length) {
-    return [];
-  }
-
-  const entrances = {};
-
-  // Prepare the position map
-  const posMap = {};
-  const parsedList = positionList.slice().map(entity => {
-    const clone = {
-      ...entity,
-      fields: entity.pos.split('-'),
-    };
-    delete clone.children;
-    return clone;
-  });
-
-  parsedList.forEach(entity => {
-    posMap[entity.pos] = entity;
-  });
-
-  parsedList.sort((a, b) => {
-    return a.fields.length - b.fields.length;
-  });
-
-  // Create the hierarchy
-  parsedList.forEach(entity => {
-    const parentPos = entity.fields.slice(0, -1).join('-');
-    const parentEntity = posMap[parentPos];
-
-    if (!parentEntity) {
-      entrances[entity.pos] = entity;
-    } else {
-      parentEntity.children = parentEntity.children || [];
-      parentEntity.children.push(entity);
-    }
-
-    // Some time position list provide `key`, we don't need it
-    delete entity.key;
-    delete entity.fields;
-  });
-
-  return Object.keys(entrances).map(key => entrances[key]);
-}
-
-// =============== Accessibility ===============
-let ariaId = 0;
-
-export function resetAriaId() {
-  ariaId = 0;
-}
-
-export function generateAriaId(prefix) {
-  ariaId += 1;
-  return `${prefix}_${ariaId}`;
-}
-
-export function isLabelInValue(props) {
-  const { treeCheckable, treeCheckStrictly, labelInValue } = props;
-  if (treeCheckable && treeCheckStrictly) {
-    return true;
-  }
-  return labelInValue || false;
-}
-
-// =================== Tree ====================
-export function parseSimpleTreeData(treeData, { id, pId, rootPId }) {
-  const keyNodes = {};
-  const rootNodeList = [];
-
-  // Fill in the map
-  const nodeList = treeData.map(node => {
-    const clone = { ...node };
-    const key = clone[id];
-    keyNodes[key] = clone;
-    clone.key = clone.key || key;
-    return clone;
-  });
-
-  // Connect tree
-  nodeList.forEach(node => {
-    const parentKey = node[pId];
-    const parent = keyNodes[parentKey];
-
-    // Fill parent
-    if (parent) {
-      parent.children = parent.children || [];
-      parent.children.push(node);
-    }
-
-    // Fill root tree node
-    if (parentKey === rootPId || (!parent && rootPId === null)) {
-      rootNodeList.push(node);
-    }
-  });
-
-  return rootNodeList;
-}
-
-/**
- * Detect if position has relation.
- * e.g. 1-2 related with 1-2-3
- * e.g. 1-3-2 related with 1
- * e.g. 1-2 not related with 1-21
- */
-export function isPosRelated(pos1, pos2) {
-  const fields1 = pos1.split('-');
-  const fields2 = pos2.split('-');
-
-  const minLen = Math.min(fields1.length, fields2.length);
-  for (let i = 0; i < minLen; i += 1) {
-    if (fields1[i] !== fields2[i]) {
-      return false;
-    }
-  }
-  return true;
-}
-
-/**
- * This function is only used on treeNode check (none treeCheckStrictly but has searchInput).
- * We convert entity to { node, pos, children } format.
- * This is legacy bug but we still need to do with it.
- * @param entity
- */
-export function cleanEntity({ node, pos, children }) {
-  const instance = {
-    node,
-    pos,
-  };
-
-  if (children) {
-    instance.children = children.map(cleanEntity);
-  }
-
-  return instance;
-}
-
-/**
- * Get a filtered TreeNode list by provided treeNodes.
- * [Legacy] Since `Tree` use `key` as map but `key` will changed by React,
- * we have to convert `treeNodes > data > treeNodes` to keep the key.
- * Such performance hungry!
- */
-export function getFilterTree(treeNodes, searchValue, filterFunc, valueEntities, Component) {
-  if (!searchValue) {
-    return null;
-  }
-
-  function mapFilteredNodeToData(node) {
-    if (!node || isEmptyElement(node)) return null;
-
-    let match = false;
-    if (filterFunc(searchValue, node)) {
-      match = true;
-    }
-    let children = getSlot(node);
-    children = ((typeof children === 'function' ? children() : children) || [])
-      .map(mapFilteredNodeToData)
-      .filter(n => n);
-    if (children.length || match) {
-      return (
-        <Component {...node.props} key={valueEntities[getPropsData(node).value].key}>
-          {children}
-        </Component>
-      );
-    }
-
-    return null;
-  }
-  return treeNodes.map(mapFilteredNodeToData).filter(node => node);
-}
-
-// =================== Value ===================
-/**
- * Convert value to array format to make logic simplify.
- */
-export function formatInternalValue(value, props) {
-  const valueList = toArray(value);
-
-  // Parse label in value
-  if (isLabelInValue(props)) {
-    return valueList.map(val => {
-      if (typeof val !== 'object' || !val) {
-        return {
-          value: '',
-          label: '',
-        };
-      }
-
-      return val;
-    });
-  }
-
-  return valueList.map(val => ({
-    value: val,
-  }));
-}
-
-export function getLabel(wrappedValue, entity, treeNodeLabelProp) {
-  if (wrappedValue.label) {
-    return wrappedValue.label;
-  }
-
-  if (entity) {
-    const props = getPropsData(entity.node);
-    if (Object.keys(props).length) {
-      return props[treeNodeLabelProp];
-    }
-  }
-
-  // Since value without entity will be in missValueList.
-  // This code will never reached, but we still need this in case.
-  return wrappedValue.value;
-}
-
-/**
- * Convert internal state `valueList` to user needed value list.
- * This will return an array list. You need check if is not multiple when return.
- *
- * `allCheckedNodes` is used for `treeCheckStrictly`
- */
-export function formatSelectorValue(valueList, props, valueEntities) {
-  const { treeNodeLabelProp, treeCheckable, treeCheckStrictly, showCheckedStrategy } = props;
-
-  // Will hide some value if `showCheckedStrategy` is set
-  if (treeCheckable && !treeCheckStrictly) {
-    const values = {};
-    valueList.forEach(wrappedValue => {
-      values[wrappedValue.value] = wrappedValue;
-    });
-    const hierarchyList = flatToHierarchy(valueList.map(({ value }) => valueEntities[value]));
-
-    if (showCheckedStrategy === SHOW_PARENT) {
-      // Only get the parent checked value
-      return hierarchyList.map(({ node }) => {
-        const value = getPropsData(node).value;
-        return {
-          label: getLabel(values[value], valueEntities[value], treeNodeLabelProp),
-          value,
-        };
-      });
-    }
-    if (showCheckedStrategy === SHOW_CHILD) {
-      // Only get the children checked value
-      const targetValueList = [];
-
-      // Find the leaf children
-      const traverse = ({ node, children }) => {
-        const value = getPropsData(node).value;
-        if (!children || children.length === 0) {
-          targetValueList.push({
-            label: getLabel(values[value], valueEntities[value], treeNodeLabelProp),
-            value,
-          });
-          return;
-        }
-
-        children.forEach(entity => {
-          traverse(entity);
-        });
-      };
-
-      hierarchyList.forEach(entity => {
-        traverse(entity);
-      });
-
-      return targetValueList;
-    }
-  }
-
-  return valueList.map(wrappedValue => ({
-    label: getLabel(wrappedValue, valueEntities[wrappedValue.value], treeNodeLabelProp),
-    value: wrappedValue.value,
-  }));
-}
-
-/**
- * Use `rc-tree` convertDataToTree to convert treeData to TreeNodes.
- * This will change the label to title value
- */
-function processProps(props) {
-  const { title, label, key, value } = props;
-  const cloneProps = { ...props };
-  // Warning user not to use deprecated label prop.
-  if (label && !title) {
-    if (!warnDeprecatedLabel) {
-      warning(false, "'label' in treeData is deprecated. Please use 'title' instead.");
-      warnDeprecatedLabel = true;
-    }
-
-    cloneProps.title = label;
-  }
-
-  if (!key && (key === undefined || key === null)) {
-    cloneProps.key = value;
-  }
-
-  return cloneProps;
-}
-
-export function convertDataToTree(treeData) {
-  return vcConvertDataToTree(treeData, { processProps });
-}
-
-/**
- * Use `rc-tree` convertTreeToEntities for entities calculation.
- * We have additional entities of `valueEntities`
- */
-function initWrapper(wrapper) {
-  return {
-    ...wrapper,
-    valueEntities: {},
-  };
-}
-
-function processEntity(entity, wrapper) {
-  const value = getPropsData(entity.node).value;
-  entity.value = value;
-
-  // This should be empty, or will get error message.
-  const currentEntity = wrapper.valueEntities[value];
-  if (currentEntity) {
-    warning(
-      false,
-      `Conflict! value of node '${entity.key}' (${value}) has already used by node '${currentEntity.key}'.`,
-    );
-  }
-  wrapper.valueEntities[value] = entity;
-}
-
-export function convertTreeToEntities(treeNodes) {
-  return vcConvertTreeToEntities(treeNodes, {
-    initWrapper,
-    processEntity,
-  });
-}
-
-/**
- * https://github.com/ant-design/ant-design/issues/13328
- * We need calculate the half check key when searchValue is set.
- */
-// TODO: This logic may better move to rc-tree
-export function getHalfCheckedKeys(valueList, valueEntities) {
-  const values = {};
-
-  // Fill checked keys
-  valueList.forEach(({ value }) => {
-    values[value] = false;
-  });
-
-  // Fill half checked keys
-  valueList.forEach(({ value }) => {
-    let current = valueEntities[value];
-
-    while (current && current.parent) {
-      const parentValue = current.parent.value;
-      if (parentValue in values) break;
-      values[parentValue] = true;
-
-      current = current.parent;
-    }
-  });
-
-  // Get half keys
-  return Object.keys(values)
-    .filter(value => values[value])
-    .map(value => valueEntities[value].key);
-}
-
-export const conductCheck = rcConductCheck;
diff --git a/components/vc-tree-select/utils/legacyUtil.tsx b/components/vc-tree-select/utils/legacyUtil.tsx
new file mode 100644
index 000000000..f9e5d3c04
--- /dev/null
+++ b/components/vc-tree-select/utils/legacyUtil.tsx
@@ -0,0 +1,181 @@
+import { filterEmpty } from '../../_util/props-util';
+import type { VNodeChild } from 'vue';
+import { camelize } from 'vue';
+import { warning } from '../../vc-util/warning';
+import type {
+  DataNode,
+  LegacyDataNode,
+  ChangeEventExtra,
+  InternalDataEntity,
+  RawValueType,
+  LegacyCheckedNode,
+} from '../interface';
+import TreeNode from '../TreeNode';
+
+function isTreeSelectNode(node: any) {
+  return node && node.type && (node.type as any).isTreeSelectNode;
+}
+export function convertChildrenToData(rootNodes: VNodeChild): DataNode[] {
+  function dig(treeNodes: any[] = []): DataNode[] {
+    return filterEmpty(treeNodes).map(treeNode => {
+      // Filter invalidate node
+      if (!isTreeSelectNode(treeNode)) {
+        warning(!treeNode, 'TreeSelect/TreeSelectNode can only accept TreeSelectNode as children.');
+        return null;
+      }
+      const slots = (treeNode.children as any) || {};
+      const key = treeNode.key as string | number;
+      const props: any = {};
+      for (const [k, v] of Object.entries(treeNode.props)) {
+        props[camelize(k)] = v;
+      }
+      const { isLeaf, checkable, selectable, disabled, disableCheckbox } = props;
+      // 默认值为 undefined
+      const newProps = {
+        isLeaf: isLeaf || isLeaf === '' || undefined,
+        checkable: checkable || checkable === '' || undefined,
+        selectable: selectable || selectable === '' || undefined,
+        disabled: disabled || disabled === '' || undefined,
+        disableCheckbox: disableCheckbox || disableCheckbox === '' || undefined,
+      };
+      const slotsProps = { ...props, ...newProps };
+      const {
+        title = slots.title?.(slotsProps),
+        switcherIcon = slots.switcherIcon?.(slotsProps),
+        ...rest
+      } = props;
+      const children = slots.default?.();
+      const dataNode: DataNode = {
+        ...rest,
+        title,
+        switcherIcon,
+        key,
+        isLeaf,
+        ...newProps,
+      };
+
+      const parsedChildren = dig(children);
+      if (parsedChildren.length) {
+        dataNode.children = parsedChildren;
+      }
+
+      return dataNode;
+    });
+  }
+
+  return dig(rootNodes as any[]);
+}
+
+export function fillLegacyProps(dataNode: DataNode): LegacyDataNode {
+  // Skip if not dataNode exist
+  if (!dataNode) {
+    return dataNode as LegacyDataNode;
+  }
+
+  const cloneNode = { ...dataNode };
+
+  if (!('props' in cloneNode)) {
+    Object.defineProperty(cloneNode, 'props', {
+      get() {
+        warning(
+          false,
+          'New `rc-tree-select` not support return node instance as argument anymore. Please consider to remove `props` access.',
+        );
+        return cloneNode;
+      },
+    });
+  }
+
+  return cloneNode as LegacyDataNode;
+}
+
+export function fillAdditionalInfo(
+  extra: ChangeEventExtra,
+  triggerValue: RawValueType,
+  checkedValues: RawValueType[],
+  treeData: InternalDataEntity[],
+  showPosition: boolean,
+) {
+  let triggerNode = null;
+  let nodeList: LegacyCheckedNode[] = null;
+
+  function generateMap() {
+    function dig(list: InternalDataEntity[], level = '0', parentIncluded = false) {
+      return list
+        .map((dataNode, index) => {
+          const pos = `${level}-${index}`;
+          const included = checkedValues.includes(dataNode.value);
+          const children = dig(dataNode.children || [], pos, included);
+          const node = <TreeNode {...dataNode}>{children.map(child => child.node)}</TreeNode>;
+
+          // Link with trigger node
+          if (triggerValue === dataNode.value) {
+            triggerNode = node;
+          }
+
+          if (included) {
+            const checkedNode: LegacyCheckedNode = {
+              pos,
+              node,
+              children,
+            };
+
+            if (!parentIncluded) {
+              nodeList.push(checkedNode);
+            }
+
+            return checkedNode;
+          }
+          return null;
+        })
+        .filter(node => node);
+    }
+
+    if (!nodeList) {
+      nodeList = [];
+
+      dig(treeData);
+
+      // Sort to keep the checked node length
+      nodeList.sort(
+        (
+          {
+            node: {
+              props: { value: val1 },
+            },
+          },
+          {
+            node: {
+              props: { value: val2 },
+            },
+          },
+        ) => {
+          const index1 = checkedValues.indexOf(val1);
+          const index2 = checkedValues.indexOf(val2);
+          return index1 - index2;
+        },
+      );
+    }
+  }
+
+  Object.defineProperty(extra, 'triggerNode', {
+    get() {
+      warning(false, '`triggerNode` is deprecated. Please consider decoupling data with node.');
+      generateMap();
+
+      return triggerNode;
+    },
+  });
+  Object.defineProperty(extra, 'allCheckedNodes', {
+    get() {
+      warning(false, '`allCheckedNodes` is deprecated. Please consider decoupling data with node.');
+      generateMap();
+
+      if (showPosition) {
+        return nodeList;
+      }
+
+      return nodeList.map(({ node }) => node);
+    },
+  });
+}
diff --git a/components/vc-tree-select/utils/strategyUtil.ts b/components/vc-tree-select/utils/strategyUtil.ts
new file mode 100644
index 000000000..ad47e768a
--- /dev/null
+++ b/components/vc-tree-select/utils/strategyUtil.ts
@@ -0,0 +1,46 @@
+import type { DataEntity } from '../../vc-tree/interface';
+import type { RawValueType, Key, DataNode } from '../interface';
+import { isCheckDisabled } from './valueUtil';
+
+export const SHOW_ALL = 'SHOW_ALL';
+export const SHOW_PARENT = 'SHOW_PARENT';
+export const SHOW_CHILD = 'SHOW_CHILD';
+
+export type CheckedStrategy = typeof SHOW_ALL | typeof SHOW_PARENT | typeof SHOW_CHILD;
+
+export function formatStrategyKeys(
+  keys: Key[],
+  strategy: CheckedStrategy,
+  keyEntities: Record<Key, DataEntity>,
+): RawValueType[] {
+  const keySet = new Set(keys);
+
+  if (strategy === SHOW_CHILD) {
+    return keys.filter(key => {
+      const entity = keyEntities[key];
+
+      if (
+        entity &&
+        entity.children &&
+        entity.children.every(
+          ({ node }) => isCheckDisabled(node) || keySet.has((node as DataNode).key),
+        )
+      ) {
+        return false;
+      }
+      return true;
+    });
+  }
+  if (strategy === SHOW_PARENT) {
+    return keys.filter(key => {
+      const entity = keyEntities[key];
+      const parent = entity ? entity.parent : null;
+
+      if (parent && !isCheckDisabled(parent.node) && keySet.has((parent.node as DataNode).key)) {
+        return false;
+      }
+      return true;
+    });
+  }
+  return keys;
+}
diff --git a/components/vc-tree-select/utils/valueUtil.ts b/components/vc-tree-select/utils/valueUtil.ts
new file mode 100644
index 000000000..33f71a74f
--- /dev/null
+++ b/components/vc-tree-select/utils/valueUtil.ts
@@ -0,0 +1,244 @@
+import type {
+  FlattenDataNode,
+  Key,
+  RawValueType,
+  DataNode,
+  DefaultValueType,
+  LabelValueType,
+  LegacyDataNode,
+  FieldNames,
+  InternalDataEntity,
+} from '../interface';
+import { fillLegacyProps } from './legacyUtil';
+import type { SkipType } from '../hooks/useKeyValueMapping';
+import type { FlattenNode } from '../../vc-tree/interface';
+import { flattenTreeData } from '../../vc-tree/utils/treeUtil';
+import type { FilterFunc } from '../../vc-select/interface/generator';
+
+type CompatibleDataNode = Omit<FlattenDataNode, 'level'>;
+
+export function toArray<T>(value: T | T[]): T[] {
+  if (Array.isArray(value)) {
+    return value;
+  }
+  return value !== undefined ? [value] : [];
+}
+
+/**
+ * Fill `fieldNames` with default field names.
+ *
+ * @param fieldNames passed props
+ * @param skipTitle Skip if no need fill `title`. This is useful since we have 2 name as same title level
+ * @returns
+ */
+export function fillFieldNames(fieldNames?: FieldNames, skipTitle = false) {
+  const { label, value, children } = fieldNames || {};
+
+  const filledNames: FieldNames = {
+    value: value || 'value',
+    children: children || 'children',
+  };
+
+  if (!skipTitle || label) {
+    filledNames.label = label || 'label';
+  }
+
+  return filledNames;
+}
+
+export function findValueOption(values: RawValueType[], options: CompatibleDataNode[]): DataNode[] {
+  const optionMap: Map<RawValueType, DataNode> = new Map();
+
+  options.forEach(flattenItem => {
+    const { data, value } = flattenItem;
+    optionMap.set(value, data.node);
+  });
+
+  return values.map(val => fillLegacyProps(optionMap.get(val)));
+}
+
+export function isValueDisabled(value: RawValueType, options: CompatibleDataNode[]): boolean {
+  const option = findValueOption([value], options)[0];
+  if (option) {
+    return option.disabled;
+  }
+
+  return false;
+}
+
+export function isCheckDisabled(node: DataNode) {
+  return node.disabled || node.disableCheckbox || node.checkable === false;
+}
+
+interface TreeDataNode extends InternalDataEntity {
+  key: Key;
+  children?: TreeDataNode[];
+}
+
+function getLevel({ parent }: FlattenNode): number {
+  let level = 0;
+  let current = parent;
+
+  while (current) {
+    current = current.parent;
+    level += 1;
+  }
+
+  return level;
+}
+
+/**
+ * Before reuse `rc-tree` logic, we need to add key since TreeSelect use `value` instead of `key`.
+ */
+export function flattenOptions(options: any): FlattenDataNode[] {
+  const typedOptions = options as InternalDataEntity[];
+
+  // Add missing key
+  function fillKey(list: InternalDataEntity[]): TreeDataNode[] {
+    return (list || []).map(node => {
+      const { value, key, children } = node;
+
+      const clone: TreeDataNode = {
+        ...node,
+        key: 'key' in node ? key : value,
+      };
+
+      if (children) {
+        clone.children = fillKey(children);
+      }
+
+      return clone;
+    });
+  }
+
+  const flattenList = flattenTreeData(fillKey(typedOptions), true, null);
+
+  const cacheMap = new Map<Key, FlattenDataNode>();
+  const flattenDateNodeList: (FlattenDataNode & { parentKey?: Key })[] = flattenList.map(option => {
+    const { data, key, value } = option as any as Omit<FlattenNode, 'data'> & {
+      value: RawValueType;
+      data: InternalDataEntity;
+    };
+
+    const flattenNode = {
+      key,
+      value,
+      data,
+      level: getLevel(option),
+      parentKey: option.parent?.data.key,
+    };
+
+    cacheMap.set(key, flattenNode);
+
+    return flattenNode;
+  });
+
+  // Fill parent
+  flattenDateNodeList.forEach(flattenNode => {
+    // eslint-disable-next-line no-param-reassign
+    flattenNode.parent = cacheMap.get(flattenNode.parentKey);
+  });
+
+  return flattenDateNodeList;
+}
+
+function getDefaultFilterOption(optionFilterProp: string) {
+  return (searchValue: string, dataNode: LegacyDataNode) => {
+    const value = dataNode[optionFilterProp];
+
+    return String(value).toLowerCase().includes(String(searchValue).toLowerCase());
+  };
+}
+
+/** Filter options and return a new options by the search text */
+export function filterOptions(
+  searchValue: string,
+  options: DataNode[],
+  {
+    optionFilterProp,
+    filterOption,
+  }: {
+    optionFilterProp: string;
+    filterOption: boolean | FilterFunc<LegacyDataNode>;
+  },
+): DataNode[] {
+  if (filterOption === false) {
+    return options;
+  }
+
+  let filterOptionFunc: FilterFunc<LegacyDataNode>;
+  if (typeof filterOption === 'function') {
+    filterOptionFunc = filterOption;
+  } else {
+    filterOptionFunc = getDefaultFilterOption(optionFilterProp);
+  }
+
+  function dig(list: DataNode[], keepAll = false) {
+    return list
+      .map(dataNode => {
+        const { children } = dataNode;
+
+        const match = keepAll || filterOptionFunc(searchValue, fillLegacyProps(dataNode));
+        const childList = dig(children || [], match);
+
+        if (match || childList.length) {
+          return {
+            ...dataNode,
+            children: childList,
+          };
+        }
+        return null;
+      })
+      .filter(node => node);
+  }
+
+  return dig(options);
+}
+
+export function getRawValueLabeled(
+  values: RawValueType[],
+  prevValue: DefaultValueType,
+  getEntityByValue: (
+    value: RawValueType,
+    skipType?: SkipType,
+    ignoreDisabledCheck?: boolean,
+  ) => FlattenDataNode,
+  getLabelProp: (entity: FlattenDataNode) => any,
+): LabelValueType[] {
+  const valueMap = new Map<RawValueType, LabelValueType>();
+
+  toArray(prevValue).forEach(item => {
+    if (item && typeof item === 'object' && 'value' in item) {
+      valueMap.set(item.value, item);
+    }
+  });
+
+  return values.map(val => {
+    const item: LabelValueType = { value: val };
+    const entity = getEntityByValue(val, 'select', true);
+    const label = entity ? getLabelProp(entity) : val;
+
+    if (valueMap.has(val)) {
+      const labeledValue = valueMap.get(val);
+      item.label = 'label' in labeledValue ? labeledValue.label : label;
+      if ('halfChecked' in labeledValue) {
+        item.halfChecked = labeledValue.halfChecked;
+      }
+    } else {
+      item.label = label;
+    }
+
+    return item;
+  });
+}
+
+export function addValue(rawValues: RawValueType[], value: RawValueType) {
+  const values = new Set(rawValues);
+  values.add(value);
+  return Array.from(values);
+}
+export function removeValue(rawValues: RawValueType[], value: RawValueType) {
+  const values = new Set(rawValues);
+  values.delete(value);
+  return Array.from(values);
+}
diff --git a/components/vc-tree-select/utils/warningPropsUtil.ts b/components/vc-tree-select/utils/warningPropsUtil.ts
new file mode 100644
index 000000000..2b58b8936
--- /dev/null
+++ b/components/vc-tree-select/utils/warningPropsUtil.ts
@@ -0,0 +1,34 @@
+import { warning } from '../../vc-util/warning';
+import { toArray } from './valueUtil';
+
+function warningProps(props: any) {
+  const { searchPlaceholder, treeCheckStrictly, treeCheckable, labelInValue, value, multiple } =
+    props;
+
+  warning(
+    !searchPlaceholder,
+    '`searchPlaceholder` has been removed, please use `placeholder` instead',
+  );
+
+  if (treeCheckStrictly && labelInValue === false) {
+    warning(false, '`treeCheckStrictly` will force set `labelInValue` to `true`.');
+  }
+
+  if (labelInValue || treeCheckStrictly) {
+    warning(
+      toArray(value).every(val => val && typeof val === 'object' && 'value' in val),
+      'Invalid prop `value` supplied to `TreeSelect`. You should use { label: string, value: string | number } or [{ label: string, value: string | number }] instead.',
+    );
+  }
+
+  if (treeCheckStrictly || multiple || treeCheckable) {
+    warning(
+      !value || Array.isArray(value),
+      '`value` should be an array when `TreeSelect` is checkable or multiple.',
+    );
+  } else {
+    warning(!Array.isArray(value), '`value` should not be array when `TreeSelect` is single mode.');
+  }
+}
+
+export default warningProps;
diff --git a/components/vc-tree/DropIndicator.tsx b/components/vc-tree/DropIndicator.tsx
new file mode 100644
index 000000000..df37c9c83
--- /dev/null
+++ b/components/vc-tree/DropIndicator.tsx
@@ -0,0 +1,34 @@
+import type { CSSProperties } from 'vue';
+
+export default function DropIndicator({
+  dropPosition,
+  dropLevelOffset,
+  indent,
+}: {
+  dropPosition: -1 | 0 | 1;
+  dropLevelOffset: number;
+  indent: number;
+}) {
+  const style: CSSProperties = {
+    pointerEvents: 'none',
+    position: 'absolute',
+    right: 0,
+    backgroundColor: 'red',
+    height: `${2}px`,
+  };
+  switch (dropPosition) {
+    case -1:
+      style.top = 0;
+      style.left = `${-dropLevelOffset * indent}px`;
+      break;
+    case 1:
+      style.bottom = 0;
+      style.left = `${-dropLevelOffset * indent}px`;
+      break;
+    case 0:
+      style.bottom = 0;
+      style.left = `${indent}`;
+      break;
+  }
+  return <div style={style} />;
+}
diff --git a/components/vc-tree/Indent.tsx b/components/vc-tree/Indent.tsx
new file mode 100644
index 000000000..de353cd89
--- /dev/null
+++ b/components/vc-tree/Indent.tsx
@@ -0,0 +1,31 @@
+interface IndentProps {
+  prefixCls: string;
+  level: number;
+  isStart: boolean[];
+  isEnd: boolean[];
+}
+
+const Indent = ({ prefixCls, level, isStart, isEnd }: IndentProps) => {
+  const baseClassName = `${prefixCls}-indent-unit`;
+  const list = [];
+  for (let i = 0; i < level; i += 1) {
+    list.push(
+      <span
+        key={i}
+        class={{
+          [baseClassName]: true,
+          [`${baseClassName}-start`]: isStart[i],
+          [`${baseClassName}-end`]: isEnd[i],
+        }}
+      />,
+    );
+  }
+
+  return (
+    <span aria-hidden="true" class={`${prefixCls}-indent`}>
+      {list}
+    </span>
+  );
+};
+
+export default Indent;
diff --git a/components/vc-tree/MotionTreeNode.tsx b/components/vc-tree/MotionTreeNode.tsx
new file mode 100644
index 000000000..3437c658f
--- /dev/null
+++ b/components/vc-tree/MotionTreeNode.tsx
@@ -0,0 +1,127 @@
+import TreeNode from './TreeNode';
+import type { FlattenNode } from './interface';
+import type { TreeNodeRequiredProps } from './utils/treeUtil';
+import { getTreeNodeProps } from './utils/treeUtil';
+import { useInjectTreeContext } from './contextTypes';
+import type { PropType } from 'vue';
+import { computed, nextTick } from 'vue';
+import { defineComponent, onBeforeUnmount, onMounted, ref, Transition, watch } from 'vue';
+import { treeNodeProps } from './props';
+import { collapseMotion } from '../_util/transition';
+
+export default defineComponent({
+  name: 'MotionTreeNode',
+  inheritAttrs: false,
+  props: {
+    ...treeNodeProps,
+    active: Boolean,
+    motion: Object,
+    motionNodes: { type: Array as PropType<FlattenNode[]> },
+    onMotionStart: Function,
+    onMotionEnd: Function,
+    motionType: String,
+    treeNodeRequiredProps: { type: Object as PropType<TreeNodeRequiredProps> },
+  },
+  slots: ['title', 'icon', 'switcherIcon', 'checkable'],
+  setup(props, { attrs, slots }) {
+    const visible = ref(true);
+    const context = useInjectTreeContext();
+    const motionedRef = ref(false);
+    const transitionClass = ref('');
+    const transitionStyle = ref({});
+    const transitionProps = computed(() => {
+      if (props.motion) {
+        return props.motion;
+      } else {
+        return collapseMotion(transitionStyle, transitionClass);
+      }
+    });
+    const onMotionEnd = (type?: 'appear' | 'leave') => {
+      if (type === 'appear') {
+        transitionProps.value?.onAfterAppear?.();
+      } else if (type === 'leave') {
+        transitionProps.value?.onAfterLeave?.();
+      }
+      if (!motionedRef.value) {
+        props.onMotionEnd();
+      }
+      motionedRef.value = true;
+    };
+
+    watch(
+      () => props.motionNodes,
+      () => {
+        if (props.motionNodes && props.motionType === 'hide' && visible.value) {
+          nextTick(() => {
+            visible.value = false;
+          });
+        }
+      },
+      { immediate: true, flush: 'post' },
+    );
+    onMounted(() => {
+      props.motionNodes && props.onMotionStart();
+    });
+    onBeforeUnmount(() => {
+      props.motionNodes && onMotionEnd();
+    });
+
+    return () => {
+      const { motion, motionNodes, motionType, active, treeNodeRequiredProps, ...otherProps } =
+        props;
+      if (motionNodes) {
+        return (
+          <Transition
+            {...transitionProps.value}
+            appear={motionType === 'show'}
+            onAfterAppear={() => onMotionEnd('appear')}
+            onAfterLeave={() => onMotionEnd('leave')}
+          >
+            <div
+              v-show={visible.value}
+              class={[`${context.value.prefixCls}-treenode-motion`, transitionClass.value]}
+              style={transitionStyle.value}
+            >
+              {motionNodes.map((treeNode: FlattenNode) => {
+                const {
+                  data: { ...restProps },
+                  title,
+                  key,
+                  isStart,
+                  isEnd,
+                } = treeNode;
+                delete restProps.children;
+
+                const treeNodeProps = getTreeNodeProps(key, treeNodeRequiredProps);
+
+                return (
+                  <TreeNode
+                    v-slots={slots}
+                    {...restProps}
+                    {...treeNodeProps}
+                    title={title}
+                    active={active}
+                    data={treeNode.data}
+                    key={key}
+                    isStart={isStart}
+                    isEnd={isEnd}
+                  />
+                );
+              })}
+            </div>
+          </Transition>
+        );
+      }
+      return (
+        <TreeNode
+          v-slots={slots}
+          domRef={ref}
+          class={attrs.class}
+          style={attrs.style}
+          {...otherProps}
+          active={active}
+        />
+      );
+    };
+  },
+});
diff --git a/components/vc-tree/NodeList.tsx b/components/vc-tree/NodeList.tsx
new file mode 100644
index 000000000..e17dbc3b5
--- /dev/null
+++ b/components/vc-tree/NodeList.tsx
@@ -0,0 +1,320 @@
+/**
+ * Handle virtual list of the TreeNodes.
+ */
+
+import { computed, defineComponent, ref, watch } from 'vue';
+import VirtualList from '../vc-virtual-list';
+import type { FlattenNode, DataEntity, DataNode, ScrollTo } from './interface';
+import MotionTreeNode from './MotionTreeNode';
+import { nodeListProps } from './props';
+import { findExpandedKeys, getExpandRange } from './utils/diffUtil';
+import { getTreeNodeProps, getKey } from './utils/treeUtil';
+
+const HIDDEN_STYLE = {
+  width: 0,
+  height: 0,
+  display: 'flex',
+  overflow: 'hidden',
+  opacity: 0,
+  border: 0,
+  padding: 0,
+  margin: 0,
+};
+
+const noop = () => {};
+
+export const MOTION_KEY = `RC_TREE_MOTION_${Math.random()}`;
+
+const MotionNode: DataNode = {
+  key: MOTION_KEY,
+};
+
+export const MotionEntity: DataEntity = {
+  key: MOTION_KEY,
+  level: 0,
+  index: 0,
+  pos: '0',
+  node: MotionNode,
+};
+
+const MotionFlattenData: FlattenNode = {
+  parent: null,
+  children: [],
+  pos: MotionEntity.pos,
+  data: MotionNode,
+  title: null,
+  key: MOTION_KEY,
+  /** Hold empty list here since we do not use it */
+  isStart: [],
+  isEnd: [],
+};
+
+export interface NodeListRef {
+  scrollTo: ScrollTo;
+  getIndentWidth: () => number;
+}
+
+/**
+ * We only need get visible content items to play the animation.
+ */
+export function getMinimumRangeTransitionRange(
+  list: FlattenNode[],
+  virtual: boolean,
+  height: number,
+  itemHeight: number,
+) {
+  if (virtual === false || !height) {
+    return list;
+  }
+
+  return list.slice(0, Math.ceil(height / itemHeight) + 1);
+}
+
+function itemKey(item: FlattenNode) {
+  const {
+    data: { key },
+    pos,
+  } = item;
+  return getKey(key, pos);
+}
+
+function getAccessibilityPath(item: FlattenNode): string {
+  let path = String(item.data.key);
+  let current = item;
+
+  while (current.parent) {
+    current = current.parent;
+    path = `${current.data.key} > ${path}`;
+  }
+
+  return path;
+}
+
+export default defineComponent({
+  name: 'NodeList',
+  inheritAttrs: false,
+  props: nodeListProps,
+  setup(props, { expose, attrs }) {
+    // =============================== Ref ================================
+    const listRef = ref();
+    const indentMeasurerRef = ref();
+    expose({
+      scrollTo: scroll => {
+        listRef.value.scrollTo(scroll);
+      },
+      getIndentWidth: () => indentMeasurerRef.value.offsetWidth,
+    });
+
+    // ============================== Motion ==============================
+    const transitionData = ref<FlattenNode[]>(props.data);
+    const transitionRange = ref([]);
+    const motionType = ref<'show' | 'hide' | null>(null);
+
+    function onMotionEnd() {
+      transitionData.value = props.data;
+      transitionRange.value = [];
+      motionType.value = null;
+
+      props.onListChangeEnd();
+    }
+    watch(
+      [() => [...props.expandedKeys], () => props.data],
+      ([expandedKeys, data], [prevExpandedKeys, prevData]) => {
+        const diffExpanded = findExpandedKeys(prevExpandedKeys, expandedKeys);
+
+        if (diffExpanded.key !== null) {
+          const { virtual, height, itemHeight } = props;
+          if (diffExpanded.add) {
+            const keyIndex = prevData.findIndex(({ data: { key } }) => key === diffExpanded.key);
+
+            const rangeNodes = getMinimumRangeTransitionRange(
+              getExpandRange(prevData, data, diffExpanded.key),
+              virtual,
+              height,
+              itemHeight,
+            );
+
+            const newTransitionData: FlattenNode[] = prevData.slice();
+            newTransitionData.splice(keyIndex + 1, 0, MotionFlattenData);
+
+            transitionData.value = newTransitionData;
+            transitionRange.value = rangeNodes;
+            motionType.value = 'show';
+          } else {
+            const keyIndex = data.findIndex(({ data: { key } }) => key === diffExpanded.key);
+
+            const rangeNodes = getMinimumRangeTransitionRange(
+              getExpandRange(data, prevData, diffExpanded.key),
+              virtual,
+              height,
+              itemHeight,
+            );
+
+            const newTransitionData: FlattenNode[] = data.slice();
+            newTransitionData.splice(keyIndex + 1, 0, MotionFlattenData);
+
+            transitionData.value = newTransitionData;
+            transitionRange.value = rangeNodes;
+            motionType.value = 'hide';
+          }
+        } else if (prevData !== data) {
+          transitionData.value = data;
+        }
+      },
+    );
+    // We should clean up motion if is changed by dragging
+    watch(
+      () => props.dragging,
+      dragging => {
+        if (!dragging) {
+          onMotionEnd();
+        }
+      },
+    );
+
+    const mergedData = computed(() =>
+      props.motion === undefined ? transitionData.value : props.data,
+    );
+
+    return () => {
+      const {
+        prefixCls,
+        data,
+        selectable,
+        checkable,
+        expandedKeys,
+        selectedKeys,
+        checkedKeys,
+        loadedKeys,
+        loadingKeys,
+        halfCheckedKeys,
+        keyEntities,
+        disabled,
+
+        dragging,
+        dragOverNodeKey,
+        dropPosition,
+        motion,
+
+        height,
+        itemHeight,
+        virtual,
+
+        focusable,
+        activeItem,
+        focused,
+        tabindex,
+
+        onKeydown,
+        onFocus,
+        onBlur,
+        onActiveChange,
+
+        onListChangeStart,
+        onListChangeEnd,
+
+        ...domProps
+      } = { ...props, ...attrs };
+
+      const treeNodeRequiredProps = {
+        expandedKeys,
+        selectedKeys,
+        loadedKeys,
+        loadingKeys,
+        checkedKeys,
+        halfCheckedKeys,
+        dragOverNodeKey,
+        dropPosition,
+        keyEntities,
+      };
+      return (
+        <>
+          {focused && activeItem && (
+            <span style={HIDDEN_STYLE} aria-live="assertive">
+              {getAccessibilityPath(activeItem)}
+            </span>
+          )}
+
+          <div>
+            <input
+              style={HIDDEN_STYLE}
+              disabled={focusable === false || disabled}
+              tabindex={focusable !== false ? tabindex : null}
+              onKeydown={onKeydown}
+              onFocus={onFocus}
+              onBlur={onBlur}
+              value=""
+              onChange={noop}
+              aria-label="for screen reader"
+            />
+          </div>
+
+          <div
+            class={`${prefixCls}-treenode`}
+            aria-hidden
+            style={{
+              position: 'absolute',
+              pointerEvents: 'none',
+              visibility: 'hidden',
+              height: 0,
+              overflow: 'hidden',
+            }}
+          >
+            <div class={`${prefixCls}-indent`}>
+              <div ref={indentMeasurerRef} class={`${prefixCls}-indent-unit`} />
+            </div>
+          </div>
+
+          <VirtualList
+            {...domProps}
+            data={mergedData.value}
+            itemKey={itemKey as any}
+            height={height}
+            fullHeight={false}
+            virtual={virtual}
+            itemHeight={itemHeight}
+            prefixCls={`${prefixCls}-list`}
+            ref={listRef}
+            children={(treeNode: FlattenNode) => {
+              const {
+                pos,
+                data: { ...restProps },
+                title,
+                key,
+                isStart,
+                isEnd,
+              } = treeNode;
+              const mergedKey = getKey(key, pos);
+              delete restProps.key;
+              delete restProps.children;
+
+              const treeNodeProps = getTreeNodeProps(mergedKey, treeNodeRequiredProps);
+
+              return (
+                <MotionTreeNode
+                  {...restProps}
+                  {...treeNodeProps}
+                  title={title}
+                  active={!!activeItem && key === activeItem.data.key}
+                  pos={pos}
+                  data={treeNode.data}
+                  isStart={isStart}
+                  isEnd={isEnd}
+                  motion={motion}
+                  motionNodes={key === MOTION_KEY ? transitionRange.value : null}
+                  motionType={motionType.value}
+                  onMotionStart={onListChangeStart}
+                  onMotionEnd={onMotionEnd}
+                  treeNodeRequiredProps={treeNodeRequiredProps}
+                  onMousemove={() => {
+                    onActiveChange(null);
+                  }}
+                />
+              );
+            }}
+          ></VirtualList>
+        </>
+      );
+    };
+  },
+});
diff --git a/components/vc-tree/Tree.tsx b/components/vc-tree/Tree.tsx
new file mode 100644
index 000000000..d8a222aad
--- /dev/null
+++ b/components/vc-tree/Tree.tsx
@@ -0,0 +1,1079 @@
+import type { NodeMouseEventHandler, NodeDragEventHandler } from './contextTypes';
+import { TreeContext } from './contextTypes';
+import {
+  getDataAndAria,
+  getDragChildrenKeys,
+  parseCheckedKeys,
+  conductExpandParent,
+  calcSelectedKeys,
+  calcDropPosition,
+  arrAdd,
+  arrDel,
+  posToArr,
+} from './util';
+import type { Key, FlattenNode, EventDataNode, ScrollTo, DragNodeEvent } from './interface';
+import {
+  flattenTreeData,
+  convertTreeToData,
+  convertDataToEntities,
+  convertNodePropsToEventData,
+  getTreeNodeProps,
+  fillFieldNames,
+} from './utils/treeUtil';
+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 initDefaultProps from '../_util/props-util/initDefaultProps';
+import type { CheckInfo } from './props';
+import { treeProps } from './props';
+import { warning } from '../vc-util/warning';
+import KeyCode from '../_util/KeyCode';
+import classNames from '../_util/classNames';
+
+export default defineComponent({
+  name: 'Tree',
+  inheritAttrs: false,
+  slots: ['checkable', 'title', 'icon', 'titleRender'],
+  props: initDefaultProps(treeProps(), {
+    prefixCls: 'vc-tree',
+    showLine: false,
+    showIcon: true,
+    selectable: true,
+    multiple: false,
+    checkable: false,
+    disabled: false,
+    checkStrictly: false,
+    draggable: false,
+    defaultExpandParent: true,
+    autoExpandParent: false,
+    defaultExpandAll: false,
+    defaultExpandedKeys: [],
+    defaultCheckedKeys: [],
+    defaultSelectedKeys: [],
+    dropIndicatorRender: DropIndicator,
+    allowDrop: () => true,
+  }),
+
+  setup(props, { attrs, slots, expose }) {
+    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 dragState = reactive({
+      dragging: false,
+      dragChildrenKeys: [],
+
+      // dropTargetKey is the key of abstract-drop-node
+      // the abstract-drop-node is the real drop node when drag and drop
+      // not the DOM drag over node
+      dropTargetKey: null,
+      dropPosition: null, // the drop position of abstract-drop-node, inside 0, top -1, bottom 1
+      dropContainerKey: null, // the container key of abstract-drop-node if dropPosition is -1 or 1
+      dropLevelOffset: null, // the drop level offset of abstract-drag-over-node
+      dropTargetPos: null, // the pos of abstract-drop-node
+      dropAllowed: true, // if drop to abstract-drop-node is allowed
+      // the abstract-drag-over-node
+      // if mouse is on the bottom of top dom node or no the top of the bottom dom node
+      // abstract-drag-over-node is the top node
+      dragOverNodeKey: null,
+    });
+    const treeData = computed(() => {
+      return props.treeData !== undefined ? props.treeData : convertTreeToData(props.children);
+    });
+    const keyEntities = ref({});
+
+    const focused = ref(false);
+    const activeKey = ref<Key>(null);
+
+    const listChanging = ref(false);
+
+    const fieldNames = computed(() => fillFieldNames(props.fieldNames));
+
+    const listRef = ref();
+
+    let dragStartMousePosition = null;
+
+    let dragNode: DragNodeEvent = null;
+
+    const treeNodeRequiredProps = computed(() => {
+      return {
+        expandedKeys: expandedKeys.value || [],
+        selectedKeys: selectedKeys.value || [],
+        loadedKeys: loadedKeys.value || [],
+        loadingKeys: loadingKeys.value || [],
+        checkedKeys: checkedKeys.value || [],
+        halfCheckedKeys: halfCheckedKeys.value || [],
+        dragOverNodeKey: dragState.dragOverNodeKey,
+        dropPosition: dragState.dropPosition,
+        keyEntities: keyEntities.value,
+      };
+    });
+
+    watchEffect(() => {
+      if (treeData.value) {
+        const entitiesMap = convertDataToEntities(treeData.value, { fieldNames: fieldNames.value });
+        keyEntities.value = {
+          [MOTION_KEY]: MotionEntity,
+          ...entitiesMap.keyEntities,
+        };
+      }
+    });
+    let init = false; // 处理 defaultXxxx api, 仅仅首次有效
+
+    onMounted(() => {
+      init = true;
+    });
+
+    // ================ expandedKeys =================
+    watchEffect(() => {
+      let keys = expandedKeys.value;
+      // ================ expandedKeys =================
+      if (props.expandedKeys !== undefined || (init && props.autoExpandParent)) {
+        keys =
+          props.autoExpandParent || (!init && props.defaultExpandParent)
+            ? conductExpandParent(props.expandedKeys, keyEntities.value)
+            : props.expandedKeys;
+      } else if (!init && props.defaultExpandAll) {
+        const cloneKeyEntities = { ...keyEntities.value };
+        delete cloneKeyEntities[MOTION_KEY];
+        keys = Object.keys(cloneKeyEntities).map(key => cloneKeyEntities[key].key);
+      } else if (!init && props.defaultExpandedKeys) {
+        keys =
+          props.autoExpandParent || props.defaultExpandParent
+            ? conductExpandParent(props.defaultExpandedKeys, keyEntities.value)
+            : props.defaultExpandedKeys;
+      }
+
+      if (keys) {
+        expandedKeys.value = keys;
+      }
+    });
+
+    // ================ flattenNodes =================
+    const flattenNodes = computed(() => {
+      return flattenTreeData(treeData.value, expandedKeys.value, fieldNames.value);
+    });
+
+    // ================ selectedKeys =================
+    watchEffect(() => {
+      if (props.selectable) {
+        if (props.selectedKeys !== undefined) {
+          selectedKeys.value = calcSelectedKeys(props.selectedKeys, props);
+        } else if (!init && props.defaultSelectedKeys) {
+          selectedKeys.value = calcSelectedKeys(props.defaultSelectedKeys, props);
+        }
+      }
+    });
+
+    // ================= checkedKeys =================
+    watchEffect(() => {
+      if (props.checkable) {
+        let checkedKeyEntity;
+
+        if (props.checkedKeys !== undefined) {
+          checkedKeyEntity = parseCheckedKeys(props.checkedKeys) || {};
+        } else if (!init && props.defaultCheckedKeys) {
+          checkedKeyEntity = parseCheckedKeys(props.defaultCheckedKeys) || {};
+        } else if (treeData.value) {
+          // If `treeData` changed, we also need check it
+          checkedKeyEntity = parseCheckedKeys(props.checkedKeys) || {
+            checkedKeys: checkedKeys.value,
+            halfCheckedKeys: halfCheckedKeys.value,
+          };
+        }
+
+        if (checkedKeyEntity) {
+          let { checkedKeys: newCheckedKeys = [], halfCheckedKeys: newHalfCheckedKeys = [] } =
+            checkedKeyEntity;
+
+          if (!props.checkStrictly) {
+            const conductKeys = conductCheck(newCheckedKeys, true, keyEntities.value);
+            ({ checkedKeys: newCheckedKeys, halfCheckedKeys: newHalfCheckedKeys } = conductKeys);
+          }
+
+          checkedKeys.value = newCheckedKeys;
+          halfCheckedKeys.value = newHalfCheckedKeys;
+        }
+      }
+    });
+
+    // ================= loadedKeys ==================
+    watchEffect(() => {
+      if (props.loadedKeys) {
+        loadedKeys.value = props.loadedKeys;
+      }
+    });
+
+    const scrollTo: ScrollTo = scroll => {
+      listRef.value.scrollTo(scroll);
+    };
+    // =========================== Expanded ===========================
+    /** Set uncontrolled `expandedKeys`. This will also auto update `flattenNodes`. */
+    const setExpandedKeys = (keys: Key[]) => {
+      if (props.expandedKeys === undefined) {
+        expandedKeys.value = keys;
+      }
+    };
+
+    const cleanDragState = () => {
+      if (dragState.dragging) {
+        Object.assign(dragState, {
+          dragging: false,
+          dropPosition: null,
+          dropContainerKey: null,
+          dropTargetKey: null,
+          dropLevelOffset: null,
+          dropAllowed: true,
+          dragOverNodeKey: null,
+        });
+      }
+      dragStartMousePosition = null;
+    };
+    // if onNodeDragEnd is called, onWindowDragEnd won't be called since stopPropagation() is called
+    const onNodeDragEnd: NodeDragEventHandler = (event, node, outsideTree = false) => {
+      const { onDragend } = props;
+
+      dragState.dragOverNodeKey = null;
+
+      cleanDragState();
+
+      if (onDragend && !outsideTree) {
+        onDragend({ event, node: node.eventData });
+      }
+
+      dragNode = null;
+    };
+
+    // since stopPropagation() is called in treeNode
+    // if onWindowDrag is called, whice means state is keeped, drag state should be cleared
+    const onWindowDragEnd = event => {
+      onNodeDragEnd(event, null, true);
+      window.removeEventListener('dragend', onWindowDragEnd);
+    };
+
+    const onNodeDragStart: NodeDragEventHandler = (event, node) => {
+      const { onDragstart } = props;
+      const { eventKey, eventData } = node;
+      dragNode = node;
+      dragStartMousePosition = {
+        x: event.clientX,
+        y: event.clientY,
+      };
+
+      const newExpandedKeys = arrDel(expandedKeys.value, eventKey);
+
+      dragState.dragging = true;
+      dragState.dragChildrenKeys = getDragChildrenKeys(eventKey, keyEntities.value);
+      indent.value = listRef.value.getIndentWidth();
+
+      setExpandedKeys(newExpandedKeys);
+      window.addEventListener('dragend', onWindowDragEnd);
+
+      if (onDragstart) {
+        onDragstart({ event, node: eventData });
+      }
+    };
+
+    /**
+     * [Legacy] Select handler is smaller than node,
+     * so that this will trigger when drag enter node or select handler.
+     * This is a little tricky if customize css without padding.
+     * Better for use mouse move event to refresh drag state.
+     * But let's just keep it to avoid event trigger logic change.
+     */
+    const onNodeDragEnter = (event: MouseEvent, node: DragNodeEvent) => {
+      const { onDragenter, onExpand, allowDrop, direction } = props;
+
+      const {
+        dropPosition,
+        dropLevelOffset,
+        dropTargetKey,
+        dropContainerKey,
+        dropTargetPos,
+        dropAllowed,
+        dragOverNodeKey,
+      } = calcDropPosition(
+        event,
+        dragNode,
+        node,
+        indent.value,
+        dragStartMousePosition,
+        allowDrop,
+        flattenNodes.value,
+        keyEntities.value,
+        expandedKeys.value,
+        direction,
+      );
+
+      if (
+        !dragNode ||
+        // don't allow drop inside its children
+        dragState.dragChildrenKeys.indexOf(dropTargetKey) !== -1 ||
+        // don't allow drop when drop is not allowed caculated by calcDropPosition
+        !dropAllowed
+      ) {
+        Object.assign(dragState, {
+          dragOverNodeKey: null,
+          dropPosition: null,
+          dropLevelOffset: null,
+          dropTargetKey: null,
+          dropContainerKey: null,
+          dropTargetPos: null,
+          dropAllowed: false,
+        });
+        return;
+      }
+
+      // Side effect for delay drag
+      if (!delayedDragEnterLogic) {
+        delayedDragEnterLogic = {};
+      }
+      Object.keys(delayedDragEnterLogic).forEach(key => {
+        clearTimeout(delayedDragEnterLogic[key]);
+      });
+
+      if (dragNode.eventKey !== node.eventKey) {
+        // hoist expand logic here
+        // since if logic is on the bottom
+        // it will be blocked by abstract dragover node check
+        //   => if you dragenter from top, you mouse will still be consider as in the top node
+        delayedDragEnterLogic[node.pos] = window.setTimeout(() => {
+          if (!dragState.dragging) return;
+
+          let newExpandedKeys = [...expandedKeys.value];
+          const entity = keyEntities.value[node.eventKey];
+
+          if (entity && (entity.children || []).length) {
+            newExpandedKeys = arrAdd(expandedKeys.value, node.eventKey);
+          }
+          setExpandedKeys(newExpandedKeys);
+
+          if (onExpand) {
+            onExpand(newExpandedKeys, {
+              node: node.eventData,
+              expanded: true,
+              nativeEvent: event,
+            });
+          }
+        }, 800);
+      }
+
+      // Skip if drag node is self
+      if (dragNode.eventKey === dropTargetKey && dropLevelOffset === 0) {
+        Object.assign(dragState, {
+          dragOverNodeKey: null,
+          dropPosition: null,
+          dropLevelOffset: null,
+          dropTargetKey: null,
+          dropContainerKey: null,
+          dropTargetPos: null,
+          dropAllowed: false,
+        });
+        return;
+      }
+
+      // Update drag over node and drag state
+      Object.assign(dragState, {
+        dragOverNodeKey,
+        dropPosition,
+        dropLevelOffset,
+        dropTargetKey,
+        dropContainerKey,
+        dropTargetPos,
+        dropAllowed,
+      });
+
+      if (onDragenter) {
+        onDragenter({
+          event,
+          node: node.eventData,
+          expandedKeys: expandedKeys.value,
+        });
+      }
+    };
+
+    const onNodeDragOver = (event: MouseEvent, node: DragNodeEvent) => {
+      const { onDragover, allowDrop, direction } = props;
+
+      const {
+        dropPosition,
+        dropLevelOffset,
+        dropTargetKey,
+        dropContainerKey,
+        dropAllowed,
+        dropTargetPos,
+        dragOverNodeKey,
+      } = calcDropPosition(
+        event,
+        dragNode,
+        node,
+        indent.value,
+        dragStartMousePosition,
+        allowDrop,
+        flattenNodes.value,
+        keyEntities.value,
+        expandedKeys.value,
+        direction,
+      );
+
+      if (!dragNode || dragState.dragChildrenKeys.indexOf(dropTargetKey) !== -1 || !dropAllowed) {
+        // don't allow drop inside its children
+        // don't allow drop when drop is not allowed caculated by calcDropPosition
+        return;
+      }
+
+      // Update drag position
+
+      if (dragNode.eventKey === dropTargetKey && dropLevelOffset === 0) {
+        if (
+          !(
+            dragState.dropPosition === null &&
+            dragState.dropLevelOffset === null &&
+            dragState.dropTargetKey === null &&
+            dragState.dropContainerKey === null &&
+            dragState.dropTargetPos === null &&
+            dragState.dropAllowed === false &&
+            dragState.dragOverNodeKey === null
+          )
+        ) {
+          Object.assign(dragState, {
+            dropPosition: null,
+            dropLevelOffset: null,
+            dropTargetKey: null,
+            dropContainerKey: null,
+            dropTargetPos: null,
+            dropAllowed: false,
+            dragOverNodeKey: null,
+          });
+        }
+      } else if (
+        !(
+          dropPosition === dragState.dropPosition &&
+          dropLevelOffset === dragState.dropLevelOffset &&
+          dropTargetKey === dragState.dropTargetKey &&
+          dropContainerKey === dragState.dropContainerKey &&
+          dropTargetPos === dragState.dropTargetPos &&
+          dropAllowed === dragState.dropAllowed &&
+          dragOverNodeKey === dragState.dragOverNodeKey
+        )
+      ) {
+        Object.assign(dragState, {
+          dropPosition,
+          dropLevelOffset,
+          dropTargetKey,
+          dropContainerKey,
+          dropTargetPos,
+          dropAllowed,
+          dragOverNodeKey,
+        });
+      }
+
+      if (onDragover) {
+        onDragover({ event, node: node.eventData });
+      }
+    };
+
+    const onNodeDragLeave: NodeDragEventHandler = (event, node) => {
+      const { onDragleave } = props;
+
+      if (onDragleave) {
+        onDragleave({ event, node: node.eventData });
+      }
+    };
+    const onNodeDrop = (event: MouseEvent, _node, outsideTree = false) => {
+      const { dragChildrenKeys, dropPosition, dropTargetKey, dropTargetPos, dropAllowed } =
+        dragState;
+
+      if (!dropAllowed) return;
+
+      const { onDrop } = props;
+
+      dragState.dragOverNodeKey = null;
+      cleanDragState();
+
+      if (dropTargetKey === null) return;
+
+      const abstractDropNodeProps = {
+        ...getTreeNodeProps(dropTargetKey, treeNodeRequiredProps.value),
+        active: activeItem.value?.data.key === dropTargetKey,
+        data: keyEntities.value[dropTargetKey].node,
+      };
+      const dropToChild = dragChildrenKeys.indexOf(dropTargetKey) !== -1;
+
+      warning(
+        !dropToChild,
+        "Can not drop to dragNode's children node. Maybe this is a bug of ant-design-vue. Please report an issue.",
+      );
+
+      const posArr = posToArr(dropTargetPos);
+
+      const dropResult = {
+        event,
+        node: convertNodePropsToEventData(abstractDropNodeProps),
+        dragNode: dragNode ? dragNode.eventData : null,
+        dragNodesKeys: [dragNode.eventKey].concat(dragChildrenKeys),
+        dropToGap: dropPosition !== 0,
+        dropPosition: dropPosition + Number(posArr[posArr.length - 1]),
+      };
+
+      if (onDrop && !outsideTree) {
+        onDrop(dropResult);
+      }
+
+      dragNode = null;
+    };
+
+    const onNodeClick: NodeMouseEventHandler = (e, treeNode) => {
+      const { onClick } = props;
+      if (onClick) {
+        onClick(e, treeNode);
+      }
+    };
+
+    const onNodeDoubleClick: NodeMouseEventHandler = (e, treeNode) => {
+      const { onDblclick } = props;
+      if (onDblclick) {
+        onDblclick(e, treeNode);
+      }
+    };
+
+    const onNodeSelect: NodeMouseEventHandler = (e, treeNode) => {
+      let newSelectedKeys = selectedKeys.value;
+      const { onSelect, multiple } = props;
+      const { selected } = treeNode;
+      const key = treeNode[fieldNames.value.key];
+      const targetSelected = !selected;
+
+      // Update selected keys
+      if (!targetSelected) {
+        newSelectedKeys = arrDel(newSelectedKeys, key);
+      } else if (!multiple) {
+        newSelectedKeys = [key];
+      } else {
+        newSelectedKeys = arrAdd(newSelectedKeys, key);
+      }
+
+      // [Legacy] Not found related usage in doc or upper libs
+      const keyEntitiesValue = keyEntities.value;
+      const selectedNodes = newSelectedKeys
+        .map(selectedKey => {
+          const entity = keyEntitiesValue[selectedKey];
+          if (!entity) return null;
+
+          return entity.node;
+        })
+        .filter(node => node);
+
+      if (props.selectedKeys === undefined) {
+        selectedKeys.value = newSelectedKeys;
+      }
+
+      if (onSelect) {
+        onSelect(newSelectedKeys, {
+          event: 'select',
+          selected: targetSelected,
+          node: treeNode,
+          selectedNodes,
+          nativeEvent: e,
+        });
+      }
+    };
+
+    const onNodeCheck = (e: MouseEvent, treeNode: EventDataNode, checked: boolean) => {
+      const { checkStrictly, onCheck } = props;
+      const { key } = treeNode;
+
+      // Prepare trigger arguments
+      let checkedObj;
+      const eventObj: Partial<CheckInfo> = {
+        event: 'check',
+        node: treeNode,
+        checked,
+        nativeEvent: e,
+      };
+
+      if (checkStrictly) {
+        const newCheckedKeys = checked
+          ? arrAdd(checkedKeys.value, key)
+          : arrDel(checkedKeys.value, key);
+        const newHalfCheckedKeys = arrDel(halfCheckedKeys.value, key);
+        checkedObj = { checked: newCheckedKeys, halfChecked: newHalfCheckedKeys };
+
+        const keyEntitiesValue = keyEntities.value;
+        eventObj.checkedNodes = newCheckedKeys
+          .map(checkedKey => keyEntitiesValue[checkedKey])
+          .filter(entity => entity)
+          .map(entity => entity.node);
+
+        if (props.checkedKeys === undefined) {
+          checkedKeys.value = newCheckedKeys;
+        }
+      } else {
+        // Always fill first
+        let { checkedKeys: newCheckedKeys, halfCheckedKeys: newHalfCheckedKeys } = conductCheck(
+          [...checkedKeys.value, key],
+          true,
+          keyEntities.value,
+        );
+
+        // If remove, we do it again to correction
+        if (!checked) {
+          const keySet = new Set(newCheckedKeys);
+          keySet.delete(key);
+          ({ checkedKeys: newCheckedKeys, halfCheckedKeys: newHalfCheckedKeys } = conductCheck(
+            Array.from(keySet),
+            { checked: false, halfCheckedKeys: newHalfCheckedKeys },
+            keyEntities.value,
+          ));
+        }
+
+        checkedObj = newCheckedKeys;
+
+        // [Legacy] This is used for vc-tree-select`
+        eventObj.checkedNodes = [];
+        eventObj.checkedNodesPositions = [];
+        eventObj.halfCheckedKeys = newHalfCheckedKeys;
+        newCheckedKeys.forEach(checkedKey => {
+          const entity = keyEntities.value[checkedKey];
+          if (!entity) return;
+
+          const { node, pos } = entity;
+          eventObj.checkedNodes.push(node);
+          eventObj.checkedNodesPositions.push({ node, pos });
+        });
+        if (props.checkedKeys === undefined) {
+          checkedKeys.value = newCheckedKeys;
+          halfCheckedKeys.value = newHalfCheckedKeys;
+        }
+      }
+
+      if (onCheck) {
+        onCheck(checkedObj, eventObj as CheckInfo);
+      }
+    };
+
+    const onNodeLoad = (treeNode: EventDataNode) =>
+      new Promise<void>((resolve, reject) => {
+        // We need to get the latest state of loading/loaded keys
+        const { loadData, onLoad } = props;
+        const { key } = treeNode;
+
+        if (
+          !loadData ||
+          loadedKeys.value.indexOf(key) !== -1 ||
+          loadingKeys.value.indexOf(key) !== -1
+        ) {
+          return null;
+        }
+
+        // Process load data
+        const promise = loadData(treeNode);
+        promise
+          .then(() => {
+            const newLoadedKeys = arrAdd(loadedKeys.value, key);
+            const newLoadingKeys = arrDel(loadingKeys.value, key);
+
+            // onLoad should trigger before internal setState to avoid `loadData` trigger twice.
+            // https://github.com/ant-design/ant-design/issues/12464
+            if (onLoad) {
+              onLoad(newLoadedKeys, {
+                event: 'load',
+                node: treeNode,
+              });
+            }
+
+            if (props.loadedKeys === undefined) {
+              loadedKeys.value = newLoadedKeys;
+            }
+            loadingKeys.value = newLoadingKeys;
+            resolve();
+          })
+          .catch(e => {
+            const newLoadingKeys = arrDel(loadingKeys.value, key);
+            loadingKeys.value = newLoadingKeys;
+            reject(e);
+          });
+
+        loadingKeys.value = arrAdd(loadingKeys.value, key);
+      });
+
+    const onNodeMouseEnter: NodeMouseEventHandler = (event, node) => {
+      const { onMouseenter } = props;
+      if (onMouseenter) {
+        onMouseenter({ event, node });
+      }
+    };
+
+    const onNodeMouseLeave: NodeMouseEventHandler = (event, node) => {
+      const { onMouseleave } = props;
+      if (onMouseleave) {
+        onMouseleave({ event, node });
+      }
+    };
+
+    const onNodeContextMenu: NodeMouseEventHandler = (event, node) => {
+      const { onRightClick } = props;
+      if (onRightClick) {
+        event.preventDefault();
+        onRightClick({ event, node });
+      }
+    };
+
+    const onFocus = (e: FocusEvent) => {
+      const { onFocus } = props;
+      focused.value = true;
+      if (onFocus) {
+        onFocus(e);
+      }
+    };
+
+    const onBlur = (e: FocusEvent) => {
+      const { onBlur } = props;
+      focused.value = false;
+      onActiveChange(null);
+
+      if (onBlur) {
+        onBlur(e);
+      }
+    };
+
+    const onNodeExpand = (e: MouseEvent, treeNode: EventDataNode) => {
+      let newExpandedKeys = expandedKeys.value;
+      const { onExpand, loadData } = props;
+      const { expanded } = treeNode;
+      const key = treeNode[fieldNames.value.key];
+
+      // Do nothing when motion is in progress
+      if (listChanging.value) {
+        return;
+      }
+
+      // Update selected keys
+      const index = newExpandedKeys.indexOf(key);
+      const targetExpanded = !expanded;
+
+      warning(
+        (expanded && index !== -1) || (!expanded && index === -1),
+        'Expand state not sync with index check',
+      );
+
+      if (targetExpanded) {
+        newExpandedKeys = arrAdd(newExpandedKeys, key);
+      } else {
+        newExpandedKeys = arrDel(newExpandedKeys, key);
+      }
+
+      setExpandedKeys(newExpandedKeys);
+
+      if (onExpand) {
+        onExpand(newExpandedKeys, {
+          node: treeNode,
+          expanded: targetExpanded,
+          nativeEvent: e,
+        });
+      }
+
+      // Async Load data
+      if (targetExpanded && loadData) {
+        const loadPromise = onNodeLoad(treeNode);
+        if (loadPromise) {
+          loadPromise
+            .then(() => {
+              // [Legacy] Refresh logic
+              // const newFlattenTreeData = flattenTreeData(
+              //   treeData.value,
+              //   newExpandedKeys,
+              //   fieldNames.value,
+              // );
+              // flattenNodes.value = newFlattenTreeData;
+            })
+            .catch(e => {
+              const expandedKeysToRestore = arrDel(expandedKeys.value, key);
+              setExpandedKeys(expandedKeysToRestore);
+              Promise.reject(e);
+            });
+        }
+      }
+    };
+
+    const onListChangeStart = () => {
+      listChanging.value = true;
+    };
+
+    const onListChangeEnd = () => {
+      setTimeout(() => {
+        listChanging.value = false;
+      });
+    };
+
+    // =========================== Keyboard ===========================
+    const onActiveChange = (newActiveKey: Key) => {
+      const { onActiveChange } = props;
+
+      if (activeKey.value === newActiveKey) {
+        return;
+      }
+
+      activeKey.value = newActiveKey;
+      if (newActiveKey !== null) {
+        scrollTo({ key: newActiveKey });
+      }
+
+      if (onActiveChange) {
+        onActiveChange(newActiveKey);
+      }
+    };
+
+    const activeItem = computed<FlattenNode>(() => {
+      if (activeKey.value === null) {
+        return null;
+      }
+
+      return flattenNodes.value.find(({ data: { key } }) => key === activeKey.value) || null;
+    });
+
+    const offsetActiveKey = (offset: number) => {
+      let index = flattenNodes.value.findIndex(({ data: { key } }) => key === activeKey.value);
+
+      // Align with index
+      if (index === -1 && offset < 0) {
+        index = flattenNodes.value.length;
+      }
+
+      index = (index + offset + flattenNodes.value.length) % flattenNodes.value.length;
+
+      const item = flattenNodes.value[index];
+      if (item) {
+        const { key } = item.data;
+        onActiveChange(key);
+      } else {
+        onActiveChange(null);
+      }
+    };
+    const activeItemEventNode = computed(() => {
+      return convertNodePropsToEventData({
+        ...getTreeNodeProps(activeKey.value, treeNodeRequiredProps.value),
+        data: activeItem.value.data,
+        active: true,
+      });
+    });
+    const onKeydown = event => {
+      const { onKeydown, checkable, selectable } = props;
+
+      // >>>>>>>>>> Direction
+      switch (event.which) {
+        case KeyCode.UP: {
+          offsetActiveKey(-1);
+          event.preventDefault();
+          break;
+        }
+        case KeyCode.DOWN: {
+          offsetActiveKey(1);
+          event.preventDefault();
+          break;
+        }
+      }
+
+      // >>>>>>>>>> Expand & Selection
+      const item = activeItem.value;
+      if (item && item.data) {
+        const expandable = item.data.isLeaf === false || !!(item.data.children || []).length;
+        const eventNode = activeItemEventNode.value;
+
+        switch (event.which) {
+          // >>> Expand
+          case KeyCode.LEFT: {
+            // Collapse if possible
+            if (expandable && expandedKeys.value.includes(activeKey.value)) {
+              onNodeExpand({} as MouseEvent, eventNode);
+            } else if (item.parent) {
+              onActiveChange(item.parent.data.key);
+            }
+            event.preventDefault();
+            break;
+          }
+          case KeyCode.RIGHT: {
+            // Expand if possible
+            if (expandable && !expandedKeys.value.includes(activeKey.value)) {
+              onNodeExpand({} as MouseEvent, eventNode);
+            } else if (item.children && item.children.length) {
+              onActiveChange(item.children[0].data.key);
+            }
+            event.preventDefault();
+            break;
+          }
+
+          // Selection
+          case KeyCode.ENTER:
+          case KeyCode.SPACE: {
+            if (
+              checkable &&
+              !eventNode.disabled &&
+              eventNode.checkable !== false &&
+              !eventNode.disableCheckbox
+            ) {
+              onNodeCheck(
+                {} as MouseEvent,
+                eventNode,
+                !checkedKeys.value.includes(activeKey.value),
+              );
+            } else if (
+              !checkable &&
+              selectable &&
+              !eventNode.disabled &&
+              eventNode.selectable !== false
+            ) {
+              onNodeSelect({} as MouseEvent, eventNode);
+            }
+            break;
+          }
+        }
+      }
+
+      if (onKeydown) {
+        onKeydown(event);
+      }
+    };
+    expose({
+      onNodeExpand,
+      scrollTo,
+      onKeydown,
+    });
+    onUnmounted(() => {
+      window.removeEventListener('dragend', onWindowDragEnd);
+      destroyed.value = true;
+    });
+    return () => {
+      const {
+        // focused,
+        // flattenNodes,
+        // keyEntities,
+        dragging,
+        // activeKey,
+        dropLevelOffset,
+        dropContainerKey,
+        dropTargetKey,
+        dropPosition,
+        dragOverNodeKey,
+        // indent,
+      } = dragState;
+      const {
+        prefixCls,
+        showLine,
+        focusable,
+        tabindex = 0,
+        selectable,
+        showIcon,
+        icon = slots.icon,
+        switcherIcon,
+        draggable,
+        checkable,
+        checkStrictly,
+        disabled,
+        motion,
+        loadData,
+        filterTreeNode,
+        height,
+        itemHeight,
+        virtual,
+        dropIndicatorRender,
+        onContextmenu,
+        onScroll,
+        direction,
+      } = props;
+
+      const { class: className, style } = attrs;
+      const domProps = getDataAndAria({ ...props, ...attrs });
+      return (
+        <TreeContext
+          value={{
+            prefixCls,
+            selectable,
+            showIcon,
+            icon,
+            switcherIcon,
+            draggable,
+            checkable,
+            customCheckable: slots.checkable,
+            checkStrictly,
+            disabled,
+            keyEntities: keyEntities.value,
+            dropLevelOffset,
+            dropContainerKey,
+            dropTargetKey,
+            dropPosition,
+            dragOverNodeKey,
+            indent: indent.value,
+            direction,
+            dropIndicatorRender,
+
+            loadData,
+            filterTreeNode,
+
+            onNodeClick,
+            onNodeDoubleClick,
+            onNodeExpand,
+            onNodeSelect,
+            onNodeCheck,
+            onNodeLoad,
+            onNodeMouseEnter,
+            onNodeMouseLeave,
+            onNodeContextMenu,
+            onNodeDragStart,
+            onNodeDragEnter,
+            onNodeDragOver,
+            onNodeDragLeave,
+            onNodeDragEnd,
+            onNodeDrop,
+            slots,
+          }}
+        >
+          <div
+            role="tree"
+            class={classNames(prefixCls, className, {
+              [`${prefixCls}-show-line`]: showLine,
+              [`${prefixCls}-focused`]: focused.value,
+              [`${prefixCls}-active-focused`]: activeKey.value !== null,
+            })}
+          >
+            <NodeList
+              ref={listRef}
+              prefixCls={prefixCls}
+              style={style}
+              data={flattenNodes.value}
+              disabled={disabled}
+              selectable={selectable}
+              checkable={!!checkable}
+              motion={motion}
+              dragging={dragging}
+              height={height}
+              itemHeight={itemHeight}
+              virtual={virtual}
+              focusable={focusable}
+              focused={focused.value}
+              tabindex={tabindex}
+              activeItem={activeItem.value}
+              onFocus={onFocus}
+              onBlur={onBlur}
+              onKeydown={onKeydown}
+              onActiveChange={onActiveChange}
+              onListChangeStart={onListChangeStart}
+              onListChangeEnd={onListChangeEnd}
+              onContextmenu={onContextmenu}
+              onScroll={onScroll}
+              {...treeNodeRequiredProps.value}
+              {...domProps}
+            />
+          </div>
+        </TreeContext>
+      );
+    };
+  },
+});
diff --git a/components/vc-tree/TreeNode.tsx b/components/vc-tree/TreeNode.tsx
new file mode 100644
index 000000000..0b977724b
--- /dev/null
+++ b/components/vc-tree/TreeNode.tsx
@@ -0,0 +1,521 @@
+import { useInjectTreeContext } from './contextTypes';
+import { getDataAndAria } from './util';
+import Indent from './Indent';
+import { convertNodePropsToEventData } from './utils/treeUtil';
+import {
+  computed,
+  defineComponent,
+  getCurrentInstance,
+  onMounted,
+  onUpdated,
+  reactive,
+  ref,
+} from 'vue';
+import { treeNodeProps } from './props';
+import classNames from '../_util/classNames';
+import { warning } from '../vc-util/warning';
+import type { DragNodeEvent, Key } from './interface';
+import pick from 'lodash-es/pick';
+
+const ICON_OPEN = 'open';
+const ICON_CLOSE = 'close';
+
+const defaultTitle = '---';
+
+export default defineComponent({
+  name: 'TreeNode',
+  inheritAttrs: false,
+  props: treeNodeProps,
+  isTreeNode: 1,
+  slots: ['title', 'icon', 'switcherIcon'],
+  setup(props, { attrs, slots, expose }) {
+    warning(
+      !('slots' in props.data),
+      `treeData slots is deprecated, please use ${Object.keys(props.data.slots || {}).map(
+        key => '`v-slot:' + key + '` ',
+      )}instead`,
+    );
+    const dragNodeHighlight = ref(false);
+    const context = useInjectTreeContext();
+    const selectHandle = ref();
+
+    const hasChildren = computed(() => {
+      const { eventKey } = props;
+      const { keyEntities } = context.value;
+      const { children } = keyEntities[eventKey] || {};
+
+      return !!(children || []).length;
+    });
+
+    const isLeaf = computed(() => {
+      const { isLeaf, loaded } = props;
+      const { loadData } = context.value;
+
+      const has = hasChildren.value;
+
+      if (isLeaf === false) {
+        return false;
+      }
+
+      return isLeaf || (!loadData && !has) || (loadData && loaded && !has);
+    });
+    const nodeState = computed(() => {
+      const { expanded } = props;
+
+      if (isLeaf.value) {
+        return null;
+      }
+
+      return expanded ? ICON_OPEN : ICON_CLOSE;
+    });
+
+    const isDisabled = computed(() => {
+      const { disabled } = props;
+      const { disabled: treeDisabled } = context.value;
+
+      return !!(treeDisabled || disabled);
+    });
+
+    const isCheckable = computed(() => {
+      const { checkable } = props;
+      const { checkable: treeCheckable } = context.value;
+
+      // Return false if tree or treeNode is not checkable
+      if (!treeCheckable || checkable === false) return false;
+      return treeCheckable;
+    });
+
+    const isSelectable = computed(() => {
+      const { selectable } = props;
+      const { selectable: treeSelectable } = context.value;
+
+      // Ignore when selectable is undefined or null
+      if (typeof selectable === 'boolean') {
+        return selectable;
+      }
+
+      return treeSelectable;
+    });
+    const renderArgsData = computed(() => {
+      return {
+        ...pick(props, [
+          'active',
+          'checkable',
+          'checked',
+          'disableCheckbox',
+          'disabled',
+          'expanded',
+          'isLeaf',
+          'loading',
+          'selectable',
+          'selected',
+          'halfChecked',
+        ]),
+        ...props.data,
+        dataRef: props.data,
+        isLeaf: isLeaf.value,
+      };
+    });
+    const eventData = computed(() => {
+      return convertNodePropsToEventData(props);
+    });
+    const dragNodeEvent: DragNodeEvent = reactive({
+      eventData,
+      eventKey: computed(() => props.eventKey),
+      selectHandle,
+      pos: computed(() => props.pos),
+      key: getCurrentInstance().vnode.key as Key,
+    });
+    expose(dragNodeEvent);
+    const onSelectorDoubleClick = (e: MouseEvent) => {
+      const { onNodeDoubleClick } = context.value;
+      onNodeDoubleClick(e, eventData.value);
+    };
+
+    const onSelect = (e: MouseEvent) => {
+      if (isDisabled.value) return;
+
+      const { onNodeSelect } = context.value;
+      e.preventDefault();
+      onNodeSelect(e, eventData.value);
+    };
+
+    const onCheck = (e: MouseEvent) => {
+      if (isDisabled.value) return;
+
+      const { disableCheckbox, checked } = props;
+      const { onNodeCheck } = context.value;
+
+      if (!isCheckable.value || disableCheckbox) return;
+
+      e.preventDefault();
+      const targetChecked = !checked;
+      onNodeCheck(e, eventData.value, targetChecked);
+    };
+
+    const onSelectorClick = (e: MouseEvent) => {
+      // Click trigger before select/check operation
+      const { onNodeClick } = context.value;
+      onNodeClick(e, eventData.value);
+
+      if (isSelectable.value) {
+        onSelect(e);
+      } else {
+        onCheck(e);
+      }
+    };
+
+    const onMouseEnter = (e: MouseEvent) => {
+      const { onNodeMouseEnter } = context.value;
+      onNodeMouseEnter(e, eventData.value);
+    };
+
+    const onMouseLeave = (e: MouseEvent) => {
+      const { onNodeMouseLeave } = context.value;
+      onNodeMouseLeave(e, eventData.value);
+    };
+
+    const onContextmenu = (e: MouseEvent) => {
+      const { onNodeContextMenu } = context.value;
+      onNodeContextMenu(e, eventData.value);
+    };
+
+    const onDragStart = (e: DragEvent) => {
+      const { onNodeDragStart } = context.value;
+
+      e.stopPropagation();
+      dragNodeHighlight.value = true;
+      onNodeDragStart(e, dragNodeEvent);
+
+      try {
+        // ie throw error
+        // firefox-need-it
+        e.dataTransfer.setData('text/plain', '');
+      } catch (error) {
+        // empty
+      }
+    };
+
+    const onDragEnter = (e: DragEvent) => {
+      const { onNodeDragEnter } = context.value;
+
+      e.preventDefault();
+      e.stopPropagation();
+      onNodeDragEnter(e, dragNodeEvent);
+    };
+
+    const onDragOver = (e: DragEvent) => {
+      const { onNodeDragOver } = context.value;
+
+      e.preventDefault();
+      e.stopPropagation();
+      onNodeDragOver(e, dragNodeEvent);
+    };
+
+    const onDragLeave = (e: DragEvent) => {
+      const { onNodeDragLeave } = context.value;
+
+      e.stopPropagation();
+      onNodeDragLeave(e, dragNodeEvent);
+    };
+
+    const onDragEnd = (e: DragEvent) => {
+      const { onNodeDragEnd } = context.value;
+
+      e.stopPropagation();
+      dragNodeHighlight.value = false;
+      onNodeDragEnd(e, dragNodeEvent);
+    };
+
+    const onDrop = (e: DragEvent) => {
+      const { onNodeDrop } = context.value;
+
+      e.preventDefault();
+      e.stopPropagation();
+      dragNodeHighlight.value = false;
+      onNodeDrop(e, dragNodeEvent);
+    };
+
+    // Disabled item still can be switch
+    const onExpand = e => {
+      const { onNodeExpand } = context.value;
+      if (props.loading) return;
+      onNodeExpand(e, eventData.value);
+    };
+
+    const renderSwitcherIconDom = () => {
+      const {
+        switcherIcon: switcherIconFromProps = slots.switcherIcon ||
+          context.value.slots?.[props.data?.slots?.switcherIcon],
+      } = props;
+      const { switcherIcon: switcherIconFromCtx } = context.value;
+
+      const switcherIcon = switcherIconFromProps || switcherIconFromCtx;
+      // if switcherIconDom is null, no render switcher span
+      if (typeof switcherIcon === 'function') {
+        return switcherIcon(renderArgsData.value);
+      }
+      return switcherIcon;
+    };
+
+    // Load data to avoid default expanded tree without data
+    const syncLoadData = () => {
+      const { expanded, loading, loaded } = props;
+      const { loadData, onNodeLoad } = context.value;
+
+      if (loading) {
+        return;
+      }
+
+      // read from state to avoid loadData at same time
+      if (loadData && expanded && !isLeaf.value) {
+        // We needn't reload data when has children in sync logic
+        // It's only needed in node expanded
+        if (!hasChildren.value && !loaded) {
+          onNodeLoad(eventData.value);
+        }
+      }
+    };
+
+    onMounted(() => {
+      syncLoadData();
+    });
+    onUpdated(() => {
+      //syncLoadData();
+    });
+
+    // Switcher
+    const renderSwitcher = () => {
+      const { expanded } = props;
+      const { prefixCls } = context.value;
+      // if switcherIconDom is null, no render switcher span
+      const switcherIconDom = renderSwitcherIconDom();
+      if (isLeaf.value) {
+        return switcherIconDom !== false ? (
+          <span class={classNames(`${prefixCls}-switcher`, `${prefixCls}-switcher-noop`)}>
+            {switcherIconDom}
+          </span>
+        ) : null;
+      }
+
+      const switcherCls = classNames(
+        `${prefixCls}-switcher`,
+        `${prefixCls}-switcher_${expanded ? ICON_OPEN : ICON_CLOSE}`,
+      );
+
+      return switcherIconDom !== false ? (
+        <span onClick={onExpand} class={switcherCls}>
+          {switcherIconDom}
+        </span>
+      ) : null;
+    };
+
+    // Checkbox
+    const renderCheckbox = () => {
+      const { checked, halfChecked, disableCheckbox } = props;
+      const { prefixCls } = context.value;
+
+      const disabled = isDisabled.value;
+      const checkable = isCheckable.value;
+
+      if (!checkable) return null;
+
+      return (
+        <span
+          class={classNames(
+            `${prefixCls}-checkbox`,
+            checked && `${prefixCls}-checkbox-checked`,
+            !checked && halfChecked && `${prefixCls}-checkbox-indeterminate`,
+            (disabled || disableCheckbox) && `${prefixCls}-checkbox-disabled`,
+          )}
+          onClick={onCheck}
+        >
+          {context.value.customCheckable?.()}
+        </span>
+      );
+    };
+
+    const renderIcon = () => {
+      const { loading } = props;
+      const { prefixCls } = context.value;
+
+      return (
+        <span
+          class={classNames(
+            `${prefixCls}-iconEle`,
+            `${prefixCls}-icon__${nodeState.value || 'docu'}`,
+            loading && `${prefixCls}-icon_loading`,
+          )}
+        />
+      );
+    };
+
+    const renderDropIndicator = () => {
+      const { disabled, eventKey } = props;
+      const {
+        draggable,
+        dropLevelOffset,
+        dropPosition,
+        prefixCls,
+        indent,
+        dropIndicatorRender,
+        dragOverNodeKey,
+        direction,
+      } = context.value;
+      const mergedDraggable = draggable !== false;
+      // allowDrop is calculated in Tree.tsx, there is no need for calc it here
+      const showIndicator = !disabled && mergedDraggable && dragOverNodeKey === eventKey;
+      return showIndicator
+        ? dropIndicatorRender({ dropPosition, dropLevelOffset, indent, prefixCls, direction })
+        : null;
+    };
+
+    // Icon + Title
+    const renderSelector = () => {
+      const {
+        // title = slots.title ||
+        //   context.value.slots?.[props.data?.slots?.title] ||
+        //   context.value.slots?.title,
+        selected,
+        icon = slots.icon,
+        loading,
+        data,
+      } = props;
+      const title =
+        slots.title ||
+        context.value.slots?.[props.data?.slots?.title] ||
+        context.value.slots?.title ||
+        props.title;
+      const {
+        prefixCls,
+        showIcon,
+        icon: treeIcon,
+        draggable,
+        loadData,
+        slots: contextSlots,
+      } = context.value;
+      const disabled = isDisabled.value;
+      const mergedDraggable = typeof draggable === 'function' ? draggable(data) : draggable;
+
+      const wrapClass = `${prefixCls}-node-content-wrapper`;
+
+      // Icon - Still show loading icon when loading without showIcon
+      let $icon;
+
+      if (showIcon) {
+        const currentIcon = icon || context.value.slots?.[data?.slots?.icon] || treeIcon;
+
+        $icon = currentIcon ? (
+          <span class={classNames(`${prefixCls}-iconEle`, `${prefixCls}-icon__customize`)}>
+            {typeof currentIcon === 'function' ? currentIcon(renderArgsData.value) : currentIcon}
+          </span>
+        ) : (
+          renderIcon()
+        );
+      } else if (loadData && loading) {
+        $icon = renderIcon();
+      }
+
+      // Title
+      let titleNode: any;
+      if (typeof title === 'function') {
+        titleNode = title(renderArgsData.value);
+      } else if (contextSlots.titleRender) {
+        titleNode = contextSlots.titleRender(renderArgsData.value);
+      } else {
+        titleNode = title;
+      }
+      titleNode = titleNode === undefined ? defaultTitle : titleNode;
+
+      const $title = <span class={`${prefixCls}-title`}>{titleNode}</span>;
+
+      return (
+        <span
+          ref={selectHandle}
+          title={typeof title === 'string' ? title : ''}
+          class={classNames(
+            `${wrapClass}`,
+            `${wrapClass}-${nodeState.value || 'normal'}`,
+            !disabled && (selected || dragNodeHighlight.value) && `${prefixCls}-node-selected`,
+            !disabled && mergedDraggable && 'draggable',
+          )}
+          draggable={(!disabled && mergedDraggable) || undefined}
+          aria-grabbed={(!disabled && mergedDraggable) || undefined}
+          onMouseenter={onMouseEnter}
+          onMouseleave={onMouseLeave}
+          onContextmenu={onContextmenu}
+          onClick={onSelectorClick}
+          onDblclick={onSelectorDoubleClick}
+          onDragstart={mergedDraggable ? onDragStart : undefined}
+        >
+          {$icon}
+          {$title}
+          {renderDropIndicator()}
+        </span>
+      );
+    };
+    return () => {
+      const {
+        eventKey,
+        dragOver,
+        dragOverGapTop,
+        dragOverGapBottom,
+        isLeaf,
+        isStart,
+        isEnd,
+        expanded,
+        selected,
+        checked,
+        halfChecked,
+        loading,
+        domRef,
+        active,
+        data,
+        onMousemove,
+        ...otherProps
+      } = { ...props, ...attrs };
+      const { prefixCls, filterTreeNode, draggable, keyEntities, dropContainerKey, dropTargetKey } =
+        context.value;
+      const disabled = isDisabled.value;
+      const dataOrAriaAttributeProps = getDataAndAria(otherProps);
+      const { level } = keyEntities[eventKey] || {};
+      const isEndNode = isEnd[isEnd.length - 1];
+      const mergedDraggable = typeof draggable === 'function' ? draggable(data) : draggable;
+      return (
+        <div
+          ref={domRef}
+          class={classNames(attrs.class, `${prefixCls}-treenode`, {
+            [`${prefixCls}-treenode-disabled`]: disabled,
+            [`${prefixCls}-treenode-switcher-${expanded ? 'open' : 'close'}`]: !isLeaf,
+            [`${prefixCls}-treenode-checkbox-checked`]: checked,
+            [`${prefixCls}-treenode-checkbox-indeterminate`]: halfChecked,
+            [`${prefixCls}-treenode-selected`]: selected,
+            [`${prefixCls}-treenode-loading`]: loading,
+            [`${prefixCls}-treenode-active`]: active,
+            [`${prefixCls}-treenode-leaf-last`]: isEndNode,
+
+            'drop-target': dropTargetKey === eventKey,
+            'drop-container': dropContainerKey === eventKey,
+            'drag-over': !disabled && dragOver,
+            'drag-over-gap-top': !disabled && dragOverGapTop,
+            'drag-over-gap-bottom': !disabled && dragOverGapBottom,
+            'filter-node': filterTreeNode && filterTreeNode(eventData.value),
+          })}
+          style={attrs.style}
+          onDragenter={mergedDraggable ? onDragEnter : undefined}
+          onDragover={mergedDraggable ? onDragOver : undefined}
+          onDragleave={mergedDraggable ? onDragLeave : undefined}
+          onDrop={mergedDraggable ? onDrop : undefined}
+          onDragend={mergedDraggable ? onDragEnd : undefined}
+          onMousemove={onMousemove}
+          {...dataOrAriaAttributeProps}
+        >
+          <Indent prefixCls={prefixCls} level={level} isStart={isStart} isEnd={isEnd} />
+          {renderSwitcher()}
+          {renderCheckbox()}
+          {renderSelector()}
+        </div>
+      );
+    };
+  },
+});
diff --git a/components/vc-tree/assets/icons.png b/components/vc-tree/assets/icons.png
deleted file mode 100644
index ffda01ef1..000000000
Binary files a/components/vc-tree/assets/icons.png and /dev/null differ
diff --git a/components/vc-tree/assets/index.less b/components/vc-tree/assets/index.less
deleted file mode 100644
index 4dcb641db..000000000
--- a/components/vc-tree/assets/index.less
+++ /dev/null
@@ -1,194 +0,0 @@
-@treePrefixCls: rc-tree;
-.@{treePrefixCls} {
-  margin: 0;
-  padding: 5px;
-  li {
-    padding: 0;
-    margin: 0;
-    list-style: none;
-    white-space: nowrap;
-    outline: 0;
-    .draggable {
-      color: #333;
-      -moz-user-select: none;
-      -khtml-user-select: none;
-      -webkit-user-select: none;
-      user-select: none;
-      /* Required to make elements draggable in old WebKit */
-      -khtml-user-drag: element;
-      -webkit-user-drag: element;
-    }
-    &.drag-over {
-      > .draggable {
-        background-color: #316ac5;
-        color: white;
-        border: 1px #316ac5 solid;
-        opacity: 0.8;
-      }
-    }
-    &.drag-over-gap-top {
-      > .draggable {
-        border-top: 2px blue solid;
-      }
-    }
-    &.drag-over-gap-bottom {
-      > .draggable {
-        border-bottom: 2px blue solid;
-      }
-    }
-    &.filter-node {
-      > .@{treePrefixCls}-node-content-wrapper {
-        color: #a60000 !important;
-        font-weight: bold !important;
-      }
-    }
-    ul {
-      margin: 0;
-      padding: 0 0 0 18px;
-    }
-    .@{treePrefixCls}-node-content-wrapper {
-      display: inline-block;
-      padding: 1px 3px 0 0;
-      margin: 0;
-      cursor: pointer;
-      height: 17px;
-      text-decoration: none;
-      vertical-align: top;
-    }
-    span {
-      &.@{treePrefixCls}-switcher,
-      &.@{treePrefixCls}-checkbox,
-      &.@{treePrefixCls}-iconEle {
-        line-height: 16px;
-        margin-right: 2px;
-        width: 16px;
-        height: 16px;
-        display: inline-block;
-        vertical-align: middle;
-        border: 0 none;
-        cursor: pointer;
-        outline: none;
-        background-color: transparent;
-        background-repeat: no-repeat;
-        background-attachment: scroll;
-        background-image: url('data:image/png;base64,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');
-
-        &.@{treePrefixCls}-icon__customize {
-          background-image: none;
-        }
-      }
-      &.@{treePrefixCls}-icon_loading {
-        margin-right: 2px;
-        vertical-align: top;
-        background: url('data:image/gif;base64,R0lGODlhEAAQAKIGAMLY8YSx5HOm4Mjc88/g9Ofw+v///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCgAGACwAAAAAEAAQAAADMGi6RbUwGjKIXCAA016PgRBElAVlG/RdLOO0X9nK61W39qvqiwz5Ls/rRqrggsdkAgAh+QQFCgAGACwCAAAABwAFAAADD2hqELAmiFBIYY4MAutdCQAh+QQFCgAGACwGAAAABwAFAAADD1hU1kaDOKMYCGAGEeYFCQAh+QQFCgAGACwKAAIABQAHAAADEFhUZjSkKdZqBQG0IELDQAIAIfkEBQoABgAsCgAGAAUABwAAAxBoVlRKgyjmlAIBqCDCzUoCACH5BAUKAAYALAYACgAHAAUAAAMPaGpFtYYMAgJgLogA610JACH5BAUKAAYALAIACgAHAAUAAAMPCAHWFiI4o1ghZZJB5i0JACH5BAUKAAYALAAABgAFAAcAAAMQCAFmIaEp1motpDQySMNFAgA7')
-          no-repeat scroll 0 0 transparent;
-      }
-      &.@{treePrefixCls}-switcher {
-        &.@{treePrefixCls}-switcher-noop {
-          cursor: auto;
-        }
-        &.@{treePrefixCls}-switcher_open {
-          background-position: -93px -56px;
-        }
-        &.@{treePrefixCls}-switcher_close {
-          background-position: -75px -56px;
-        }
-      }
-      &.@{treePrefixCls}-checkbox {
-        width: 13px;
-        height: 13px;
-        margin: 0 3px;
-        background-position: 0 0;
-        &-checked {
-          background-position: -14px 0;
-        }
-        &-indeterminate {
-          background-position: -14px -28px;
-        }
-        &-disabled {
-          background-position: 0 -56px;
-        }
-        &.@{treePrefixCls}-checkbox-checked.@{treePrefixCls}-checkbox-disabled {
-          background-position: -14px -56px;
-        }
-        &.@{treePrefixCls}-checkbox-indeterminate.@{treePrefixCls}-checkbox-disabled {
-          position: relative;
-          background: #ccc;
-          border-radius: 3px;
-          &::after {
-            content: ' ';
-            -webkit-transform: scale(1);
-            transform: scale(1);
-            position: absolute;
-            left: 3px;
-            top: 5px;
-            width: 5px;
-            height: 0;
-            border: 2px solid #fff;
-            border-top: 0;
-            border-left: 0;
-          }
-        }
-      }
-    }
-  }
-  &:not(.@{treePrefixCls}-show-line) {
-    .@{treePrefixCls}-switcher-noop {
-      background: none;
-    }
-  }
-  &.@{treePrefixCls}-show-line {
-    li:not(:last-child) {
-      > ul {
-        background: url('data:image/gif;base64,R0lGODlhCQACAIAAAMzMzP///yH5BAEAAAEALAAAAAAJAAIAAAIEjI9pUAA7')
-          0 0 repeat-y;
-      }
-      > .@{treePrefixCls}-switcher-noop {
-        background-position: -56px -18px;
-      }
-    }
-    li:last-child {
-      > .@{treePrefixCls}-switcher-noop {
-        background-position: -56px -36px;
-      }
-    }
-  }
-  &-child-tree {
-    display: none;
-    &-open {
-      display: block;
-    }
-  }
-  &-treenode-disabled {
-    > span:not(.@{treePrefixCls}-switcher),
-    > a,
-    > a span {
-      color: #767676;
-      cursor: not-allowed;
-    }
-  }
-  &-node-selected {
-    background-color: #ffe6b0;
-    border: 1px #ffb951 solid;
-    opacity: 0.8;
-  }
-  &-icon__open {
-    margin-right: 2px;
-    background-position: -110px -16px;
-    vertical-align: top;
-  }
-  &-icon__close {
-    margin-right: 2px;
-    background-position: -110px 0;
-    vertical-align: top;
-  }
-  &-icon__docu {
-    margin-right: 2px;
-    background-position: -110px -32px;
-    vertical-align: top;
-  }
-  &-icon__customize {
-    margin-right: 2px;
-    vertical-align: top;
-  }
-}
diff --git a/components/vc-tree/assets/line.gif b/components/vc-tree/assets/line.gif
deleted file mode 100644
index d561d36a9..000000000
Binary files a/components/vc-tree/assets/line.gif and /dev/null differ
diff --git a/components/vc-tree/assets/loading.gif b/components/vc-tree/assets/loading.gif
deleted file mode 100644
index e8c289293..000000000
Binary files a/components/vc-tree/assets/loading.gif and /dev/null differ
diff --git a/components/vc-tree/contextTypes.ts b/components/vc-tree/contextTypes.ts
new file mode 100644
index 000000000..24c4d1a40
--- /dev/null
+++ b/components/vc-tree/contextTypes.ts
@@ -0,0 +1,110 @@
+/**
+ * Webpack has bug for import loop, which is not the same behavior as ES module.
+ * When util.js imports the TreeNode for tree generate will cause treeContextTypes be empty.
+ */
+
+import type { ComputedRef, InjectionKey, PropType } from 'vue';
+import { inject } from 'vue';
+import { computed } from 'vue';
+import { defineComponent, provide } from 'vue';
+import type { VueNode } from '../_util/type';
+import type {
+  IconType,
+  Key,
+  DataEntity,
+  EventDataNode,
+  DragNodeEvent,
+  DataNode,
+  Direction,
+} from './interface';
+
+export type NodeMouseEventParams = {
+  event: MouseEvent;
+  node: EventDataNode;
+};
+export type NodeDragEventParams = {
+  event: MouseEvent;
+  node: EventDataNode;
+};
+
+export type NodeMouseEventHandler = (e: MouseEvent, node: EventDataNode) => void;
+export type NodeDragEventHandler = (
+  e: MouseEvent,
+  node: DragNodeEvent,
+  outsideTree?: boolean,
+) => void;
+
+export interface TreeContextProps {
+  prefixCls: string;
+  selectable: boolean;
+  showIcon: boolean;
+  icon: IconType;
+  switcherIcon: IconType;
+  draggable: ((node: DataNode) => boolean) | boolean;
+  checkable: boolean;
+  customCheckable: () => any;
+  checkStrictly: boolean;
+  disabled: boolean;
+  keyEntities: Record<Key, DataEntity>;
+  // for details see comment in Tree.state (Tree.tsx)
+  dropLevelOffset?: number;
+  dropContainerKey: Key | null;
+  dropTargetKey: Key | null;
+  dropPosition: -1 | 0 | 1 | null;
+  indent: number | null;
+  dropIndicatorRender: (props: {
+    dropPosition: -1 | 0 | 1;
+    dropLevelOffset: number;
+    indent: number | null;
+    prefixCls: string;
+    direction: Direction;
+  }) => VueNode;
+  dragOverNodeKey: Key | null;
+  direction: Direction;
+
+  loadData: (treeNode: EventDataNode) => Promise<void>;
+  filterTreeNode: (treeNode: EventDataNode) => boolean;
+
+  onNodeClick: NodeMouseEventHandler;
+  onNodeDoubleClick: NodeMouseEventHandler;
+  onNodeExpand: NodeMouseEventHandler;
+  onNodeSelect: NodeMouseEventHandler;
+  onNodeCheck: (e: MouseEvent, treeNode: EventDataNode, checked: boolean) => void;
+  onNodeLoad: (treeNode: EventDataNode) => void;
+  onNodeMouseEnter: NodeMouseEventHandler;
+  onNodeMouseLeave: NodeMouseEventHandler;
+  onNodeContextMenu: NodeMouseEventHandler;
+  onNodeDragStart: NodeDragEventHandler;
+  onNodeDragEnter: NodeDragEventHandler;
+  onNodeDragOver: NodeDragEventHandler;
+  onNodeDragLeave: NodeDragEventHandler;
+  onNodeDragEnd: NodeDragEventHandler;
+  onNodeDrop: NodeDragEventHandler;
+  slots: {
+    title?: (data: DataNode) => any;
+    titleRender?: (data: DataNode) => any;
+    [key: string]: (d: any) => any | undefined;
+  };
+}
+const TreeContextKey: InjectionKey<ComputedRef<TreeContextProps>> = Symbol('TreeContextKey');
+
+export const TreeContext = defineComponent({
+  name: 'TreeContext',
+  props: {
+    value: { type: Object as PropType<TreeContextProps> },
+  },
+  setup(props, { slots }) {
+    provide(
+      TreeContextKey,
+      computed(() => props.value),
+    );
+    return () => slots.default?.();
+  },
+});
+
+export const useInjectTreeContext = () => {
+  return inject(
+    TreeContextKey,
+    computed(() => ({} as TreeContextProps)),
+  );
+};
diff --git a/components/vc-tree/index.js b/components/vc-tree/index.js
deleted file mode 100644
index 384396194..000000000
--- a/components/vc-tree/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-// based on rc-tree 2.1.3
-import Tree from './src';
-
-export default Tree;
diff --git a/components/vc-tree/index.ts b/components/vc-tree/index.ts
new file mode 100644
index 000000000..94a53c555
--- /dev/null
+++ b/components/vc-tree/index.ts
@@ -0,0 +1,6 @@
+import type { TreeProps, TreeNodeProps } from './props';
+import Tree from './Tree';
+import TreeNode from './TreeNode';
+export { TreeNode };
+export type { TreeProps, TreeNodeProps };
+export default Tree;
diff --git a/components/vc-tree/interface.tsx b/components/vc-tree/interface.tsx
new file mode 100644
index 000000000..15860fc38
--- /dev/null
+++ b/components/vc-tree/interface.tsx
@@ -0,0 +1,89 @@
+import type { CSSProperties, VNode } from 'vue';
+import type { TreeNodeProps } from './props';
+export type { ScrollTo } from '../vc-virtual-list/List';
+
+export interface DataNode {
+  checkable?: boolean;
+  children?: DataNode[];
+  disabled?: boolean;
+  disableCheckbox?: boolean;
+  icon?: IconType;
+  isLeaf?: boolean;
+  key: string | number;
+  title?: any;
+  selectable?: boolean;
+  switcherIcon?: IconType;
+
+  /** Set style of TreeNode. This is not recommend if you don't have any force requirement */
+  class?: string;
+  style?: CSSProperties;
+  slots?: Record<string, string>;
+}
+
+export interface EventDataNode extends DataNode {
+  expanded?: boolean;
+  selected?: boolean;
+  checked: boolean;
+  loaded?: boolean;
+  loading?: boolean;
+  halfChecked?: boolean;
+  dragOver?: boolean;
+  dragOverGapTop?: boolean;
+  dragOverGapBottom?: boolean;
+  pos?: string;
+  active?: boolean;
+  dataRef?: DataNode;
+  eventKey?: Key; // 兼容 v2， 推荐直接用 key
+}
+
+export type IconType = any;
+
+export type Key = string | number;
+
+export type NodeElement = VNode<TreeNodeProps>;
+
+export type DragNodeEvent = {
+  key: Key;
+  eventData: EventDataNode;
+  eventKey: Key;
+  selectHandle: HTMLSpanElement;
+  pos: string;
+};
+export interface Entity {
+  node: NodeElement;
+  index: number;
+  key: Key;
+  pos: string;
+  parent?: Entity;
+  children?: Entity[];
+}
+
+export interface DataEntity extends Omit<Entity, 'node' | 'parent' | 'children'> {
+  node: DataNode;
+  parent?: DataEntity;
+  children?: DataEntity[];
+  level: number;
+}
+
+export interface FlattenNode {
+  parent: FlattenNode | null;
+  children: FlattenNode[];
+  pos: string;
+  data: DataNode;
+  title: any;
+  key: Key;
+  isStart: boolean[];
+  isEnd: boolean[];
+}
+
+export type GetKey<RecordType> = (record: RecordType, index?: number) => Key;
+
+export type GetCheckDisabled<RecordType> = (record: RecordType) => boolean;
+
+export type Direction = 'ltr' | 'rtl' | undefined;
+
+export interface FieldNames {
+  title?: string;
+  key?: string;
+  children?: string;
+}
diff --git a/components/vc-tree/props.ts b/components/vc-tree/props.ts
new file mode 100644
index 000000000..e2954f3b0
--- /dev/null
+++ b/components/vc-tree/props.ts
@@ -0,0 +1,240 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import PropTypes from '../_util/vue-types';
+import type {
+  NodeDragEventParams,
+  NodeMouseEventHandler,
+  NodeMouseEventParams,
+} from './contextTypes';
+import type {
+  DataNode,
+  Key,
+  FlattenNode,
+  DataEntity,
+  EventDataNode,
+  Direction,
+  FieldNames,
+} from './interface';
+
+export interface CheckInfo {
+  event: 'check';
+  node: EventDataNode;
+  checked: boolean;
+  nativeEvent: MouseEvent;
+  checkedNodes: DataNode[];
+  checkedNodesPositions?: { node: DataNode; pos: string }[];
+  halfCheckedKeys?: Key[];
+}
+
+export const treeNodeProps = {
+  eventKey: [String, Number], // Pass by parent `cloneElement`
+  prefixCls: String,
+
+  // By parent
+  expanded: { type: Boolean, default: undefined },
+  selected: { type: Boolean, default: undefined },
+  checked: { type: Boolean, default: undefined },
+  loaded: { type: Boolean, default: undefined },
+  loading: { type: Boolean, default: undefined },
+  halfChecked: { type: Boolean, default: undefined },
+  title: PropTypes.any,
+  dragOver: { type: Boolean, default: undefined },
+  dragOverGapTop: { type: Boolean, default: undefined },
+  dragOverGapBottom: { type: Boolean, default: undefined },
+  pos: String,
+
+  /** New added in Tree for easy data access */
+  data: { type: Object as PropType<DataNode>, default: undefined as DataNode },
+  isStart: { type: Array as PropType<boolean[]> },
+  isEnd: { type: Array as PropType<boolean[]> },
+  active: { type: Boolean, default: undefined },
+  onMousemove: { type: Function as PropType<EventHandlerNonNull> },
+
+  // By user
+  isLeaf: { type: Boolean, default: undefined },
+  checkable: { type: Boolean, default: undefined },
+  selectable: { type: Boolean, default: undefined },
+  disabled: { type: Boolean, default: undefined },
+  disableCheckbox: { type: Boolean, default: undefined },
+  icon: PropTypes.any,
+  switcherIcon: PropTypes.any,
+  domRef: { type: Function as PropType<(arg: any) => void> },
+};
+
+export type TreeNodeProps = Partial<ExtractPropTypes<typeof treeNodeProps>>;
+
+export const nodeListProps = {
+  prefixCls: { type: String as PropType<string> },
+  data: { type: Array as PropType<FlattenNode[]> },
+  motion: { type: Object as PropType<any> },
+  focusable: { type: Boolean as PropType<boolean> },
+  activeItem: { type: Object as PropType<FlattenNode> },
+  focused: { type: Boolean as PropType<boolean> },
+  tabindex: { type: Number as PropType<number> },
+  checkable: { type: Boolean as PropType<boolean> },
+  selectable: { type: Boolean as PropType<boolean> },
+  disabled: { type: Boolean as PropType<boolean> },
+
+  expandedKeys: { type: Array as PropType<Key[]> },
+  selectedKeys: { type: Array as PropType<Key[]> },
+  checkedKeys: { type: Array as PropType<Key[]> },
+  loadedKeys: { type: Array as PropType<Key[]> },
+  loadingKeys: { type: Array as PropType<Key[]> },
+  halfCheckedKeys: { type: Array as PropType<Key[]> },
+  keyEntities: { type: Object as PropType<Record<Key, DataEntity>> },
+
+  dragging: { type: Boolean as PropType<boolean> },
+  dragOverNodeKey: { type: [String, Number] as PropType<Key> },
+  dropPosition: { type: Number as PropType<number> },
+
+  // Virtual list
+  height: { type: Number as PropType<number> },
+  itemHeight: { type: Number as PropType<number> },
+  virtual: { type: Boolean as PropType<boolean> },
+
+  onKeydown: { type: Function as PropType<EventHandlerNonNull> },
+  onFocus: { type: Function as PropType<(e: FocusEvent) => void> },
+  onBlur: { type: Function as PropType<(e: FocusEvent) => void> },
+  onActiveChange: { type: Function as PropType<(key: Key) => void> },
+  onContextmenu: { type: Function as PropType<EventHandlerNonNull> },
+
+  onListChangeStart: { type: Function as PropType<() => void> },
+  onListChangeEnd: { type: Function as PropType<() => void> },
+};
+
+export type NodeListProps = Partial<ExtractPropTypes<typeof nodeListProps>>;
+export type AllowDrop = (options: { dropNode: DataNode; dropPosition: -1 | 0 | 1 }) => boolean;
+
+export const treeProps = () => ({
+  prefixCls: String,
+  focusable: { type: Boolean, default: undefined },
+  tabindex: Number,
+  children: PropTypes.VNodeChild,
+  treeData: { type: Array as PropType<DataNode[]> }, // Generate treeNode by children
+  fieldNames: { type: Object as PropType<FieldNames> },
+  showLine: { type: Boolean, default: undefined },
+  showIcon: { type: Boolean, default: undefined },
+  icon: PropTypes.any,
+  selectable: { type: Boolean, default: undefined },
+  disabled: { type: Boolean, default: undefined },
+  multiple: { type: Boolean, default: undefined },
+  checkable: { type: Boolean, default: undefined },
+  checkStrictly: { type: Boolean, default: undefined },
+  draggable: { type: [Function, Boolean] as PropType<((node: DataNode) => boolean) | boolean> },
+  defaultExpandParent: { type: Boolean, default: undefined },
+  autoExpandParent: { type: Boolean, default: undefined },
+  defaultExpandAll: { type: Boolean, default: undefined },
+  defaultExpandedKeys: { type: Array as PropType<Key[]> },
+  expandedKeys: { type: Array as PropType<Key[]> },
+  defaultCheckedKeys: { type: Array as PropType<Key[]> },
+  checkedKeys: {
+    type: [Object, Array] as PropType<Key[] | { checked: Key[]; halfChecked: Key[] }>,
+  },
+  defaultSelectedKeys: { type: Array as PropType<Key[]> },
+  selectedKeys: { type: Array as PropType<Key[]> },
+  allowDrop: { type: Function as PropType<AllowDrop> },
+
+  dropIndicatorRender: {
+    type: Function as PropType<
+      (props: {
+        dropPosition: -1 | 0 | 1;
+        dropLevelOffset: number;
+        indent: number;
+        prefixCls: string;
+        direction: Direction;
+      }) => any
+    >,
+  },
+  onFocus: { type: Function as PropType<(e: FocusEvent) => void> },
+  onBlur: { type: Function as PropType<(e: FocusEvent) => void> },
+  onKeydown: { type: Function as PropType<EventHandlerNonNull> },
+  onContextmenu: { type: Function as PropType<EventHandlerNonNull> },
+  onClick: { type: Function as PropType<NodeMouseEventHandler> },
+  onDblclick: { type: Function as PropType<NodeMouseEventHandler> },
+  onScroll: { type: Function as PropType<EventHandlerNonNull> },
+  onExpand: {
+    type: Function as PropType<
+      (
+        expandedKeys: Key[],
+        info: {
+          node: EventDataNode;
+          expanded: boolean;
+          nativeEvent: MouseEvent;
+        },
+      ) => void
+    >,
+  },
+  onCheck: {
+    type: Function as PropType<
+      (checked: { checked: Key[]; halfChecked: Key[] } | Key[], info: CheckInfo) => void
+    >,
+  },
+  onSelect: {
+    type: Function as PropType<
+      (
+        selectedKeys: Key[],
+        info: {
+          event: 'select';
+          selected: boolean;
+          node: EventDataNode;
+          selectedNodes: DataNode[];
+          nativeEvent: MouseEvent;
+        },
+      ) => void
+    >,
+  },
+  onLoad: {
+    type: Function as PropType<
+      (
+        loadedKeys: Key[],
+        info: {
+          event: 'load';
+          node: EventDataNode;
+        },
+      ) => void
+    >,
+  },
+  loadData: { type: Function as PropType<(treeNode: EventDataNode) => Promise<void>> },
+  loadedKeys: { type: Array as PropType<Key[]> },
+  onMouseenter: { type: Function as PropType<(info: NodeMouseEventParams) => void> },
+  onMouseleave: { type: Function as PropType<(info: NodeMouseEventParams) => void> },
+  onRightClick: {
+    type: Function as PropType<(info: { event: MouseEvent; node: EventDataNode }) => void>,
+  },
+  onDragstart: { type: Function as PropType<(info: NodeDragEventParams) => void> },
+  onDragenter: {
+    type: Function as PropType<(info: NodeDragEventParams & { expandedKeys: Key[] }) => void>,
+  },
+  onDragover: { type: Function as PropType<(info: NodeDragEventParams) => void> },
+  onDragleave: { type: Function as PropType<(info: NodeDragEventParams) => void> },
+  onDragend: { type: Function as PropType<(info: NodeDragEventParams) => void> },
+  onDrop: {
+    type: Function as PropType<
+      (
+        info: NodeDragEventParams & {
+          dragNode: EventDataNode;
+          dragNodesKeys: Key[];
+          dropPosition: number;
+          dropToGap: boolean;
+        },
+      ) => void
+    >,
+  },
+  /**
+   * Used for `rc-tree-select` only.
+   * Do not use in your production code directly since this will be refactor.
+   */
+  onActiveChange: { type: Function as PropType<(key: Key) => void> },
+  filterTreeNode: { type: Function as PropType<(treeNode: EventDataNode) => boolean> },
+  motion: PropTypes.any,
+  switcherIcon: PropTypes.any,
+
+  // Virtual List
+  height: Number,
+  itemHeight: Number,
+  virtual: { type: Boolean, default: undefined },
+
+  // direction for drag logic
+  direction: { type: String as PropType<Direction> },
+});
+
+export type TreeProps = Partial<ExtractPropTypes<ReturnType<typeof treeProps>>>;
diff --git a/components/vc-tree/src/Tree.jsx b/components/vc-tree/src/Tree.jsx
deleted file mode 100644
index 2085c138a..000000000
--- a/components/vc-tree/src/Tree.jsx
+++ /dev/null
@@ -1,686 +0,0 @@
-import PropTypes, { withUndefined } from '../../_util/vue-types';
-import classNames from '../../_util/classNames';
-import warning from 'warning';
-import { hasProp, initDefaultProps, getOptionProps, getSlot } from '../../_util/props-util';
-import { cloneElement } from '../../_util/vnode';
-import BaseMixin from '../../_util/BaseMixin';
-import {
-  convertTreeToEntities,
-  convertDataToTree,
-  getPosition,
-  getDragNodesKeys,
-  parseCheckedKeys,
-  conductExpandParent,
-  calcSelectedKeys,
-  calcDropPosition,
-  arrAdd,
-  arrDel,
-  posToArr,
-  mapChildren,
-  conductCheck,
-  warnOnlyTreeNode,
-  getDataAndAria,
-} from './util';
-import { defineComponent } from 'vue';
-
-/**
- * Thought we still use `cloneElement` to pass `key`,
- * other props can pass with context for future refactor.
- */
-
-function getWatch(keys = []) {
-  const watch = {};
-  keys.forEach(k => {
-    watch[k] = {
-      handler() {
-        this.needSyncKeys[k] = true;
-      },
-      flush: 'sync',
-    };
-  });
-  return watch;
-}
-
-const Tree = defineComponent({
-  name: 'Tree',
-  mixins: [BaseMixin],
-  provide() {
-    return {
-      vcTree: this,
-    };
-  },
-  inheritAttrs: false,
-  props: initDefaultProps(
-    {
-      prefixCls: PropTypes.string,
-      tabindex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-      children: PropTypes.any,
-      treeData: PropTypes.array, // Generate treeNode by children
-      showLine: PropTypes.looseBool,
-      showIcon: PropTypes.looseBool,
-      icon: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
-      focusable: PropTypes.looseBool,
-      selectable: PropTypes.looseBool,
-      disabled: PropTypes.looseBool,
-      multiple: PropTypes.looseBool,
-      checkable: withUndefined(PropTypes.oneOfType([PropTypes.object, PropTypes.looseBool])),
-      checkStrictly: PropTypes.looseBool,
-      draggable: PropTypes.looseBool,
-      defaultExpandParent: PropTypes.looseBool,
-      autoExpandParent: PropTypes.looseBool,
-      defaultExpandAll: PropTypes.looseBool,
-      defaultExpandedKeys: PropTypes.array,
-      expandedKeys: PropTypes.array,
-      defaultCheckedKeys: PropTypes.array,
-      checkedKeys: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
-      defaultSelectedKeys: PropTypes.array,
-      selectedKeys: PropTypes.array,
-      // onClick: PropTypes.func,
-      // onDoubleClick: PropTypes.func,
-      // onExpand: PropTypes.func,
-      // onCheck: PropTypes.func,
-      // onSelect: PropTypes.func,
-      loadData: PropTypes.func,
-      loadedKeys: PropTypes.array,
-      // onMouseEnter: PropTypes.func,
-      // onMouseLeave: PropTypes.func,
-      // onRightClick: PropTypes.func,
-      // onDragStart: PropTypes.func,
-      // onDragEnter: PropTypes.func,
-      // onDragOver: PropTypes.func,
-      // onDragLeave: PropTypes.func,
-      // onDragEnd: PropTypes.func,
-      // onDrop: PropTypes.func,
-      filterTreeNode: PropTypes.func,
-      openTransitionName: PropTypes.string,
-      openAnimation: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-      switcherIcon: PropTypes.any,
-      __propsSymbol__: PropTypes.any,
-    },
-    {
-      prefixCls: 'rc-tree',
-      showLine: false,
-      showIcon: true,
-      selectable: true,
-      multiple: false,
-      checkable: false,
-      disabled: false,
-      checkStrictly: false,
-      draggable: false,
-      defaultExpandParent: true,
-      autoExpandParent: false,
-      defaultExpandAll: false,
-      defaultExpandedKeys: [],
-      defaultCheckedKeys: [],
-      defaultSelectedKeys: [],
-    },
-  ),
-
-  data() {
-    warning(this.$props.__propsSymbol__, 'must pass __propsSymbol__');
-    warning(this.$props.children, 'please use children prop replace slots.default');
-    this.needSyncKeys = {};
-    this.domTreeNodes = {};
-    const state = {
-      _posEntities: new Map(),
-      _keyEntities: new Map(),
-      _expandedKeys: [],
-      _selectedKeys: [],
-      _checkedKeys: [],
-      _halfCheckedKeys: [],
-      _loadedKeys: [],
-      _loadingKeys: [],
-      _treeNode: [],
-      _prevProps: null,
-      _dragOverNodeKey: '',
-      _dropPosition: null,
-      _dragNodesKeys: [],
-    };
-    return {
-      ...state,
-      ...this.getDerivedState(getOptionProps(this), state),
-    };
-  },
-
-  watch: {
-    // watch 引用类型的改变
-    ...getWatch([
-      'treeData',
-      'children',
-      'expandedKeys',
-      'autoExpandParent',
-      'selectedKeys',
-      'checkedKeys',
-      'loadedKeys',
-    ]),
-    __propsSymbol__() {
-      this.setState(this.getDerivedState(getOptionProps(this), this.$data));
-      this.needSyncKeys = {};
-    },
-  },
-
-  methods: {
-    getDerivedState(props, prevState) {
-      const { _prevProps } = prevState;
-      const newState = {
-        _prevProps: { ...props },
-      };
-      const self = this;
-      function needSync(name) {
-        return (!_prevProps && name in props) || (_prevProps && self.needSyncKeys[name]);
-      }
-
-      // ================== Tree Node ==================
-      let treeNode = null;
-
-      // Check if `treeData` or `children` changed and save into the state.
-      if (needSync('treeData')) {
-        treeNode = convertDataToTree(props.treeData);
-      } else if (needSync('children')) {
-        treeNode = props.children;
-      }
-
-      // Tree support filter function which will break the tree structure in the vdm.
-      // We cache the treeNodes in state so that we can return the treeNode in event trigger.
-      if (treeNode) {
-        newState._treeNode = treeNode;
-
-        // Calculate the entities data for quick match
-        const entitiesMap = convertTreeToEntities(treeNode);
-        newState._keyEntities = entitiesMap.keyEntities;
-      }
-
-      const keyEntities = newState._keyEntities || prevState._keyEntities;
-
-      // ================ expandedKeys =================
-      if (needSync('expandedKeys') || (_prevProps && needSync('autoExpandParent'))) {
-        newState._expandedKeys =
-          props.autoExpandParent || (!_prevProps && props.defaultExpandParent)
-            ? conductExpandParent(props.expandedKeys, keyEntities)
-            : props.expandedKeys;
-      } else if (!_prevProps && props.defaultExpandAll) {
-        newState._expandedKeys = [...keyEntities.keys()];
-      } else if (!_prevProps && props.defaultExpandedKeys) {
-        newState._expandedKeys =
-          props.autoExpandParent || props.defaultExpandParent
-            ? conductExpandParent(props.defaultExpandedKeys, keyEntities)
-            : props.defaultExpandedKeys;
-      }
-
-      // ================ selectedKeys =================
-      if (props.selectable) {
-        if (needSync('selectedKeys')) {
-          newState._selectedKeys = calcSelectedKeys(props.selectedKeys, props);
-        } else if (!_prevProps && props.defaultSelectedKeys) {
-          newState._selectedKeys = calcSelectedKeys(props.defaultSelectedKeys, props);
-        }
-      }
-
-      // ================= checkedKeys =================
-      if (props.checkable) {
-        let checkedKeyEntity;
-
-        if (needSync('checkedKeys')) {
-          checkedKeyEntity = parseCheckedKeys(props.checkedKeys) || {};
-        } else if (!_prevProps && props.defaultCheckedKeys) {
-          checkedKeyEntity = parseCheckedKeys(props.defaultCheckedKeys) || {};
-        } else if (treeNode) {
-          // If treeNode changed, we also need check it
-          checkedKeyEntity = parseCheckedKeys(props.checkedKeys) || {
-            checkedKeys: prevState._checkedKeys,
-            halfCheckedKeys: prevState._halfCheckedKeys,
-          };
-        }
-
-        if (checkedKeyEntity) {
-          let { checkedKeys = [], halfCheckedKeys = [] } = checkedKeyEntity;
-
-          if (!props.checkStrictly) {
-            const conductKeys = conductCheck(checkedKeys, true, keyEntities);
-            ({ checkedKeys, halfCheckedKeys } = conductKeys);
-          }
-
-          newState._checkedKeys = checkedKeys;
-          newState._halfCheckedKeys = halfCheckedKeys;
-        }
-      }
-      // ================= loadedKeys ==================
-      if (needSync('loadedKeys')) {
-        newState._loadedKeys = props.loadedKeys;
-      }
-
-      return newState;
-    },
-    onNodeDragStart(event, node) {
-      const { _expandedKeys } = this.$data;
-      const { eventKey } = node;
-      const children = getSlot(node);
-      this.dragNode = node;
-
-      this.setState({
-        _dragNodesKeys: getDragNodesKeys(
-          typeof children === 'function' ? children() : children,
-          node,
-        ),
-        _expandedKeys: arrDel(_expandedKeys, eventKey),
-      });
-      this.__emit('dragstart', { event, node });
-    },
-
-    /**
-     * [Legacy] Select handler is less small than node,
-     * so that this will trigger when drag enter node or select handler.
-     * This is a little tricky if customize css without padding.
-     * Better for use mouse move event to refresh drag state.
-     * But let's just keep it to avoid event trigger logic change.
-     */
-    onNodeDragEnter(event, node) {
-      const { _expandedKeys: expandedKeys } = this.$data;
-      const { pos, eventKey } = node;
-
-      if (!this.dragNode || !node.selectHandle) return;
-
-      const dropPosition = calcDropPosition(event, node);
-
-      // Skip if drag node is self
-      if (this.dragNode.eventKey === eventKey && dropPosition === 0) {
-        this.setState({
-          _dragOverNodeKey: '',
-          _dropPosition: null,
-        });
-        return;
-      }
-
-      // Ref: https://github.com/react-component/tree/issues/132
-      // Add timeout to let onDragLevel fire before onDragEnter,
-      // so that we can clean drag props for onDragLeave node.
-      // Macro task for this:
-      // https://html.spec.whatwg.org/multipage/webappapis.html#clean-up-after-running-script
-      setTimeout(() => {
-        // Update drag over node
-        this.setState({
-          _dragOverNodeKey: eventKey,
-          _dropPosition: dropPosition,
-        });
-
-        // Side effect for delay drag
-        if (!this.delayedDragEnterLogic) {
-          this.delayedDragEnterLogic = {};
-        }
-        Object.keys(this.delayedDragEnterLogic).forEach(key => {
-          clearTimeout(this.delayedDragEnterLogic[key]);
-        });
-        this.delayedDragEnterLogic[pos] = setTimeout(() => {
-          const newExpandedKeys = arrAdd(expandedKeys, eventKey);
-          if (!hasProp(this, 'expandedKeys')) {
-            this.setState({
-              _expandedKeys: newExpandedKeys,
-            });
-          }
-          this.__emit('dragenter', { event, node, expandedKeys: newExpandedKeys });
-        }, 400);
-      }, 0);
-    },
-    onNodeDragOver(event, node) {
-      const { eventKey } = node;
-      const { _dragOverNodeKey, _dropPosition } = this.$data;
-      // Update drag position
-      if (this.dragNode && eventKey === _dragOverNodeKey && node.selectHandle) {
-        const dropPosition = calcDropPosition(event, node);
-
-        if (dropPosition === _dropPosition) return;
-
-        this.setState({
-          _dropPosition: dropPosition,
-        });
-      }
-      this.__emit('dragover', { event, node });
-    },
-    onNodeDragLeave(event, node) {
-      this.setState({
-        _dragOverNodeKey: '',
-      });
-      this.__emit('dragleave', { event, node });
-    },
-    onNodeDragEnd(event, node) {
-      this.setState({
-        _dragOverNodeKey: '',
-      });
-      this.__emit('dragend', { event, node });
-      this.dragNode = null;
-    },
-    onNodeDrop(event, node) {
-      const { _dragNodesKeys = [], _dropPosition } = this.$data;
-
-      const { eventKey, pos } = node;
-
-      this.setState({
-        _dragOverNodeKey: '',
-      });
-
-      if (_dragNodesKeys.indexOf(eventKey) !== -1) {
-        warning(false, "Can not drop to dragNode(include it's children node)");
-        return;
-      }
-
-      const posArr = posToArr(pos);
-
-      const dropResult = {
-        event,
-        node,
-        dragNode: this.dragNode,
-        dragNodesKeys: _dragNodesKeys.slice(),
-        dropPosition: _dropPosition + Number(posArr[posArr.length - 1]),
-        dropToGap: false,
-      };
-
-      if (_dropPosition !== 0) {
-        dropResult.dropToGap = true;
-      }
-      this.__emit('drop', dropResult);
-      this.dragNode = null;
-    },
-
-    onNodeClick(e, treeNode) {
-      this.__emit('click', e, treeNode);
-    },
-
-    onNodeDoubleClick(e, treeNode) {
-      this.__emit('dblclick', e, treeNode);
-    },
-
-    onNodeSelect(e, treeNode) {
-      let { _selectedKeys: selectedKeys } = this.$data;
-      const { _keyEntities: keyEntities } = this.$data;
-      const { multiple } = this.$props;
-      const { selected, eventKey } = getOptionProps(treeNode);
-      const targetSelected = !selected;
-      // Update selected keys
-      if (!targetSelected) {
-        selectedKeys = arrDel(selectedKeys, eventKey);
-      } else if (!multiple) {
-        selectedKeys = [eventKey];
-      } else {
-        selectedKeys = arrAdd(selectedKeys, eventKey);
-      }
-
-      // [Legacy] Not found related usage in doc or upper libs
-      const selectedNodes = selectedKeys
-        .map(key => {
-          const entity = keyEntities.get(key);
-          if (!entity) return null;
-
-          return entity.node;
-        })
-        .filter(node => node);
-
-      this.setUncontrolledState({ _selectedKeys: selectedKeys });
-
-      const eventObj = {
-        event: 'select',
-        selected: targetSelected,
-        node: treeNode,
-        selectedNodes,
-        nativeEvent: e,
-      };
-      this.__emit('select', selectedKeys, eventObj);
-    },
-    onNodeCheck(e, treeNode, checked) {
-      const {
-        _keyEntities: keyEntities,
-        _checkedKeys: oriCheckedKeys,
-        _halfCheckedKeys: oriHalfCheckedKeys,
-      } = this.$data;
-      const { checkStrictly } = this.$props;
-      const { eventKey } = getOptionProps(treeNode);
-
-      // Prepare trigger arguments
-      let checkedObj;
-      const eventObj = {
-        event: 'check',
-        node: treeNode,
-        checked,
-        nativeEvent: e,
-      };
-
-      if (checkStrictly) {
-        const checkedKeys = checked
-          ? arrAdd(oriCheckedKeys, eventKey)
-          : arrDel(oriCheckedKeys, eventKey);
-        const halfCheckedKeys = arrDel(oriHalfCheckedKeys, eventKey);
-        checkedObj = { checked: checkedKeys, halfChecked: halfCheckedKeys };
-
-        eventObj.checkedNodes = checkedKeys
-          .map(key => keyEntities.get(key))
-          .filter(entity => entity)
-          .map(entity => entity.node);
-
-        this.setUncontrolledState({ _checkedKeys: checkedKeys });
-      } else {
-        const { checkedKeys, halfCheckedKeys } = conductCheck([eventKey], checked, keyEntities, {
-          checkedKeys: oriCheckedKeys,
-          halfCheckedKeys: oriHalfCheckedKeys,
-        });
-
-        checkedObj = checkedKeys;
-
-        // [Legacy] This is used for `rc-tree-select`
-        eventObj.checkedNodes = [];
-        eventObj.checkedNodesPositions = [];
-        eventObj.halfCheckedKeys = halfCheckedKeys;
-
-        checkedKeys.forEach(key => {
-          const entity = keyEntities.get(key);
-          if (!entity) return;
-
-          const { node, pos } = entity;
-
-          eventObj.checkedNodes.push(node);
-          eventObj.checkedNodesPositions.push({ node, pos });
-        });
-
-        this.setUncontrolledState({
-          _checkedKeys: checkedKeys,
-          _halfCheckedKeys: halfCheckedKeys,
-        });
-      }
-      this.__emit('check', checkedObj, eventObj);
-    },
-    onNodeLoad(treeNode) {
-      return new Promise(resolve => {
-        // We need to get the latest state of loading/loaded keys
-        this.setState(({ _loadedKeys: loadedKeys = [], _loadingKeys: loadingKeys = [] }) => {
-          const { loadData } = this.$props;
-          const { eventKey } = getOptionProps(treeNode);
-
-          if (
-            !loadData ||
-            loadedKeys.indexOf(eventKey) !== -1 ||
-            loadingKeys.indexOf(eventKey) !== -1
-          ) {
-            return {};
-          }
-
-          // Process load data
-          const promise = loadData(treeNode);
-          promise.then(() => {
-            const { _loadedKeys: currentLoadedKeys, _loadingKeys: currentLoadingKeys } = this.$data;
-            const newLoadedKeys = arrAdd(currentLoadedKeys, eventKey);
-            const newLoadingKeys = arrDel(currentLoadingKeys, eventKey);
-
-            // onLoad should trigger before internal setState to avoid `loadData` trigger twice.
-            // https://github.com/ant-design/ant-design/issues/12464
-            this.__emit('load', newLoadedKeys, {
-              event: 'load',
-              node: treeNode,
-            });
-            this.setUncontrolledState({
-              _loadedKeys: newLoadedKeys,
-            });
-            this.setState({
-              _loadingKeys: newLoadingKeys,
-            });
-            resolve();
-          });
-
-          return {
-            _loadingKeys: arrAdd(loadingKeys, eventKey),
-          };
-        });
-      });
-    },
-
-    onNodeExpand(e, treeNode) {
-      let { _expandedKeys: expandedKeys } = this.$data;
-      const { loadData } = this.$props;
-      const { eventKey, expanded } = getOptionProps(treeNode);
-
-      // Update selected keys
-      const index = expandedKeys.indexOf(eventKey);
-      const targetExpanded = !expanded;
-
-      warning(
-        (expanded && index !== -1) || (!expanded && index === -1),
-        'Expand state not sync with index check',
-      );
-
-      if (targetExpanded) {
-        expandedKeys = arrAdd(expandedKeys, eventKey);
-      } else {
-        expandedKeys = arrDel(expandedKeys, eventKey);
-      }
-
-      this.setUncontrolledState({ _expandedKeys: expandedKeys });
-      this.__emit('expand', expandedKeys, {
-        node: treeNode,
-        expanded: targetExpanded,
-        nativeEvent: e,
-      });
-
-      // Async Load data
-      if (targetExpanded && loadData) {
-        const loadPromise = this.onNodeLoad(treeNode);
-        return loadPromise
-          ? loadPromise.then(() => {
-              // [Legacy] Refresh logic
-              this.setUncontrolledState({ _expandedKeys: expandedKeys });
-            })
-          : null;
-      }
-
-      return null;
-    },
-
-    onNodeMouseEnter(event, node) {
-      this.__emit('mouseenter', { event, node });
-    },
-
-    onNodeMouseLeave(event, node) {
-      this.__emit('mouseleave', { event, node });
-    },
-
-    onNodeContextMenu(event, node) {
-      event.preventDefault();
-      this.__emit('rightClick', { event, node });
-    },
-
-    /**
-     * Only update the value which is not in props
-     */
-    setUncontrolledState(state) {
-      let needSync = false;
-      const newState = {};
-      const props = getOptionProps(this);
-      Object.keys(state).forEach(name => {
-        if (name.replace('_', '') in props) return;
-        needSync = true;
-        newState[name] = state[name];
-      });
-
-      if (needSync) {
-        this.setState(newState);
-      }
-    },
-
-    registerTreeNode(key, node) {
-      if (node) {
-        this.domTreeNodes[key] = node;
-      } else {
-        delete this.domTreeNodes[key];
-      }
-    },
-
-    isKeyChecked(key) {
-      const { _checkedKeys: checkedKeys = [] } = this.$data;
-      return checkedKeys.indexOf(key) !== -1;
-    },
-
-    /**
-     * [Legacy] Original logic use `key` as tracking clue.
-     * We have to use `cloneElement` to pass `key`.
-     */
-    renderTreeNode(child, index, level = 0) {
-      const {
-        _keyEntities: keyEntities,
-        _expandedKeys: expandedKeys = [],
-        _selectedKeys: selectedKeys = [],
-        _halfCheckedKeys: halfCheckedKeys = [],
-        _loadedKeys: loadedKeys = [],
-        _loadingKeys: loadingKeys = [],
-        _dragOverNodeKey: dragOverNodeKey,
-        _dropPosition: dropPosition,
-      } = this.$data;
-      const pos = getPosition(level, index);
-      let key = child.key;
-      if (!key && (key === undefined || key === null)) {
-        key = pos;
-      }
-      if (!keyEntities.get(key)) {
-        warnOnlyTreeNode();
-        return null;
-      }
-
-      return cloneElement(child, {
-        eventKey: key,
-        expanded: expandedKeys.indexOf(key) !== -1,
-        selected: selectedKeys.indexOf(key) !== -1,
-        loaded: loadedKeys.indexOf(key) !== -1,
-        loading: loadingKeys.indexOf(key) !== -1,
-        checked: this.isKeyChecked(key),
-        halfChecked: halfCheckedKeys.indexOf(key) !== -1,
-        pos,
-
-        // [Legacy] Drag props
-        dragOver: dragOverNodeKey === key && dropPosition === 0,
-        dragOverGapTop: dragOverNodeKey === key && dropPosition === -1,
-        dragOverGapBottom: dragOverNodeKey === key && dropPosition === 1,
-        key,
-      });
-    },
-  },
-
-  render() {
-    const { _treeNode: treeNode } = this.$data;
-    const { prefixCls, focusable, showLine, tabindex = 0 } = this.$props;
-    const domProps = getDataAndAria({ ...this.$props, ...this.$attrs });
-    const { class: className, style } = this.$attrs;
-    return (
-      <ul
-        {...domProps}
-        class={classNames(prefixCls, className, {
-          [`${prefixCls}-show-line`]: showLine,
-        })}
-        style={style}
-        role="tree"
-        unselectable="on"
-        tabindex={focusable ? tabindex : null}
-      >
-        {mapChildren(treeNode, (node, index) => this.renderTreeNode(node, index))}
-      </ul>
-    );
-  },
-});
-
-export { Tree };
-
-export default Tree;
diff --git a/components/vc-tree/src/TreeNode.jsx b/components/vc-tree/src/TreeNode.jsx
deleted file mode 100644
index aee09368e..000000000
--- a/components/vc-tree/src/TreeNode.jsx
+++ /dev/null
@@ -1,578 +0,0 @@
-import { defineComponent, inject, provide } from 'vue';
-import PropTypes from '../../_util/vue-types';
-import classNames from '../../_util/classNames';
-import { getNodeChildren, mapChildren, warnOnlyTreeNode, getDataAndAria } from './util';
-import { initDefaultProps, getComponent, getSlot } from '../../_util/props-util';
-import BaseMixin from '../../_util/BaseMixin';
-import { getTransitionProps, Transition } from '../../_util/transition';
-
-function noop() {}
-const ICON_OPEN = 'open';
-const ICON_CLOSE = 'close';
-
-const defaultTitle = '---';
-
-const TreeNode = defineComponent({
-  name: 'TreeNode',
-  mixins: [BaseMixin],
-  inheritAttrs: false,
-  __ANT_TREE_NODE: true,
-  props: initDefaultProps(
-    {
-      eventKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), // Pass by parent `cloneElement`
-      prefixCls: PropTypes.string,
-      // className: PropTypes.string,
-      root: PropTypes.object,
-      // onSelect: PropTypes.func,
-
-      // By parent
-      expanded: PropTypes.looseBool,
-      selected: PropTypes.looseBool,
-      checked: PropTypes.looseBool,
-      loaded: PropTypes.looseBool,
-      loading: PropTypes.looseBool,
-      halfChecked: PropTypes.looseBool,
-      title: PropTypes.any,
-      pos: PropTypes.string,
-      dragOver: PropTypes.looseBool,
-      dragOverGapTop: PropTypes.looseBool,
-      dragOverGapBottom: PropTypes.looseBool,
-
-      // By user
-      isLeaf: PropTypes.looseBool,
-      checkable: PropTypes.looseBool,
-      selectable: PropTypes.looseBool,
-      disabled: PropTypes.looseBool,
-      disableCheckbox: PropTypes.looseBool,
-      icon: PropTypes.any,
-      dataRef: PropTypes.object,
-      switcherIcon: PropTypes.any,
-      label: PropTypes.any,
-      value: PropTypes.any,
-    },
-    {},
-  ),
-  setup() {
-    return {
-      vcTree: inject('vcTree', {}),
-      vcTreeNode: inject('vcTreeNode', {}),
-    };
-  },
-
-  data() {
-    this.children = null;
-    return {
-      dragNodeHighlight: false,
-    };
-  },
-  created() {
-    provide('vcTreeNode', this);
-  },
-  // Isomorphic needn't load data in server side
-  mounted() {
-    const {
-      eventKey,
-      vcTree: { registerTreeNode },
-    } = this;
-    this.syncLoadData(this.$props);
-    registerTreeNode && registerTreeNode(eventKey, this);
-  },
-  updated() {
-    this.syncLoadData(this.$props);
-  },
-  beforeUnmount() {
-    const {
-      eventKey,
-      vcTree: { registerTreeNode },
-    } = this;
-    registerTreeNode && registerTreeNode(eventKey, null);
-  },
-
-  methods: {
-    onSelectorClick(e) {
-      // Click trigger before select/check operation
-      const {
-        vcTree: { onNodeClick },
-      } = this;
-      onNodeClick(e, this);
-      if (this.isSelectable()) {
-        this.onSelect(e);
-      } else {
-        this.onCheck(e);
-      }
-    },
-
-    onSelectorDoubleClick(e) {
-      const {
-        vcTree: { onNodeDoubleClick },
-      } = this;
-      onNodeDoubleClick(e, this);
-    },
-
-    onSelect(e) {
-      if (this.isDisabled()) return;
-
-      const {
-        vcTree: { onNodeSelect },
-      } = this;
-      e.preventDefault();
-      onNodeSelect(e, this);
-    },
-
-    onCheck(e) {
-      if (this.isDisabled()) return;
-
-      const { disableCheckbox, checked } = this;
-      const {
-        vcTree: { onNodeCheck },
-      } = this;
-
-      if (!this.isCheckable() || disableCheckbox) return;
-
-      e.preventDefault();
-      const targetChecked = !checked;
-      onNodeCheck(e, this, targetChecked);
-    },
-
-    onMouseEnter(e) {
-      const {
-        vcTree: { onNodeMouseEnter },
-      } = this;
-      onNodeMouseEnter(e, this);
-    },
-
-    onMouseLeave(e) {
-      const {
-        vcTree: { onNodeMouseLeave },
-      } = this;
-      onNodeMouseLeave(e, this);
-    },
-
-    onContextMenu(e) {
-      const {
-        vcTree: { onNodeContextMenu },
-      } = this;
-      onNodeContextMenu(e, this);
-    },
-
-    onDragStart(e) {
-      const {
-        vcTree: { onNodeDragStart },
-      } = this;
-
-      e.stopPropagation();
-      this.setState({
-        dragNodeHighlight: true,
-      });
-      onNodeDragStart(e, this);
-
-      try {
-        // ie throw error
-        // firefox-need-it
-        e.dataTransfer.setData('text/plain', '');
-      } catch (error) {
-        // empty
-      }
-    },
-
-    onDragEnter(e) {
-      const {
-        vcTree: { onNodeDragEnter },
-      } = this;
-
-      e.preventDefault();
-      e.stopPropagation();
-      onNodeDragEnter(e, this);
-    },
-
-    onDragOver(e) {
-      const {
-        vcTree: { onNodeDragOver },
-      } = this;
-
-      e.preventDefault();
-      e.stopPropagation();
-      onNodeDragOver(e, this);
-    },
-
-    onDragLeave(e) {
-      const {
-        vcTree: { onNodeDragLeave },
-      } = this;
-
-      e.stopPropagation();
-      onNodeDragLeave(e, this);
-    },
-
-    onDragEnd(e) {
-      const {
-        vcTree: { onNodeDragEnd },
-      } = this;
-
-      e.stopPropagation();
-      this.setState({
-        dragNodeHighlight: false,
-      });
-      onNodeDragEnd(e, this);
-    },
-
-    onDrop(e) {
-      const {
-        vcTree: { onNodeDrop },
-      } = this;
-
-      e.preventDefault();
-      e.stopPropagation();
-      this.setState({
-        dragNodeHighlight: false,
-      });
-      onNodeDrop(e, this);
-    },
-
-    // Disabled item still can be switch
-    onExpand(e) {
-      const {
-        vcTree: { onNodeExpand },
-      } = this;
-      onNodeExpand(e, this);
-    },
-    // Drag usage
-    setSelectHandle(node) {
-      this.selectHandle = node;
-    },
-
-    getNodeChildren() {
-      const originList = this.children;
-      const targetList = getNodeChildren(originList);
-
-      if (originList.length !== targetList.length) {
-        warnOnlyTreeNode();
-      }
-
-      return targetList;
-    },
-
-    getNodeState() {
-      const { expanded } = this;
-
-      if (this.isLeaf2()) {
-        return null;
-      }
-
-      return expanded ? ICON_OPEN : ICON_CLOSE;
-    },
-
-    isLeaf2() {
-      const { isLeaf, loaded } = this;
-      const {
-        vcTree: { loadData },
-      } = this;
-
-      const hasChildren = this.getNodeChildren().length !== 0;
-      if (isLeaf === false) {
-        return false;
-      }
-      return isLeaf || (!loadData && !hasChildren) || (loadData && loaded && !hasChildren);
-    },
-
-    isDisabled() {
-      const { disabled } = this;
-      const {
-        vcTree: { disabled: treeDisabled },
-      } = this;
-
-      // Follow the logic of Selectable
-      if (disabled === false) {
-        return false;
-      }
-
-      return !!(treeDisabled || disabled);
-    },
-
-    isCheckable() {
-      const { checkable } = this.$props;
-      const {
-        vcTree: { checkable: treeCheckable },
-      } = this;
-
-      // Return false if tree or treeNode is not checkable
-      if (!treeCheckable || checkable === false) return false;
-      return treeCheckable;
-    },
-
-    // Load data to avoid default expanded tree without data
-    syncLoadData(props) {
-      const { expanded, loading, loaded } = props;
-      const {
-        vcTree: { loadData, onNodeLoad },
-      } = this;
-      if (loading) return;
-      // read from state to avoid loadData at same time
-      if (loadData && expanded && !this.isLeaf2()) {
-        // We needn't reload data when has children in sync logic
-        // It's only needed in node expanded
-        const hasChildren = this.getNodeChildren().length !== 0;
-        if (!hasChildren && !loaded) {
-          onNodeLoad(this);
-        }
-      }
-    },
-
-    isSelectable() {
-      const { selectable } = this;
-      const {
-        vcTree: { selectable: treeSelectable },
-      } = this;
-
-      // Ignore when selectable is undefined or null
-      if (typeof selectable === 'boolean') {
-        return selectable;
-      }
-
-      return treeSelectable;
-    },
-
-    // Switcher
-    renderSwitcher() {
-      const { expanded } = this;
-      const {
-        vcTree: { prefixCls },
-      } = this;
-      const switcherIcon =
-        getComponent(this, 'switcherIcon', {}, false) ||
-        getComponent(this.vcTree, 'switcherIcon', {}, false);
-      if (this.isLeaf2()) {
-        return (
-          <span
-            key="switcher"
-            class={classNames(`${prefixCls}-switcher`, `${prefixCls}-switcher-noop`)}
-          >
-            {typeof switcherIcon === 'function'
-              ? switcherIcon({ ...this.$props, ...this.$props.dataRef, isLeaf: true })
-              : switcherIcon}
-          </span>
-        );
-      }
-
-      const switcherCls = classNames(
-        `${prefixCls}-switcher`,
-        `${prefixCls}-switcher_${expanded ? ICON_OPEN : ICON_CLOSE}`,
-      );
-      return (
-        <span key="switcher" onClick={this.onExpand} class={switcherCls}>
-          {typeof switcherIcon === 'function'
-            ? switcherIcon({ ...this.$props, ...this.$props.dataRef, isLeaf: false })
-            : switcherIcon}
-        </span>
-      );
-    },
-
-    // Checkbox
-    renderCheckbox() {
-      const { checked, halfChecked, disableCheckbox } = this;
-      const {
-        vcTree: { prefixCls },
-      } = this;
-      const disabled = this.isDisabled();
-      const checkable = this.isCheckable();
-
-      if (!checkable) return null;
-
-      // [Legacy] Custom element should be separate with `checkable` in future
-      const $custom = typeof checkable !== 'boolean' ? checkable : null;
-
-      return (
-        <span
-          key="checkbox"
-          class={classNames(
-            `${prefixCls}-checkbox`,
-            checked && `${prefixCls}-checkbox-checked`,
-            !checked && halfChecked && `${prefixCls}-checkbox-indeterminate`,
-            (disabled || disableCheckbox) && `${prefixCls}-checkbox-disabled`,
-          )}
-          onClick={this.onCheck}
-        >
-          {$custom}
-        </span>
-      );
-    },
-
-    renderIcon() {
-      const { loading } = this;
-      const {
-        vcTree: { prefixCls },
-      } = this;
-
-      return (
-        <span
-          key="icon"
-          class={classNames(
-            `${prefixCls}-iconEle`,
-            `${prefixCls}-icon__${this.getNodeState() || 'docu'}`,
-            loading && `${prefixCls}-icon_loading`,
-          )}
-        />
-      );
-    },
-
-    // Icon + Title
-    renderSelector() {
-      const { selected, loading, dragNodeHighlight } = this;
-      const icon = getComponent(this, 'icon', {}, false);
-      const {
-        vcTree: { prefixCls, showIcon, icon: treeIcon, draggable, loadData },
-      } = this;
-      const disabled = this.isDisabled();
-      const title = getComponent(this, 'title', {}, false);
-      const wrapClass = `${prefixCls}-node-content-wrapper`;
-
-      // Icon - Still show loading icon when loading without showIcon
-      let $icon;
-
-      if (showIcon) {
-        const currentIcon = icon || treeIcon;
-        $icon = currentIcon ? (
-          <span class={classNames(`${prefixCls}-iconEle`, `${prefixCls}-icon__customize`)}>
-            {typeof currentIcon === 'function'
-              ? currentIcon({ ...this.$props, ...this.$props.dataRef })
-              : currentIcon}
-          </span>
-        ) : (
-          this.renderIcon()
-        );
-      } else if (loadData && loading) {
-        $icon = this.renderIcon();
-      }
-
-      const currentTitle = title;
-      let $title = currentTitle ? (
-        <span class={`${prefixCls}-title`}>
-          {typeof currentTitle === 'function'
-            ? currentTitle({ ...this.$props, ...this.$props.dataRef })
-            : currentTitle}
-        </span>
-      ) : (
-        <span class={`${prefixCls}-title`}>{defaultTitle}</span>
-      );
-      return (
-        <span
-          key="selector"
-          ref={this.setSelectHandle}
-          title={typeof title === 'string' ? title : ''}
-          class={classNames(
-            `${wrapClass}`,
-            `${wrapClass}-${this.getNodeState() || 'normal'}`,
-            !disabled && (selected || dragNodeHighlight) && `${prefixCls}-node-selected`,
-            !disabled && draggable && 'draggable',
-          )}
-          draggable={(!disabled && draggable) || undefined}
-          aria-grabbed={(!disabled && draggable) || undefined}
-          onMouseenter={this.onMouseEnter}
-          onMouseleave={this.onMouseLeave}
-          onContextmenu={this.onContextMenu}
-          onClick={this.onSelectorClick}
-          onDblclick={this.onSelectorDoubleClick}
-          onDragstart={draggable ? this.onDragStart : noop}
-        >
-          {$icon}
-          {$title}
-        </span>
-      );
-    },
-
-    // Children list wrapped with `Animation`
-    renderChildren() {
-      const { expanded, pos } = this;
-      const {
-        vcTree: { prefixCls, openTransitionName, openAnimation, renderTreeNode },
-      } = this;
-
-      let animProps = {};
-      if (openTransitionName) {
-        animProps = getTransitionProps(openTransitionName);
-      } else if (typeof openAnimation === 'object') {
-        animProps = { ...openAnimation, css: false, ...animProps };
-      }
-
-      // Children TreeNode
-      const nodeList = this.getNodeChildren();
-
-      if (nodeList.length === 0) {
-        return null;
-      }
-
-      let $children;
-      if (expanded) {
-        $children = (
-          <ul
-            class={classNames(
-              `${prefixCls}-child-tree`,
-              expanded && `${prefixCls}-child-tree-open`,
-            )}
-            data-expanded={expanded}
-            role="group"
-          >
-            {mapChildren(nodeList, (node, index) => renderTreeNode(node, index, pos))}
-          </ul>
-        );
-      }
-
-      return <Transition {...animProps}>{$children}</Transition>;
-    },
-  },
-
-  render() {
-    this.children = getSlot(this);
-    const {
-      dragOver,
-      dragOverGapTop,
-      dragOverGapBottom,
-      isLeaf,
-      expanded,
-      selected,
-      checked,
-      halfChecked,
-      loading,
-    } = this.$props;
-    const {
-      vcTree: { prefixCls, filterTreeNode, draggable },
-    } = this;
-    const disabled = this.isDisabled();
-    const dataOrAriaAttributeProps = getDataAndAria({ ...this.$props, ...this.$attrs });
-    const { class: className, style } = this.$attrs;
-    return (
-      <li
-        class={{
-          [className]: className,
-          [`${prefixCls}-treenode-disabled`]: disabled,
-          [`${prefixCls}-treenode-switcher-${expanded ? 'open' : 'close'}`]: !isLeaf,
-          [`${prefixCls}-treenode-checkbox-checked`]: checked,
-          [`${prefixCls}-treenode-checkbox-indeterminate`]: halfChecked,
-          [`${prefixCls}-treenode-selected`]: selected,
-          [`${prefixCls}-treenode-loading`]: loading,
-          'drag-over': !disabled && dragOver,
-          'drag-over-gap-top': !disabled && dragOverGapTop,
-          'drag-over-gap-bottom': !disabled && dragOverGapBottom,
-          'filter-node': filterTreeNode && filterTreeNode(this),
-        }}
-        style={style}
-        role="treeitem"
-        onDragenter={draggable ? this.onDragEnter : noop}
-        onDragover={draggable ? this.onDragOver : noop}
-        onDragleave={draggable ? this.onDragLeave : noop}
-        onDrop={draggable ? this.onDrop : noop}
-        onDragend={draggable ? this.onDragEnd : noop}
-        {...dataOrAriaAttributeProps}
-      >
-        {this.renderSwitcher()}
-        {this.renderCheckbox()}
-        {this.renderSelector()}
-        {this.renderChildren()}
-      </li>
-    );
-  },
-});
-
-TreeNode.isTreeNode = 1;
-
-export default TreeNode;
diff --git a/components/vc-tree/src/index.js b/components/vc-tree/src/index.js
deleted file mode 100644
index a37c0d201..000000000
--- a/components/vc-tree/src/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import Tree from './Tree';
-import TreeNode from './TreeNode';
-Tree.TreeNode = TreeNode;
-
-export default Tree;
diff --git a/components/vc-tree/src/util.js b/components/vc-tree/src/util.js
deleted file mode 100644
index ed5a5e307..000000000
--- a/components/vc-tree/src/util.js
+++ /dev/null
@@ -1,426 +0,0 @@
-/* eslint no-loop-func: 0*/
-import warning from 'warning';
-import TreeNode from './TreeNode';
-import { getOptionProps, getSlot } from '../../_util/props-util';
-const DRAG_SIDE_RANGE = 0.25;
-const DRAG_MIN_GAP = 2;
-
-let onlyTreeNodeWarned = false;
-
-export function warnOnlyTreeNode() {
-  if (onlyTreeNodeWarned) return;
-
-  onlyTreeNodeWarned = true;
-  warning(false, 'Tree only accept TreeNode as children.');
-}
-
-export function arrDel(list, value) {
-  const clone = list.slice();
-  const index = clone.indexOf(value);
-  if (index >= 0) {
-    clone.splice(index, 1);
-  }
-  return clone;
-}
-
-export function arrAdd(list, value) {
-  const clone = list.slice();
-  if (clone.indexOf(value) === -1) {
-    clone.push(value);
-  }
-  return clone;
-}
-
-export function posToArr(pos) {
-  return pos.split('-');
-}
-
-export function getPosition(level, index) {
-  return `${level}-${index}`;
-}
-
-export function isTreeNode(node) {
-  return node.type && node.type.isTreeNode;
-}
-
-export function getNodeChildren(children = []) {
-  return children.filter(isTreeNode);
-}
-
-export function isCheckDisabled(node) {
-  const { disabled, disableCheckbox, checkable } = getOptionProps(node) || {};
-  return !!(disabled || disableCheckbox) || checkable === false;
-}
-
-export function traverseTreeNodes(treeNodes, callback) {
-  function processNode(node, index, parent) {
-    const children = node ? getSlot(node) : treeNodes;
-    const pos = node ? getPosition(parent.pos, index) : 0;
-
-    // Filter children
-    const childList = getNodeChildren(children);
-
-    // Process node if is not root
-    if (node) {
-      let key = node.key;
-      if (!key && (key === undefined || key === null)) {
-        key = pos;
-      }
-      const data = {
-        node,
-        index,
-        pos,
-        key,
-        parentPos: parent.node ? parent.pos : null,
-      };
-      callback(data);
-    }
-
-    // Process children node
-    childList.forEach((subNode, subIndex) => {
-      processNode(subNode, subIndex, { node, pos });
-    });
-  }
-
-  processNode(null);
-}
-
-/**
- * Use `rc-util` `toArray` to get the children list which keeps the key.
- * And return single node if children is only one(This can avoid `key` missing check).
- */
-export function mapChildren(children = [], func) {
-  const list = children.map(func);
-  if (list.length === 1) {
-    return list[0];
-  }
-  return list;
-}
-
-export function getDragNodesKeys(treeNodes, node) {
-  const { eventKey, pos } = getOptionProps(node);
-  const dragNodesKeys = [];
-
-  traverseTreeNodes(treeNodes, ({ key }) => {
-    dragNodesKeys.push(key);
-  });
-  dragNodesKeys.push(eventKey || pos);
-  return dragNodesKeys;
-}
-
-export function calcDropPosition(event, treeNode) {
-  const { clientY } = event;
-  const { top, bottom, height } = treeNode.selectHandle.getBoundingClientRect();
-  const des = Math.max(height * DRAG_SIDE_RANGE, DRAG_MIN_GAP);
-
-  if (clientY <= top + des) {
-    return -1;
-  }
-  if (clientY >= bottom - des) {
-    return 1;
-  }
-  return 0;
-}
-
-/**
- * Return selectedKeys according with multiple prop
- * @param selectedKeys
- * @param props
- * @returns [string]
- */
-export function calcSelectedKeys(selectedKeys, props) {
-  if (!selectedKeys) {
-    return undefined;
-  }
-
-  const { multiple } = props;
-  if (multiple) {
-    return selectedKeys.slice();
-  }
-
-  if (selectedKeys.length) {
-    return [selectedKeys[0]];
-  }
-  return selectedKeys;
-}
-
-/**
- * Since React internal will convert key to string,
- * we need do this to avoid `checkStrictly` use number match
- */
-// function keyListToString (keyList) {
-//   if (!keyList) return keyList
-//   return keyList.map(key => String(key))
-// }
-
-const internalProcessProps = (props = {}) => {
-  return {
-    ...props,
-    class: props.class || props.className,
-    style: props.style,
-    key: props.key,
-  };
-};
-export function convertDataToTree(treeData, processor) {
-  if (!treeData) return [];
-
-  const { processProps = internalProcessProps } = processor || {};
-  const list = Array.isArray(treeData) ? treeData : [treeData];
-  return list.map(({ children, ...props }) => {
-    const childrenNodes = convertDataToTree(children, processor);
-    return <TreeNode {...processProps(props)}>{childrenNodes}</TreeNode>;
-  });
-}
-
-// TODO: ========================= NEW LOGIC =========================
-/**
- * Calculate treeNodes entities. `processTreeEntity` is used for `rc-tree-select`
- * @param treeNodes
- * @param processTreeEntity  User can customize the entity
- */
-export function convertTreeToEntities(
-  treeNodes,
-  { initWrapper, processEntity, onProcessFinished } = {},
-) {
-  const posEntities = new Map();
-  const keyEntities = new Map();
-  let wrapper = {
-    posEntities,
-    keyEntities,
-  };
-
-  if (initWrapper) {
-    wrapper = initWrapper(wrapper) || wrapper;
-  }
-
-  traverseTreeNodes(treeNodes, item => {
-    const { node, index, pos, key, parentPos } = item;
-    const entity = { node, index, key, pos };
-
-    posEntities.set(pos, entity);
-    keyEntities.set(key, entity);
-
-    // Fill children
-    entity.parent = posEntities.get(parentPos);
-    if (entity.parent) {
-      entity.parent.children = entity.parent.children || [];
-      entity.parent.children.push(entity);
-    }
-
-    if (processEntity) {
-      processEntity(entity, wrapper);
-    }
-  });
-
-  if (onProcessFinished) {
-    onProcessFinished(wrapper);
-  }
-
-  return wrapper;
-}
-
-/**
- * Parse `checkedKeys` to { checkedKeys, halfCheckedKeys } style
- */
-export function parseCheckedKeys(keys) {
-  if (!keys) {
-    return null;
-  }
-
-  // Convert keys to object format
-  let keyProps;
-  if (Array.isArray(keys)) {
-    // [Legacy] Follow the api doc
-    keyProps = {
-      checkedKeys: keys,
-      halfCheckedKeys: undefined,
-    };
-  } else if (typeof keys === 'object') {
-    keyProps = {
-      checkedKeys: keys.checked || undefined,
-      halfCheckedKeys: keys.halfChecked || undefined,
-    };
-  } else {
-    warning(false, '`checkedKeys` is not an array or an object');
-    return null;
-  }
-
-  // keyProps.checkedKeys = keyListToString(keyProps.checkedKeys)
-  // keyProps.halfCheckedKeys = keyListToString(keyProps.halfCheckedKeys)
-
-  return keyProps;
-}
-
-/**
- * Conduct check state by the keyList. It will conduct up & from the provided key.
- * If the conduct path reach the disabled or already checked / unchecked node will stop conduct.
- * @param keyList       list of keys
- * @param isCheck       is check the node or not
- * @param keyEntities   parsed by `convertTreeToEntities` function in Tree
- * @param checkStatus   Can pass current checked status for process (usually for uncheck operation)
- * @returns {{checkedKeys: [], halfCheckedKeys: []}}
- */
-export function conductCheck(keyList, isCheck, keyEntities, checkStatus = {}) {
-  const checkedKeys = new Map();
-  const halfCheckedKeys = new Map(); // Record the key has some child checked (include child half checked)
-
-  (checkStatus.checkedKeys || []).forEach(key => {
-    checkedKeys.set(key, true);
-  });
-
-  (checkStatus.halfCheckedKeys || []).forEach(key => {
-    halfCheckedKeys.set(key, true);
-  });
-
-  // Conduct up
-  function conductUp(key) {
-    if (checkedKeys.get(key) === isCheck) return;
-
-    const entity = keyEntities.get(key);
-    if (!entity) return;
-
-    const { children, parent, node } = entity;
-
-    if (isCheckDisabled(node)) return;
-
-    // Check child node checked status
-    let everyChildChecked = true;
-    let someChildChecked = false; // Child checked or half checked
-
-    (children || [])
-      .filter(child => !isCheckDisabled(child.node))
-      .forEach(({ key: childKey }) => {
-        const childChecked = checkedKeys.get(childKey);
-        const childHalfChecked = halfCheckedKeys.get(childKey);
-
-        if (childChecked || childHalfChecked) someChildChecked = true;
-        if (!childChecked) everyChildChecked = false;
-      });
-
-    // Update checked status
-    if (isCheck) {
-      checkedKeys.set(key, everyChildChecked);
-    } else {
-      checkedKeys.set(key, false);
-    }
-    halfCheckedKeys.set(key, someChildChecked);
-
-    if (parent) {
-      conductUp(parent.key);
-    }
-  }
-
-  // Conduct down
-  function conductDown(key) {
-    if (checkedKeys.get(key) === isCheck) return;
-
-    const entity = keyEntities.get(key);
-    if (!entity) return;
-
-    const { children, node } = entity;
-
-    if (isCheckDisabled(node)) return;
-
-    checkedKeys.set(key, isCheck);
-
-    (children || []).forEach(child => {
-      conductDown(child.key);
-    });
-  }
-
-  function conduct(key) {
-    const entity = keyEntities.get(key);
-
-    if (!entity) {
-      warning(false, `'${key}' does not exist in the tree.`);
-      return;
-    }
-    const { children, parent, node } = entity;
-    checkedKeys.set(key, isCheck);
-
-    if (isCheckDisabled(node)) return;
-
-    // Conduct down
-    (children || [])
-      .filter(child => !isCheckDisabled(child.node))
-      .forEach(child => {
-        conductDown(child.key);
-      });
-
-    // Conduct up
-    if (parent) {
-      conductUp(parent.key);
-    }
-  }
-
-  (keyList || []).forEach(key => {
-    conduct(key);
-  });
-
-  const checkedKeyList = [];
-  const halfCheckedKeyList = [];
-
-  // Fill checked list
-  for (const [key, value] of checkedKeys) {
-    if (value) {
-      checkedKeyList.push(key);
-    }
-  }
-
-  // Fill half checked list
-  for (const [key, value] of halfCheckedKeys) {
-    if (!checkedKeys.get(key) && value) {
-      halfCheckedKeyList.push(key);
-    }
-  }
-
-  return {
-    checkedKeys: checkedKeyList,
-    halfCheckedKeys: halfCheckedKeyList,
-  };
-}
-
-/**
- * If user use `autoExpandParent` we should get the list of parent node
- * @param keyList
- * @param keyEntities
- */
-export function conductExpandParent(keyList, keyEntities) {
-  const expandedKeys = new Map();
-
-  function conductUp(key) {
-    if (expandedKeys.get(key)) return;
-
-    const entity = keyEntities.get(key);
-    if (!entity) return;
-
-    expandedKeys.set(key, true);
-
-    const { parent, node } = entity;
-    const props = getOptionProps(node);
-    if (props && props.disabled) return;
-
-    if (parent) {
-      conductUp(parent.key);
-    }
-  }
-
-  (keyList || []).forEach(key => {
-    conductUp(key);
-  });
-
-  return [...expandedKeys.keys()];
-}
-
-/**
- * Returns only the data- and aria- key/value pairs
- * @param {object} props
- */
-export function getDataAndAria(props) {
-  return Object.keys(props).reduce((prev, key) => {
-    if (key.substr(0, 5) === 'data-' || key.substr(0, 5) === 'aria-') {
-      prev[key] = props[key];
-    }
-    return prev;
-  }, {});
-}
diff --git a/components/vc-tree/util.tsx b/components/vc-tree/util.tsx
new file mode 100644
index 000000000..c98b87cfb
--- /dev/null
+++ b/components/vc-tree/util.tsx
@@ -0,0 +1,352 @@
+/* eslint-disable no-lonely-if */
+/**
+ * Legacy code. Should avoid to use if you are new to import these code.
+ */
+
+import TreeNode from './TreeNode';
+import type {
+  NodeElement,
+  Key,
+  DataNode,
+  DataEntity,
+  FlattenNode,
+  Direction,
+  DragNodeEvent,
+} from './interface';
+import { warning } from '../vc-util/warning';
+import type { AllowDrop, TreeNodeProps, TreeProps } from './props';
+
+export function arrDel(list: Key[], value: Key) {
+  const clone = list.slice();
+  const index = clone.indexOf(value);
+  if (index >= 0) {
+    clone.splice(index, 1);
+  }
+  return clone;
+}
+
+export function arrAdd(list: Key[], value: Key) {
+  const clone = list.slice();
+  if (clone.indexOf(value) === -1) {
+    clone.push(value);
+  }
+  return clone;
+}
+
+export function posToArr(pos: string) {
+  return pos.split('-');
+}
+
+export function getPosition(level: string | number, index: number) {
+  return `${level}-${index}`;
+}
+
+export function isTreeNode(node: NodeElement) {
+  return node && node.type && (node.type as any).isTreeNode;
+}
+
+export function getDragChildrenKeys(dragNodeKey: Key, keyEntities: Record<Key, DataEntity>): Key[] {
+  // not contains self
+  // self for left or right drag
+  const dragChildrenKeys = [];
+
+  const entity = keyEntities[dragNodeKey];
+  function dig(list: DataEntity[] = []) {
+    list.forEach(({ key, children }) => {
+      dragChildrenKeys.push(key);
+      dig(children);
+    });
+  }
+
+  dig(entity.children);
+
+  return dragChildrenKeys;
+}
+
+export function isLastChild(treeNodeEntity: DataEntity) {
+  if (treeNodeEntity.parent) {
+    const posArr = posToArr(treeNodeEntity.pos);
+    return Number(posArr[posArr.length - 1]) === treeNodeEntity.parent.children.length - 1;
+  }
+  return false;
+}
+
+export function isFirstChild(treeNodeEntity: DataEntity) {
+  const posArr = posToArr(treeNodeEntity.pos);
+  return Number(posArr[posArr.length - 1]) === 0;
+}
+
+// Only used when drag, not affect SSR.
+export function calcDropPosition(
+  event: MouseEvent,
+  _dragNode: DragNodeEvent,
+  targetNode: DragNodeEvent,
+  indent: number,
+  startMousePosition: {
+    x: number;
+    y: number;
+  },
+  allowDrop: AllowDrop,
+  flattenedNodes: FlattenNode[],
+  keyEntities: Record<Key, DataEntity>,
+  expandKeys: Key[],
+  direction: Direction,
+): {
+  dropPosition: -1 | 0 | 1;
+  dropLevelOffset: number;
+  dropTargetKey: Key;
+  dropTargetPos: string;
+  dropContainerKey: Key;
+  dragOverNodeKey: Key;
+  dropAllowed: boolean;
+} {
+  const { clientX, clientY } = event;
+  const { top, height } = (event.target as HTMLElement).getBoundingClientRect();
+  // optional chain for testing
+  const horizontalMouseOffset =
+    (direction === 'rtl' ? -1 : 1) * ((startMousePosition?.x || 0) - clientX);
+  const rawDropLevelOffset = (horizontalMouseOffset - 12) / indent;
+
+  // find abstract drop node by horizontal offset
+  let abstractDropNodeEntity: DataEntity = keyEntities[targetNode.eventKey];
+
+  if (clientY < top + height / 2) {
+    // first half, set abstract drop node to previous node
+    const nodeIndex = flattenedNodes.findIndex(
+      flattenedNode => flattenedNode.data.key === abstractDropNodeEntity.key,
+    );
+    const prevNodeIndex = nodeIndex <= 0 ? 0 : nodeIndex - 1;
+    const prevNodeKey = flattenedNodes[prevNodeIndex].data.key;
+    abstractDropNodeEntity = keyEntities[prevNodeKey];
+  }
+
+  const initialAbstractDropNodeKey = abstractDropNodeEntity.key;
+
+  const abstractDragOverEntity = abstractDropNodeEntity;
+  const dragOverNodeKey = abstractDropNodeEntity.key;
+
+  let dropPosition: -1 | 0 | 1 = 0;
+  let dropLevelOffset = 0;
+
+  // Only allow cross level drop when dragging on a non-expanded node
+  if (!expandKeys.includes(initialAbstractDropNodeKey)) {
+    for (let i = 0; i < rawDropLevelOffset; i += 1) {
+      if (isLastChild(abstractDropNodeEntity)) {
+        abstractDropNodeEntity = abstractDropNodeEntity.parent;
+        dropLevelOffset += 1;
+      } else {
+        break;
+      }
+    }
+  }
+
+  const abstractDropDataNode = abstractDropNodeEntity.node;
+  let dropAllowed = true;
+  if (
+    isFirstChild(abstractDropNodeEntity) &&
+    abstractDropNodeEntity.level === 0 &&
+    clientY < top + height / 2 &&
+    allowDrop({
+      dropNode: abstractDropDataNode,
+      dropPosition: -1,
+    }) &&
+    abstractDropNodeEntity.key === targetNode.eventKey
+  ) {
+    // first half of first node in first level
+    dropPosition = -1;
+  } else if (
+    (abstractDragOverEntity.children || []).length &&
+    expandKeys.includes(dragOverNodeKey)
+  ) {
+    // drop on expanded node
+    // only allow drop inside
+    if (
+      allowDrop({
+        dropNode: abstractDropDataNode,
+        dropPosition: 0,
+      })
+    ) {
+      dropPosition = 0;
+    } else {
+      dropAllowed = false;
+    }
+  } else if (dropLevelOffset === 0) {
+    if (rawDropLevelOffset > -1.5) {
+      // | Node     | <- abstractDropNode
+      // | -^-===== | <- mousePosition
+      // 1. try drop after
+      // 2. do not allow drop
+      if (
+        allowDrop({
+          dropNode: abstractDropDataNode,
+          dropPosition: 1,
+        })
+      ) {
+        dropPosition = 1;
+      } else {
+        dropAllowed = false;
+      }
+    } else {
+      // | Node     | <- abstractDropNode
+      // | ---==^== | <- mousePosition
+      // whether it has children or doesn't has children
+      // always
+      // 1. try drop inside
+      // 2. try drop after
+      // 3. do not allow drop
+      if (
+        allowDrop({
+          dropNode: abstractDropDataNode,
+          dropPosition: 0,
+        })
+      ) {
+        dropPosition = 0;
+      } else if (
+        allowDrop({
+          dropNode: abstractDropDataNode,
+          dropPosition: 1,
+        })
+      ) {
+        dropPosition = 1;
+      } else {
+        dropAllowed = false;
+      }
+    }
+  } else {
+    // | Node1 | <- abstractDropNode
+    //      |  Node2  |
+    // --^--|----=====| <- mousePosition
+    // 1. try insert after Node1
+    // 2. do not allow drop
+    if (
+      allowDrop({
+        dropNode: abstractDropDataNode,
+        dropPosition: 1,
+      })
+    ) {
+      dropPosition = 1;
+    } else {
+      dropAllowed = false;
+    }
+  }
+
+  return {
+    dropPosition,
+    dropLevelOffset,
+    dropTargetKey: abstractDropNodeEntity.key,
+    dropTargetPos: abstractDropNodeEntity.pos,
+    dragOverNodeKey,
+    dropContainerKey: dropPosition === 0 ? null : abstractDropNodeEntity.parent?.key || null,
+    dropAllowed,
+  };
+}
+
+/**
+ * Return selectedKeys according with multiple prop
+ * @param selectedKeys
+ * @param props
+ * @returns [string]
+ */
+export function calcSelectedKeys(selectedKeys: Key[], props: TreeProps) {
+  if (!selectedKeys) return undefined;
+
+  const { multiple } = props;
+  if (multiple) {
+    return selectedKeys.slice();
+  }
+
+  if (selectedKeys.length) {
+    return [selectedKeys[0]];
+  }
+  return selectedKeys;
+}
+
+const internalProcessProps = (props: DataNode): Partial<TreeNodeProps> => props;
+export function convertDataToTree(
+  treeData: DataNode[],
+  processor?: { processProps: (prop: DataNode) => any },
+): NodeElement[] {
+  if (!treeData) return [];
+
+  const { processProps = internalProcessProps } = processor || {};
+  const list = Array.isArray(treeData) ? treeData : [treeData];
+  return list.map(({ children, ...props }): NodeElement => {
+    const childrenNodes = convertDataToTree(children, processor);
+    return <TreeNode {...processProps(props)}>{childrenNodes}</TreeNode>;
+  });
+}
+
+/**
+ * Parse `checkedKeys` to { checkedKeys, halfCheckedKeys } style
+ */
+export function parseCheckedKeys(keys: Key[] | { checked: Key[]; halfChecked: Key[] }) {
+  if (!keys) {
+    return null;
+  }
+
+  // Convert keys to object format
+  let keyProps;
+  if (Array.isArray(keys)) {
+    // [Legacy] Follow the api doc
+    keyProps = {
+      checkedKeys: keys,
+      halfCheckedKeys: undefined,
+    };
+  } else if (typeof keys === 'object') {
+    keyProps = {
+      checkedKeys: keys.checked || undefined,
+      halfCheckedKeys: keys.halfChecked || undefined,
+    };
+  } else {
+    warning(false, '`checkedKeys` is not an array or an object');
+    return null;
+  }
+
+  return keyProps;
+}
+
+/**
+ * If user use `autoExpandParent` we should get the list of parent node
+ * @param keyList
+ * @param keyEntities
+ */
+export function conductExpandParent(keyList: Key[], keyEntities: Record<Key, DataEntity>): Key[] {
+  const expandedKeys = new Set<Key>();
+
+  function conductUp(key: Key) {
+    if (expandedKeys.has(key)) return;
+
+    const entity = keyEntities[key];
+    if (!entity) return;
+
+    expandedKeys.add(key);
+
+    const { parent, node } = entity;
+
+    if (node.disabled) return;
+
+    if (parent) {
+      conductUp(parent.key);
+    }
+  }
+
+  (keyList || []).forEach(key => {
+    conductUp(key);
+  });
+
+  return [...expandedKeys];
+}
+
+/**
+ * Returns only the data- and aria- key/value pairs
+ */
+export function getDataAndAria(props: Partial<TreeProps | TreeNodeProps>) {
+  const omitProps: Record<string, string> = {};
+  Object.keys(props).forEach(key => {
+    if (key.startsWith('data-') || key.startsWith('aria-')) {
+      omitProps[key] = props[key];
+    }
+  });
+
+  return omitProps;
+}
diff --git a/components/vc-tree/utils/conductUtil.ts b/components/vc-tree/utils/conductUtil.ts
new file mode 100644
index 000000000..1eff1685e
--- /dev/null
+++ b/components/vc-tree/utils/conductUtil.ts
@@ -0,0 +1,252 @@
+import { warning } from '../../vc-util/warning';
+import type { Key, DataEntity, DataNode, GetCheckDisabled } from '../interface';
+
+interface ConductReturnType {
+  checkedKeys: Key[];
+  halfCheckedKeys: Key[];
+}
+
+function removeFromCheckedKeys(halfCheckedKeys: Set<Key>, checkedKeys: Set<Key>) {
+  const filteredKeys = new Set<Key>();
+  halfCheckedKeys.forEach(key => {
+    if (!checkedKeys.has(key)) {
+      filteredKeys.add(key);
+    }
+  });
+  return filteredKeys;
+}
+
+export function isCheckDisabled(node: DataNode) {
+  const { disabled, disableCheckbox, checkable } = (node || {}) as DataNode;
+  return !!(disabled || disableCheckbox) || checkable === false;
+}
+
+// Fill miss keys
+function fillConductCheck(
+  keys: Set<Key>,
+  levelEntities: Map<number, Set<DataEntity>>,
+  maxLevel: number,
+  syntheticGetCheckDisabled: GetCheckDisabled<DataNode>,
+): ConductReturnType {
+  const checkedKeys = new Set<Key>(keys);
+  const halfCheckedKeys = new Set<Key>();
+
+  // Add checked keys top to bottom
+  for (let level = 0; level <= maxLevel; level += 1) {
+    const entities = levelEntities.get(level) || new Set();
+    entities.forEach(entity => {
+      const { key, node, children = [] } = entity;
+
+      if (checkedKeys.has(key) && !syntheticGetCheckDisabled(node)) {
+        children
+          .filter(childEntity => !syntheticGetCheckDisabled(childEntity.node))
+          .forEach(childEntity => {
+            checkedKeys.add(childEntity.key);
+          });
+      }
+    });
+  }
+
+  // Add checked keys from bottom to top
+  const visitedKeys = new Set<Key>();
+  for (let level = maxLevel; level >= 0; level -= 1) {
+    const entities = levelEntities.get(level) || new Set();
+    entities.forEach(entity => {
+      const { parent, node } = entity;
+
+      // Skip if no need to check
+      if (syntheticGetCheckDisabled(node) || !entity.parent || visitedKeys.has(entity.parent.key)) {
+        return;
+      }
+
+      // Skip if parent is disabled
+      if (syntheticGetCheckDisabled(entity.parent.node)) {
+        visitedKeys.add(parent.key);
+        return;
+      }
+
+      let allChecked = true;
+      let partialChecked = false;
+
+      (parent.children || [])
+        .filter(childEntity => !syntheticGetCheckDisabled(childEntity.node))
+        .forEach(({ key }) => {
+          const checked = checkedKeys.has(key);
+          if (allChecked && !checked) {
+            allChecked = false;
+          }
+          if (!partialChecked && (checked || halfCheckedKeys.has(key))) {
+            partialChecked = true;
+          }
+        });
+
+      if (allChecked) {
+        checkedKeys.add(parent.key);
+      }
+      if (partialChecked) {
+        halfCheckedKeys.add(parent.key);
+      }
+
+      visitedKeys.add(parent.key);
+    });
+  }
+
+  return {
+    checkedKeys: Array.from(checkedKeys),
+    halfCheckedKeys: Array.from(removeFromCheckedKeys(halfCheckedKeys, checkedKeys)),
+  };
+}
+
+// Remove useless key
+function cleanConductCheck(
+  keys: Set<Key>,
+  halfKeys: Key[],
+  levelEntities: Map<number, Set<DataEntity>>,
+  maxLevel: number,
+  syntheticGetCheckDisabled: GetCheckDisabled<DataNode>,
+): ConductReturnType {
+  const checkedKeys = new Set<Key>(keys);
+  let halfCheckedKeys = new Set<Key>(halfKeys);
+
+  // Remove checked keys from top to bottom
+  for (let level = 0; level <= maxLevel; level += 1) {
+    const entities = levelEntities.get(level) || new Set();
+    entities.forEach(entity => {
+      const { key, node, children = [] } = entity;
+
+      if (!checkedKeys.has(key) && !halfCheckedKeys.has(key) && !syntheticGetCheckDisabled(node)) {
+        children
+          .filter(childEntity => !syntheticGetCheckDisabled(childEntity.node))
+          .forEach(childEntity => {
+            checkedKeys.delete(childEntity.key);
+          });
+      }
+    });
+  }
+
+  // Remove checked keys form bottom to top
+  halfCheckedKeys = new Set<Key>();
+  const visitedKeys = new Set<Key>();
+  for (let level = maxLevel; level >= 0; level -= 1) {
+    const entities = levelEntities.get(level) || new Set();
+
+    entities.forEach(entity => {
+      const { parent, node } = entity;
+
+      // Skip if no need to check
+      if (syntheticGetCheckDisabled(node) || !entity.parent || visitedKeys.has(entity.parent.key)) {
+        return;
+      }
+
+      // Skip if parent is disabled
+      if (syntheticGetCheckDisabled(entity.parent.node)) {
+        visitedKeys.add(parent.key);
+        return;
+      }
+
+      let allChecked = true;
+      let partialChecked = false;
+
+      (parent.children || [])
+        .filter(childEntity => !syntheticGetCheckDisabled(childEntity.node))
+        .forEach(({ key }) => {
+          const checked = checkedKeys.has(key);
+          if (allChecked && !checked) {
+            allChecked = false;
+          }
+          if (!partialChecked && (checked || halfCheckedKeys.has(key))) {
+            partialChecked = true;
+          }
+        });
+
+      if (!allChecked) {
+        checkedKeys.delete(parent.key);
+      }
+      if (partialChecked) {
+        halfCheckedKeys.add(parent.key);
+      }
+
+      visitedKeys.add(parent.key);
+    });
+  }
+
+  return {
+    checkedKeys: Array.from(checkedKeys),
+    halfCheckedKeys: Array.from(removeFromCheckedKeys(halfCheckedKeys, checkedKeys)),
+  };
+}
+
+/**
+ * Conduct with keys.
+ * @param keyList current key list
+ * @param keyEntities key - dataEntity map
+ * @param mode `fill` to fill missing key, `clean` to remove useless key
+ */
+export function conductCheck(
+  keyList: Key[],
+  checked: true | { checked: false; halfCheckedKeys: Key[] },
+  keyEntities: Record<Key, DataEntity>,
+  getCheckDisabled?: GetCheckDisabled<DataNode>,
+): ConductReturnType {
+  const warningMissKeys: Key[] = [];
+
+  let syntheticGetCheckDisabled: GetCheckDisabled<DataNode>;
+  if (getCheckDisabled) {
+    syntheticGetCheckDisabled = getCheckDisabled;
+  } else {
+    syntheticGetCheckDisabled = isCheckDisabled;
+  }
+
+  // We only handle exist keys
+  const keys = new Set<Key>(
+    keyList.filter(key => {
+      const hasEntity = !!keyEntities[key];
+      if (!hasEntity) {
+        warningMissKeys.push(key);
+      }
+
+      return hasEntity;
+    }),
+  );
+  const levelEntities = new Map<number, Set<DataEntity>>();
+  let maxLevel = 0;
+
+  // Convert entities by level for calculation
+  Object.keys(keyEntities).forEach(key => {
+    const entity = keyEntities[key];
+    const { level } = entity;
+
+    let levelSet: Set<DataEntity> = levelEntities.get(level);
+    if (!levelSet) {
+      levelSet = new Set();
+      levelEntities.set(level, levelSet);
+    }
+
+    levelSet.add(entity);
+
+    maxLevel = Math.max(maxLevel, level);
+  });
+
+  warning(
+    !warningMissKeys.length,
+    `Tree missing follow keys: ${warningMissKeys
+      .slice(0, 100)
+      .map(key => `'${key}'`)
+      .join(', ')}`,
+  );
+
+  let result: ConductReturnType;
+  if (checked === true) {
+    result = fillConductCheck(keys, levelEntities, maxLevel, syntheticGetCheckDisabled);
+  } else {
+    result = cleanConductCheck(
+      keys,
+      checked.halfCheckedKeys,
+      levelEntities,
+      maxLevel,
+      syntheticGetCheckDisabled,
+    );
+  }
+
+  return result;
+}
diff --git a/components/vc-tree/utils/diffUtil.ts b/components/vc-tree/utils/diffUtil.ts
new file mode 100644
index 000000000..1c4f5e891
--- /dev/null
+++ b/components/vc-tree/utils/diffUtil.ts
@@ -0,0 +1,45 @@
+import type { Key, FlattenNode } from '../interface';
+
+export function findExpandedKeys(prev: Key[] = [], next: Key[] = []) {
+  const prevLen = prev.length;
+  const nextLen = next.length;
+
+  if (Math.abs(prevLen - nextLen) !== 1) {
+    return { add: false, key: null };
+  }
+
+  function find(shorter: Key[], longer: Key[]) {
+    const cache: Map<Key, boolean> = new Map();
+    shorter.forEach(key => {
+      cache.set(key, true);
+    });
+
+    const keys = longer.filter(key => !cache.has(key));
+
+    return keys.length === 1 ? keys[0] : null;
+  }
+
+  if (prevLen < nextLen) {
+    return {
+      add: true,
+      key: find(prev, next),
+    };
+  }
+
+  return {
+    add: false,
+    key: find(next, prev),
+  };
+}
+
+export function getExpandRange(shorter: FlattenNode[], longer: FlattenNode[], key: Key) {
+  const shorterStartIndex = shorter.findIndex(({ data }) => data.key === key);
+  const shorterEndNode = shorter[shorterStartIndex + 1];
+  const longerStartIndex = longer.findIndex(({ data }) => data.key === key);
+
+  if (shorterEndNode) {
+    const longerEndIndex = longer.findIndex(({ data }) => data.key === shorterEndNode.data.key);
+    return longer.slice(longerStartIndex + 1, longerEndIndex);
+  }
+  return longer.slice(longerStartIndex + 1);
+}
diff --git a/components/vc-tree/utils/treeUtil.ts b/components/vc-tree/utils/treeUtil.ts
new file mode 100644
index 000000000..059e7c65d
--- /dev/null
+++ b/components/vc-tree/utils/treeUtil.ts
@@ -0,0 +1,434 @@
+import type {
+  DataNode,
+  FlattenNode,
+  NodeElement,
+  DataEntity,
+  Key,
+  EventDataNode,
+  GetKey,
+  FieldNames,
+} from '../interface';
+import { getPosition, isTreeNode } from '../util';
+import { warning } from '../../vc-util/warning';
+import Omit from 'omit.js';
+import type { VNodeChild } from 'vue';
+import { camelize } from 'vue';
+import type { TreeNodeProps } from '../props';
+import { filterEmpty } from '../../_util/props-util';
+
+export function getKey(key: Key, pos: string) {
+  if (key !== null && key !== undefined) {
+    return key;
+  }
+  return pos;
+}
+
+export function fillFieldNames(fieldNames?: FieldNames) {
+  const { title, key, children } = fieldNames || {};
+
+  return {
+    title: title || 'title',
+    key: key || 'key',
+    children: children || 'children',
+  };
+}
+
+/**
+ * Warning if TreeNode do not provides key
+ */
+export function warningWithoutKey(treeData: DataNode[], fieldNames: FieldNames) {
+  const keys: Map<string, boolean> = new Map();
+
+  function dig(list: DataNode[], path = '') {
+    (list || []).forEach(treeNode => {
+      const key = treeNode[fieldNames.key];
+      const children = treeNode[fieldNames.children];
+      warning(
+        key !== null && key !== undefined,
+        `Tree node must have a certain key: [${path}${key}]`,
+      );
+
+      const recordKey = String(key);
+      warning(
+        !keys.has(recordKey) || key === null || key === undefined,
+        `Same 'key' exist in the Tree: ${recordKey}`,
+      );
+      keys.set(recordKey, true);
+
+      dig(children, `${path}${recordKey} > `);
+    });
+  }
+
+  dig(treeData);
+}
+
+/**
+ * Convert `children` of Tree into `treeData` structure.
+ */
+export function convertTreeToData(rootNodes: VNodeChild): DataNode[] {
+  function dig(node: VNodeChild = []): DataNode[] {
+    const treeNodes = filterEmpty(node as NodeElement[]);
+    return treeNodes.map(treeNode => {
+      // Filter invalidate node
+      if (!isTreeNode(treeNode)) {
+        warning(!treeNode, 'Tree/TreeNode can only accept TreeNode as children.');
+        return null;
+      }
+      const slots = (treeNode.children as any) || {};
+      const key = treeNode.key as string | number;
+      const props: any = {};
+      for (const [k, v] of Object.entries(treeNode.props)) {
+        props[camelize(k)] = v;
+      }
+      const { isLeaf, checkable, selectable, disabled, disableCheckbox } = props;
+      // 默认值为 undefined
+      const newProps = {
+        isLeaf: isLeaf || isLeaf === '' || undefined,
+        checkable: checkable || checkable === '' || undefined,
+        selectable: selectable || selectable === '' || undefined,
+        disabled: disabled || disabled === '' || undefined,
+        disableCheckbox: disableCheckbox || disableCheckbox === '' || undefined,
+      };
+      const slotsProps = { ...props, ...newProps };
+      const {
+        title = slots.title?.(slotsProps),
+        icon = slots.icon?.(slotsProps),
+        switcherIcon = slots.switcherIcon?.(slotsProps),
+        ...rest
+      } = props;
+      const children = slots.default?.();
+      const dataNode: DataNode = {
+        ...rest,
+        title,
+        icon,
+        switcherIcon,
+        key,
+        isLeaf,
+        ...newProps,
+      };
+
+      const parsedChildren = dig(children);
+      if (parsedChildren.length) {
+        dataNode.children = parsedChildren;
+      }
+
+      return dataNode;
+    });
+  }
+  return dig(rootNodes);
+}
+
+/**
+ * Flat nest tree data into flatten list. This is used for virtual list render.
+ * @param treeNodeList Origin data node list
+ * @param expandedKeys
+ * need expanded keys, provides `true` means all expanded (used in `rc-tree-select`).
+ */
+export function flattenTreeData(
+  treeNodeList: DataNode[],
+  expandedKeys: Key[] | true,
+  fieldNames: FieldNames,
+): FlattenNode[] {
+  const { title: fieldTitle, key: fieldKey, children: fieldChildren } = fillFieldNames(fieldNames);
+
+  const expandedKeySet = new Set(expandedKeys === true ? [] : expandedKeys);
+  const flattenList: FlattenNode[] = [];
+
+  function dig(list: DataNode[], parent: FlattenNode = null): FlattenNode[] {
+    return list.map((treeNode, index) => {
+      const pos: string = getPosition(parent ? parent.pos : '0', index);
+      const mergedKey = getKey(treeNode[fieldKey], pos);
+
+      // Add FlattenDataNode into list
+      const flattenNode: FlattenNode = {
+        ...Omit(treeNode, [fieldTitle, fieldKey, fieldChildren] as any),
+        title: treeNode[fieldTitle],
+        key: mergedKey,
+        parent,
+        pos,
+        children: null,
+        data: treeNode,
+        isStart: [...(parent ? parent.isStart : []), index === 0],
+        isEnd: [...(parent ? parent.isEnd : []), index === list.length - 1],
+      };
+
+      flattenList.push(flattenNode);
+
+      // Loop treeNode children
+      if (expandedKeys === true || expandedKeySet.has(mergedKey)) {
+        flattenNode.children = dig(treeNode[fieldChildren] || [], flattenNode);
+      } else {
+        flattenNode.children = [];
+      }
+
+      return flattenNode;
+    });
+  }
+
+  dig(treeNodeList);
+
+  return flattenList;
+}
+
+type ExternalGetKey = GetKey<DataNode> | string;
+
+interface TraverseDataNodesConfig {
+  childrenPropName?: string;
+  externalGetKey?: ExternalGetKey;
+  fieldNames?: FieldNames;
+}
+
+/**
+ * Traverse all the data by `treeData`.
+ * Please not use it out of the `rc-tree` since we may refactor this code.
+ */
+export function traverseDataNodes(
+  dataNodes: DataNode[],
+  callback: (data: {
+    node: DataNode;
+    index: number;
+    pos: string;
+    key: Key;
+    parentPos: string | number;
+    level: number;
+  }) => void,
+  // To avoid too many params, let use config instead of origin param
+  config?: TraverseDataNodesConfig | string,
+) {
+  let mergedConfig: TraverseDataNodesConfig = {};
+  if (typeof config === 'object') {
+    mergedConfig = config;
+  } else {
+    mergedConfig = { externalGetKey: config };
+  }
+  mergedConfig = mergedConfig || {};
+
+  // Init config
+  const { childrenPropName, externalGetKey, fieldNames } = mergedConfig;
+
+  const { key: fieldKey, children: fieldChildren } = fillFieldNames(fieldNames);
+
+  const mergeChildrenPropName = childrenPropName || fieldChildren;
+
+  // Get keys
+  let syntheticGetKey: (node: DataNode, pos?: string) => Key;
+  if (externalGetKey) {
+    if (typeof externalGetKey === 'string') {
+      syntheticGetKey = (node: DataNode) => (node as any)[externalGetKey as string];
+    } else if (typeof externalGetKey === 'function') {
+      syntheticGetKey = (node: DataNode) => (externalGetKey as GetKey<DataNode>)(node);
+    }
+  } else {
+    syntheticGetKey = (node, pos) => getKey(node[fieldKey], pos);
+  }
+
+  // Process
+  function processNode(
+    node: DataNode,
+    index?: number,
+    parent?: { node: DataNode; pos: string; level: number },
+  ) {
+    const children = node ? node[mergeChildrenPropName] : dataNodes;
+    const pos = node ? getPosition(parent.pos, index) : '0';
+
+    // Process node if is not root
+    if (node) {
+      const key: Key = syntheticGetKey(node, pos);
+      const data = {
+        node,
+        index,
+        pos,
+        key,
+        parentPos: parent.node ? parent.pos : null,
+        level: parent.level + 1,
+      };
+
+      callback(data);
+    }
+
+    // Process children node
+    if (children) {
+      children.forEach((subNode, subIndex) => {
+        processNode(subNode, subIndex, {
+          node,
+          pos,
+          level: parent ? parent.level + 1 : -1,
+        });
+      });
+    }
+  }
+
+  processNode(null);
+}
+
+interface Wrapper {
+  posEntities: Record<string, DataEntity>;
+  keyEntities: Record<Key, DataEntity>;
+}
+
+/**
+ * Convert `treeData` into entity records.
+ */
+export function convertDataToEntities(
+  dataNodes: DataNode[],
+  {
+    initWrapper,
+    processEntity,
+    onProcessFinished,
+    externalGetKey,
+    childrenPropName,
+    fieldNames,
+  }: {
+    initWrapper?: (wrapper: Wrapper) => Wrapper;
+    processEntity?: (entity: DataEntity, wrapper: Wrapper) => void;
+    onProcessFinished?: (wrapper: Wrapper) => void;
+    externalGetKey?: ExternalGetKey;
+    childrenPropName?: string;
+    fieldNames?: FieldNames;
+  } = {},
+  /** @deprecated Use `config.externalGetKey` instead */
+  legacyExternalGetKey?: ExternalGetKey,
+) {
+  // Init config
+  const mergedExternalGetKey = externalGetKey || legacyExternalGetKey;
+
+  const posEntities = {};
+  const keyEntities = {};
+  let wrapper = {
+    posEntities,
+    keyEntities,
+  };
+
+  if (initWrapper) {
+    wrapper = initWrapper(wrapper) || wrapper;
+  }
+
+  traverseDataNodes(
+    dataNodes,
+    item => {
+      const { node, index, pos, key, parentPos, level } = item;
+      const entity: DataEntity = { node, index, key, pos, level };
+
+      const mergedKey = getKey(key, pos);
+
+      posEntities[pos] = entity;
+      keyEntities[mergedKey] = entity;
+
+      // Fill children
+      entity.parent = posEntities[parentPos];
+      if (entity.parent) {
+        entity.parent.children = entity.parent.children || [];
+        entity.parent.children.push(entity);
+      }
+
+      if (processEntity) {
+        processEntity(entity, wrapper);
+      }
+    },
+    { externalGetKey: mergedExternalGetKey, childrenPropName, fieldNames },
+  );
+
+  if (onProcessFinished) {
+    onProcessFinished(wrapper);
+  }
+
+  return wrapper;
+}
+
+export interface TreeNodeRequiredProps {
+  expandedKeys: Key[];
+  selectedKeys: Key[];
+  loadedKeys: Key[];
+  loadingKeys: Key[];
+  checkedKeys: Key[];
+  halfCheckedKeys: Key[];
+  dragOverNodeKey: Key;
+  dropPosition: number;
+  keyEntities: Record<Key, DataEntity>;
+}
+
+/**
+ * Get TreeNode props with Tree props.
+ */
+export function getTreeNodeProps(
+  key: Key,
+  {
+    expandedKeys,
+    selectedKeys,
+    loadedKeys,
+    loadingKeys,
+    checkedKeys,
+    halfCheckedKeys,
+    dragOverNodeKey,
+    dropPosition,
+    keyEntities,
+  }: TreeNodeRequiredProps,
+) {
+  const entity = keyEntities[key];
+
+  const treeNodeProps = {
+    eventKey: key,
+    expanded: expandedKeys.indexOf(key) !== -1,
+    selected: selectedKeys.indexOf(key) !== -1,
+    loaded: loadedKeys.indexOf(key) !== -1,
+    loading: loadingKeys.indexOf(key) !== -1,
+    checked: checkedKeys.indexOf(key) !== -1,
+    halfChecked: halfCheckedKeys.indexOf(key) !== -1,
+    pos: String(entity ? entity.pos : ''),
+
+    // [Legacy] Drag props
+    // Since the interaction of drag is changed, the semantic of the props are
+    // not accuracy, I think it should be finally removed
+    dragOver: dragOverNodeKey === key && dropPosition === 0,
+    dragOverGapTop: dragOverNodeKey === key && dropPosition === -1,
+    dragOverGapBottom: dragOverNodeKey === key && dropPosition === 1,
+  };
+
+  return treeNodeProps;
+}
+
+export function convertNodePropsToEventData(props: TreeNodeProps): EventDataNode {
+  const {
+    data,
+    expanded,
+    selected,
+    checked,
+    loaded,
+    loading,
+    halfChecked,
+    dragOver,
+    dragOverGapTop,
+    dragOverGapBottom,
+    pos,
+    active,
+  } = props;
+  const eventData = {
+    dataRef: data,
+    ...data,
+    expanded,
+    selected,
+    checked,
+    loaded,
+    loading,
+    halfChecked,
+    dragOver,
+    dragOverGapTop,
+    dragOverGapBottom,
+    pos,
+    active,
+    eventKey: data.key,
+  };
+  if (!('props' in eventData)) {
+    Object.defineProperty(eventData, 'props', {
+      get() {
+        warning(
+          false,
+          'Second param return from event is node data instead of TreeNode instance. Please read value directly instead of reading from `props`.',
+        );
+        return props;
+      },
+    });
+  }
+
+  return eventData;
+}
diff --git a/components/vc-virtual-list/List.tsx b/components/vc-virtual-list/List.tsx
index ea9d788cf..0644aba21 100644
--- a/components/vc-virtual-list/List.tsx
+++ b/components/vc-virtual-list/List.tsx
@@ -30,6 +30,20 @@ const ScrollStyle: CSSProperties = {
   overflowAnchor: 'none',
 };
 
+export type ScrollAlign = 'top' | 'bottom' | 'auto';
+export type ScrollConfig =
+  | {
+      index: number;
+      align?: ScrollAlign;
+      offset?: number;
+    }
+  | {
+      key: Key;
+      align?: ScrollAlign;
+      offset?: number;
+    };
+export type ScrollTo = (arg: number | ScrollConfig) => void;
+
 function renderChildren<T>(
   list: T[],
   startIndex: number,
@@ -68,7 +82,7 @@ const List = defineComponent({
     /** If not match virtual scroll condition, Set List still use height of container. */
     fullHeight: PropTypes.looseBool,
     itemKey: {
-      type: [String, Number, Function] as PropType<Key | ((item: object) => Key)>,
+      type: [String, Number, Function] as PropType<Key | ((item: Record<string, any>) => Key)>,
       required: true,
     },
     component: {
@@ -81,7 +95,7 @@ const List = defineComponent({
     onMousedown: PropTypes.func,
     onMouseenter: PropTypes.func,
   },
-  setup(props) {
+  setup(props, { expose }) {
     // ================================= MISC =================================
     const useVirtual = computed(() => {
       const { height, itemHeight, virtual } = props;
@@ -323,6 +337,10 @@ const List = defineComponent({
       },
     );
 
+    expose({
+      scrollTo,
+    });
+
     const componentStyle = computed(() => {
       let cs: CSSProperties | null = null;
       if (props.height) {
@@ -343,7 +361,6 @@ const List = defineComponent({
       state,
       mergedData,
       componentStyle,
-      scrollTo,
       onFallbackScroll,
       onScrollBar,
       componentRef,
diff --git a/components/vc-virtual-list/hooks/useHeights.tsx b/components/vc-virtual-list/hooks/useHeights.tsx
index 10313de09..f84d07f66 100644
--- a/components/vc-virtual-list/hooks/useHeights.tsx
+++ b/components/vc-virtual-list/hooks/useHeights.tsx
@@ -36,7 +36,7 @@ export default function useHeights<T>(
     const origin = instance.get(key);
 
     if (ins) {
-      instance.set(key, ins);
+      instance.set(key, (ins as any).$el || ins);
       collectHeight();
     } else {
       instance.delete(key);
diff --git a/examples/App.vue b/examples/App.vue
index 5bb610266..2f58645d5 100644
--- a/examples/App.vue
+++ b/examples/App.vue
@@ -1,56 +1,80 @@
 <template>
-  <a-radio-group v-model:value="size">
-    <a-radio-button value="large">Large</a-radio-button>
-    <a-radio-button value="default">Default</a-radio-button>
-    <a-radio-button value="small">Small</a-radio-button>
-  </a-radio-group>
-  <br />
-  <br />
-  <a-space direction="vertical">
-    <a-select
+  <a-space direction="vertical" style="width: 100%">
+    <a-tree-select
+      v-model:value="value"
+      show-search
+      style="width: 100%"
+      :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
+      placeholder="Please select"
+      allow-clear
+      tree-default-expand-all
+      :tree-data="treeData"
+    >
+      <template #suffixIcon><SmileOutlined /></template>
+    </a-tree-select>
+
+    <a-tree-select
       v-model:value="value1"
-      :size="size"
-      style="width: 200px"
-      :options="options"
-    ></a-select>
-    <!-- <a-select
-      v-model:value="value2"
-      :options="options"
-      mode="multiple"
-      :size="size"
+      show-search
+      style="width: 100%"
+      :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
       placeholder="Please select"
-      style="width: 200px"
-      @popupScroll="popupScroll"
+      allow-clear
+      multiple
+      show-arrow
+      tree-default-expand-all
+      :tree-data="treeData"
     >
-    </a-select>
-    <a-select
-      v-model:value="value3"
-      :options="options"
-      mode="tags"
-      :size="size"
-      placeholder="Please select"
-      style="width: 200px"
-    >
-    </a-select> -->
+      <template #suffixIcon><SmileOutlined /></template>
+    </a-tree-select>
   </a-space>
 </template>
-<script>
-import demo from '../v2-doc/src/docs/calendar/demo/index.vue';
-// import Affix from '../components/affix';
-import { defineComponent, ref } from 'vue';
+<script lang="ts">
+import { SmileOutlined } from '@ant-design/icons-vue';
+import { TreeSelectProps } from 'ant-design-vue';
+import { defineComponent, ref, watch } from 'vue';
+
 export default defineComponent({
+  components: {
+    SmileOutlined,
+  },
   setup() {
-    const popupScroll = () => {
-      console.log('popupScroll');
-    };
+    const value = ref<string[]>([]);
+    const value1 = ref<string[]>([]);
+    const treeData = ref<TreeSelectProps['treeData']>([
+      {
+        title: 'parent 1',
+        value: 'parent 1',
+        children: [
+          {
+            title: 'parent 1-0',
+            value: 'parent 1-0',
+            children: [
+              {
+                title: 'my leaf',
+                value: 'leaf1',
+              },
+              {
+                title: 'your leaf',
+                value: 'leaf2',
+              },
+            ],
+          },
+          {
+            title: 'parent 1-1',
+            value: 'parent 1-1',
+          },
+        ],
+      },
+    ]);
+    watch(value, () => {
+      console.log('select', value.value);
+    });
 
     return {
-      popupScroll,
-      size: ref('default'),
-      value1: ref('t20'),
-      value2: ref(['a1', 'b2']),
-      value3: ref(['a1', 'b2']),
-      options: [...Array(25)].map((_, i) => ({ value: (i + 10).toString(36) + (i + 1) })),
+      value,
+      value1,
+      treeData,
     };
   },
 });
diff --git a/package.json b/package.json
index 7d89a2ce5..20800bf2f 100644
--- a/package.json
+++ b/package.json
@@ -196,7 +196,7 @@
     "webpack": "^5.0.0",
     "webpack-bundle-analyzer": "^4.4.2",
     "webpack-cli": "^4.6.0",
-    "webpack-dev-server": "^3.1.14",
+    "webpack-dev-server": "^4.0.0",
     "webpack-merge": "^5.0.0",
     "webpackbar": "^5.0.0-3",
     "xhr-mock": "^2.5.1"
diff --git a/tsconfig.json b/tsconfig.json
index dfde3b05b..836611422 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,6 @@
 {
   "compilerOptions": {
     "strictNullChecks": false,
-    "strict": true,
     "moduleResolution": "node",
     "esModuleInterop": true,
     "experimentalDecorators": true,
diff --git a/v2-doc b/v2-doc
index 2aa53d9c7..e7db31900 160000
--- a/v2-doc
+++ b/v2-doc
@@ -1 +1 @@
-Subproject commit 2aa53d9c7aae3b172d8837a0ba9118c3fd8c2038
+Subproject commit e7db31900631a7da14f40b7f2ab0e3f266a26e00
diff --git a/webpack.config.js b/webpack.config.js
index 5260f15f3..c49f6fc09 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -130,7 +130,6 @@ module.exports = {
     historyApiFallback: {
       rewrites: [{ from: /./, to: '/index.html' }],
     },
-    disableHostCheck: true,
     hot: true,
     open: true,
   },