import{_ as n,a as t,q as a,k as s}from"./index.3fe853a6.js";const o={pageData:{title:"Upgrade preparation",description:"",frontmatter:{},headers:[{level:2,title:"Upgrade preparation",slug:"Upgrade-preparation",content:""},{level:2,title:"3.0 What are the incompatible changes",slug:"_3-0-What-are-the-incompatible-changes",content:"Design specification adjustment"},{level:3,title:"Design specification adjustment",slug:"Design-specification-adjustment",content:""},{level:2,title:"Encounter problems",slug:"Encounter-problems",content:"V3 has made a lot of detailed improvements and refactorings. We have collected all known incompatible changes and related effects as much as possible, but there may still be some scenarios that we have not considered. If you encounter problems during the upgrade process, please go to [GitHub issues](https://vuecomponent.github.io/issue-helper/) for feedback. We will respond as soon as possible and improve this document accordingly."}],relativePath:"site/src/vueDocs/migration-v3.en-US.md",content:"This document will help you upgrade from ant-design-vue `2.x` version to ant-design-vue `3.x` version.\n\nThe 2.x version is a compatible version developed for compatibility with Vue 3. It does not bring many new features, and most of the API changes are only for better compatibility with Vue 3. The 3.x version has greatly improved performance, ease of use, and functions. After the 3.x version is stable, we will archive the 2.x version. It is recommended that you upgrade to the 3.x version as soon as possible. Although there are many changes, they are basically compatible. You can upgrade gradually according to the warnings given by the console.\n\n## Upgrade preparation\n\n1. Please upgrade to the latest version of 2.x first, and remove/modify related APIs according to the warning information on the console. It is recommended to check the historical ChangeLog of 2.x first, which will not be detailed here.\n2. Upgrade the project to Vue 3.2 and above.\n\n## 3.0 What are the incompatible changes\n\n### Design specification adjustment\n\n- The font color is changed from `rgba(0, 0, 0, 0.65)` to `rgba(0, 0, 0, 0.85)`.\n- The selected color of some components is uniformly changed to `@blue-1: #E6F7FF`, and the corresponding color of `hover` is changed to `@gray-2: #FAFAFA`.\n- Error color value adjustment, changed from `@red-5: #F5222D` to `@red-5: #FF4D4F`.\n- DatePicker interactive redo, the panel and the input box are separated, the range selection can now select the start and end time separately.\n\n#### Removed API\n\n- Removed the `lazy` attribute of Transfer, it does not have a real optimization effect.\n- Removed the `combobox` mode of Select, please use `AutoComplete` instead.\n- Deprecated Button.Group, please use `Space` instead.\n- `DatePicker` `TimePicker` `Calendar` remove momentjs, please use dayjs instead.\n- `Tree`, `TreeSelect`\n - Deprecated the use of `a-tree-node` and `a-tree-select-node` to construct nodes, use the `treeData` property instead.\n - Deprecated `scopedSlots` `slots` custom rendering node, use `v-slot:title` instead.\n - Deprecated `replaceFields`, use `fieldNames` instead.\n- `Table`\n - Removed the `rowSelection.hideDefaultSelections` property of Table, please use `SELECTION_ALL` and `SELECTION_INVERT` in `rowSelection.selections` instead, [custom options](/components/table/#components-table-demo- row-selection-custom).\n - Removed Column slots and replaced them with `v-slot:headerCell` `v-slot:bodyCell` `v-slot:customFilterDropdown` `v-slot:customFilterIcon`.\n\n#### Component refactoring\n\nIn order to make the components have better performance and maintainability, we have used TS + Composition Api to refactor almost all components. There are still very few components that have not been refactored. Such components will be refactored gradually in the future, and the rest There will be no destructive updates to the components, so there is no need to worry about future upgrade costs.\n\nMajor updates after the 3.0 version refactoring include `Tree` `TreeSelect` `DatePicker` `TimePicker` `Calendar` `Form` `Table`, other components also have corresponding function updates, you can check ChangeLog for further details.\n\n- `Tree` `TreeSelect`\n\n - Added virtual scrolling, discarded using `a-tree-node` `a-tree-select-node` to build nodes, using `treeData` property instead to improve component performance.\n - Deprecated `scopedSlots` `slots` custom rendering node, and replace it with `v-slot:title` to improve ease of use, avoid slot configuration expansion, and also avoid slot conflicts.\n\n- `AutoComplete`\n\n - no longer support `optionLabelProp`. Please set Option `value` directly.\n - options definition align with Select. Please use `options` instead of `dataSource`.\n\n- `Table`\n\n - Removed the `rowSelection.hideDefaultSelections` property of Table, please use `SELECTION_ALL` and `SELECTION_INVERT` in `rowSelection.selections` instead, [custom options](/components/table/#components-table-demo- row-selection-custom).\n - Removed Column slots and replaced them with `v-slot:headerCell` `v-slot:bodyCell` `v-slot:customFilterDropdown` `v-slot:customFilterIcon` to improve ease of use , To avoid slot configuration expansion, but also to avoid the problem of slot conflicts.\n - Added expandFixed to control whether the expanded icon is fixed.\n - Added the showSorterTooltip header whether to display the tooltip for the next sort.\n - Added sticky for setting sticky head and scroll bar.\n - Added rowExpandable to set whether to allow row expansion.\n - New slot headerCell is used to personalize the header cell.\n - Added slot bodyCell for personalized cell.\n - New slot customFilterDropdown is used to customize the filter menu, which needs to be used with `column.customFilterDropdown`.\n - Added slot customFilterIcon for custom filter icons.\n - New slot emptyText is used to customize the display content of empty data.\n - Added slot summary for the summary column.\n\n- `DatePicker` `TimePicker` `Calendar`\n\n - By default, a more lightweight dayjs is used to replace momentjs. If your project is too large and uses a lot of momentjs methods, you can refer to the document [Custom Time Library](/docs/vue/replace-date-cn), Replace with momentjs.\n - UI interaction adjustment, align with antd 4.x interaction specifications.\n\n- `Form` The main goal of this update is to improve performance. If you don't have custom form controls, you can almost ignore this part\n\n - Since version 3.0, Form.Item no longer hijacks child elements, but automatically checks through provider/inject dependency injection. This method can improve component performance, and there is no limit to the number of child elements. The same is true for child elements. It can be a high-level component that is further encapsulated.\n\n You can reference [Customized Form Controls](#components-form-demo-customized-form-controls), but it also has some disadvantages:\n\n 1. If the custom component wants Form.Item to be verified and displayed, you need to inject `const {id, onFieldChange, onFieldBlur} = useInjectFormItemContext()` and call the corresponding method.\n\n 2. A Form.Item can only collect the data of one form item. If there are multiple form items, it will cause collection confusion. For example:\n\n ```html\n <a-form-item>\n <a-input name="a"></a-input>\n <a-input name="b"></a-input>\n </a-form-item>\n ```\n\n As above Form.Item does not know whether to collect `name="a"` or `name="b"`, you can solve this kind of problem in the following two ways:\n\n The first is to use multiple `a-form-item`:\n\n ```html\n <a-form-item>\n <a-input name="a"></a-input>\n <a-form-item><a-input name="b"></a-input></a-form-item>\n </a-form-item>\n ```\n\n The second way is to wrap it with a custom component and call `useInjectFormItemContext` in the custom component, It is equivalent to merging multiple form items into one.\n\n ```html\n <script>\n // custom component\n import { Form } from 'ant-design-vue';\n export default {\n name: 'custom-name',\n setup() {\n const formItemContext = Form.useInjectFormItemContext();\n },\n };\n </script>\n ```\n\n ```html\n <a-form-item>\n <custom-com>\n <a-input name="a"></a-input>\n <a-input name="b"></a-input>\n </custom-com>\n </a-form-item>\n ```\n\n Third, the component library provides an `a-form-item-rest` component, which will prevent data collection. You can put form items that do not need to be collected and verified into this component. It is the same as the first This method is very similar, but it does not generate additional dom nodes.\n\n ```html\n <a-form-item>\n <a-input name="a"></a-input>\n <a-form-item-rest><a-input name="b"></a-input></a-form-item-rest>\n </a-form-item>\n ```\n\n## Encounter problems\n\nV3 has made a lot of detailed improvements and refactorings. We have collected all known incompatible changes and related effects as much as possible, but there may still be some scenarios that we have not considered. If you encounter problems during the upgrade process, please go to [GitHub issues](https://vuecomponent.github.io/issue-helper/) for feedback. We will respond as soon as possible and improve this document accordingly.\n",html:`

This document will help you upgrade from ant-design-vue 2.x version to ant-design-vue 3.x version.

The 2.x version is a compatible version developed for compatibility with Vue 3. It does not bring many new features, and most of the API changes are only for better compatibility with Vue 3. The 3.x version has greatly improved performance, ease of use, and functions. After the 3.x version is stable, we will archive the 2.x version. It is recommended that you upgrade to the 3.x version as soon as possible. Although there are many changes, they are basically compatible. You can upgrade gradually according to the warnings given by the console.

Upgrade preparation

  1. Please upgrade to the latest version of 2.x first, and remove/modify related APIs according to the warning information on the console. It is recommended to check the historical ChangeLog of 2.x first, which will not be detailed here.
  2. Upgrade the project to Vue 3.2 and above.

3.0 What are the incompatible changes

Design specification adjustment

Removed API

Component refactoring

In order to make the components have better performance and maintainability, we have used TS + Composition Api to refactor almost all components. There are still very few components that have not been refactored. Such components will be refactored gradually in the future, and the rest There will be no destructive updates to the components, so there is no need to worry about future upgrade costs.

Major updates after the 3.0 version refactoring include Tree TreeSelect DatePicker TimePicker Calendar Form Table, other components also have corresponding function updates, you can check ChangeLog for further details.

Encounter problems

V3 has made a lot of detailed improvements and refactorings. We have collected all known incompatible changes and related effects as much as possible, but there may still be some scenarios that we have not considered. If you encounter problems during the upgrade process, please go to GitHub issues for feedback. We will respond as soon as possible and improve this document accordingly.

`,lastUpdated:1748060269537}},c={class:"markdown"};function p(l,e,i,r,d,u){return s(),t("article",c,e[0]||(e[0]=[a(`

This document will help you upgrade from ant-design-vue 2.x version to ant-design-vue 3.x version.

The 2.x version is a compatible version developed for compatibility with Vue 3. It does not bring many new features, and most of the API changes are only for better compatibility with Vue 3. The 3.x version has greatly improved performance, ease of use, and functions. After the 3.x version is stable, we will archive the 2.x version. It is recommended that you upgrade to the 3.x version as soon as possible. Although there are many changes, they are basically compatible. You can upgrade gradually according to the warnings given by the console.

Upgrade preparation

  1. Please upgrade to the latest version of 2.x first, and remove/modify related APIs according to the warning information on the console. It is recommended to check the historical ChangeLog of 2.x first, which will not be detailed here.
  2. Upgrade the project to Vue 3.2 and above.

3.0 What are the incompatible changes

Design specification adjustment

Removed API

Component refactoring

In order to make the components have better performance and maintainability, we have used TS + Composition Api to refactor almost all components. There are still very few components that have not been refactored. Such components will be refactored gradually in the future, and the rest There will be no destructive updates to the components, so there is no need to worry about future upgrade costs.

Major updates after the 3.0 version refactoring include Tree TreeSelect DatePicker TimePicker Calendar Form Table, other components also have corresponding function updates, you can check ChangeLog for further details.

Encounter problems

V3 has made a lot of detailed improvements and refactorings. We have collected all known incompatible changes and related effects as much as possible, but there may still be some scenarios that we have not considered. If you encounter problems during the upgrade process, please go to GitHub issues for feedback. We will respond as soon as possible and improve this document accordingly.

`,15)]))}const h=n(o,[["render",p]]);export{h as default};