After eight months of development, Vant 3.0 is now officially released. The official said that in this iteration, its main work is to refactor the entire code warehouse and surrounding ecology based on Vue 3, and release Vant 3.0, Vant Cli 3.0 and Vant Use 1.0. The specific updates are as follows:
Embrace Vue 3
Vue 3 brings many new features, such as Composition API, emerges Option, and Teleport. Vant 3.0 fully embraces the various changes brought by Vue 3 and completes the following transformations:
-
Refactor all components using Composition API
-
Use Composition API to rewrite all documentation and examples
-
The component adds the option of emits to provide better event prompts
-
Remove all mixins to improve code readability
-
All pop-up components support the teleport attribute
After the refactoring is completed, the components can be logically reused based on the Composition API, and the compressibility of the code is also improved. Comparing with Vant 2.12 version, you can see that the JS volume of Vant 3.0 has dropped by 16.6%, and the volume after Gzip has dropped to 67.5kb.
New components: Vant 2, Vant 3 simultaneous supply
Vant 3.0 contains 3 brand new components, namely:
-
Badge logo: used to display the logo number or small red dot in the upper right corner.
-
Popover: A pop-up bubble menu component.
-
Cascader cascading selector: used for multi-level data selection, typical scenarios are provincial and municipal selection.
Considering that most developers are still using Vue 2 for development, the development team has implemented the above three components simultaneously in Vant 2, and users can upgrade to Vant 2.12 for use.
Vant Use: New partner
Vant Use Composition API library precipitated from Vant. In addition to providing common Composition APIs, Vant Use will also extract the logic of certain components, allowing developers to fully customize the presentation form of components while using component logic.
An example is as follows: The countdown logic of the CountDown component is abstracted as a useCountDown method. The function is basically equivalent to the CountDown component, but it is more flexible to use. You can customize the UI style computed of the countdown or preprocess the countdown.
Currently, Vant Use is still in its early stages. The official said that in the future evolution process, it will continue to extract the general logic inside the Vant component and sink into Vant Use.
Vant Cli 3.0: newer and faster
Vant Cli is a component library building tool at the bottom of Vant. Through Vant Cli, you can quickly build a full-featured Vue component library. Vant Cli 3.0 has a major version upgrade to all underlying dependencies, while supporting Vue 3, it provides a smoother development experience.
-
Upgrade Vue 3, VueRouter 4, VueLoader 16
-
Upgrade Webpack 5 to enable persistent caching
-
Upgrade Docsearch 3, new search box style
-
Upgrade TypeScript 4, ESLint 7
When creating a vant-cli project, you can freely choose to develop component library based on Vue 2 or Vue 3:
Vant Demo: 2 new example projects
Vant Demo is a collection of sample projects officially provided by Vant. In this iteration, two new sample projects have been added to demonstrate respectively:
-
How to build an application with Vue 3 + Vant 3 + Vue Cli
-
How to build an application with Vue 3 + Vant 3 + Vite
Some users have started to use Vite for development, but in the process of using Vite, the question of how to introduce Vant components on demand in Vite is always confusing. In Vue Cli, the babel-plugin-import plug-in can be used to implement on-demand import, but the plug-in cannot be used in Vite.
According to the official, in fact, there is no need to consider the issue of on-demand introduction in Vite. Vite will automatically remove unused ESM modules through Tree Shaking when building the code. All modules in Vant 3.0 are written based on ESM and naturally have the ability to be introduced on demand. The remaining problem at this stage is that unused component styles cannot be identified and removed by Tree Shaking, and they will consider supporting them through Vite plug-ins in the future.
upgrade
Currently, the Vant official website displays Vant 2 API documentation by default, and users can access the Vant 3 documentation through the version switch button in the upper right corner of the official website.
At the same time, Vant's npm latest tag is also maintained at the v2 version, which means that npm install vant Vant 2 will still be installed using the command, and the npm install vant@next command is required to install Vant 3 . Officially, they will also switch synchronously after Vue's default document version and npm tag are switched to v3. To upgrade from an existing Vant 2 project, please refer to the upgrade guide .
Next step plan
In the next 6-12 months, the development team will keep the functions of Vant 2 and Vant 3 updated simultaneously. With the popularity of Vue 3, they will gradually reduce the maintenance frequency of Vant 2 and shift the focus of work to Vant 3.