This article was originally created and published by the grape city technical team
Please indicate the source for reprinting: Grape City official website . Grape City provides developers with professional development tools, solutions and services, and empowers developers.
Vue 3.0 was officially released on September 18, 2020, 4 years have passed since Vue 2.0 was released on October 1, 2016. I don’t know if the choice of release date is the author’s intention. In the past four years, Vue has achieved great success as a personal project. The number of stars on github quickly exceeded 10W, becoming one of the three popular front-end frameworks. In China, it is the first choice for beginners to get started, occupying a dominant position.
As we all know, refactoring in the software development process is like a phoenix bathing in flames, bathing in flames until immortality. In February 2018, Youda refactored Vue. In September of the same year, it built the prototype and also created the vue-next repo, and then officially announced the launch of the Vue 3.0 project. Subsequently, the early implementation methods (class, TypeScript, hooks, time slicing) were determined and the RFC (Request for Comments) process was established.
Before the Composition API was determined, the team went through the discussion of Class API and Function API and the regression of functions. The team always hopes to maintain Vue's smooth learning curve and the attitude of growing with users. Vue 3.0 development is not radical. The Composition API RFC was confirmed in August 2019, and then the development of 3.0 surroundings has also accelerated, and the alpha version was released on January 2, 2020, the first RC version on July 17, and the official version on September 18 The "One Piece" version is released. Vue 3.0 lasted 2 years, 37 RFCs, 2682 Commits, and a total of 99 contributors participated.
Vue 3.0 brings the following main new features
- Easier to maintain
- TypeScript + internal modularity
- Faster
- Response through proxy
- New virtual dom implementation
- smaller
- Introduce the Tree-sharking mechanism
- Better code organization
- Composition API
Regarding the new features, if you are interested, you can refer to the previously published " Do you still learn to move?" Check out the exciting features of Vue.js 3.0.0 to learn more. And in this article, let's take a look at how to upgrade existing projects to enjoy these new features. Let's start now.
The official vue-cli provides an upgrade command, upgrade the cli to the latest version, and then run the vue add vue-next command to upgrade the project to version 3.0. This command not only upgrades and installs the dependencies of the new version, but also adjusts the code to adapt to the new version.
The following is a comparison of main.js before and after the upgrade. In Vue 3.0, createApp is used to replace the Vue constructor used in 2.0, and the plug-in used also replaces the constructor parameters in 2 through use.
Router uses createRouter instead of VueRouter constructor
Vuex also uses createStore instead of Store constructor
It seems that the upgrade is relatively simple, but Vue 3.0 still has many breaking changes, some tips for common functions:
- v-model
Vue 3.0 supports the binding of multiple v-models, and also supports custom v-model modifiers.
But v-model also brings two breaking changes.
-
- The default names of properties (prop) and events (event) in custom components have changed
- The .sync modifier is removed and the model component is replaced with a parameter of v-model
- Event Bus
In the actual use of the project, you will encounter communication problems between multiple components, such as communication between brother components, using eventBus, it is very convenient to implement such a subscriber model.
By initializing a new Vue object, use Vue's $emit and $on methods to send the listening time.
One of the components sends a message
You can listen to this notification in other components
The eventBus method is very simple, but not elegant, and it cannot be used in Vue 3.0.
After upgrading to 3.0, the official recommendation is to use simpler mitt to build event bus, or directly use Vuex to share information.
- Filter
In Vue 2 you can use Filter to format values, such as capitalizing the first letter of msg
Filter is discarded in Vue 3.0, you can directly use function parameter passing to achieve this requirement
You can put the capitalize method in methods or in the setup of the Composition API.
If it is a defined global filter, it can only be deleted, and a shared method reference is used.
The above is the method of partial function reconstruction, more detailed information is listed on the official website https://vue3js.cn/docs/guide/migration/introduction.html#breaking .
The above are just some upgrades of Vue official components. If third-party components are used in the project, please pay attention to whether the components support 3.0 when upgrading. At present, it is recommended that stable projects should not be rushed to upgrade to 3.0. Vue 2 will have long-term maintenance and provide version 2.7. The official follow-up will also provide compatible solutions. If it is a new project or an experimental project, you can upgrade to Vue 3.0 and start enjoying the new features.