Shulou(Shulou.com)06/02 Report--

This article mainly explains "what is the Vue 3 upgrade method". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what is the Vue 3 upgrade method".

The release of Vue 3 is just around the corner, and we can look forward to a faster, smaller, more maintainable version with many exciting new features. These are usually additions and improvements to the existing API.

Nothing can stop you from launching a new application using Vue 3. In this article, I'll show you how to get one step ahead and start experimenting with a new API by upgrading the application. If you are interested in the upgraded application, please take a look at my TodoMVC application, which is written in Composition API.

TodoMVC: https://github.com/blacksonic/todomvc-vue-composition-api

Use CLI

I strongly recommend using a formal CLI for Vue projects. In addition to development and deployment tools, it simplifies the upgrade to an one-line command:

Vue add vue-next

Vue Next plugin can not only upgrade and install new dependencies, but also modify the code to make it compatible with the third version.

Dependence

Installing the plug-in upgrades the packages vue, vuex, vue-router, eslint-plugin-vue, and @ vue/test-utils to the next major version. In addition, a new package named @ vue/compiler-sfc appears in the development dependency. What are the benefits? It compiles the new Vue single file component into runnable Javascript code.

Code modification

Let's take a look at the changes in the code. The first thing you notice is that there is no default export in the main Vue package.

The named export createApp creates a new Vue application, just like the constructor in Vue 2. The plug-in settings are moved to the application instance using the use method instead of the constructor's arguments. The $mount method loses its dollar sign, but behaves the same way.

The plug-in uses factory mode: constructors with the new keyword are no longer used. Instead of calling the new Vuex.Store, you need the createStore factory method. It is no longer possible to pass the default export of store as a plug-in.

The routing plug-in follows the same pattern: new VueRouter becomes a call to createRouter, and the global plug-in settings must be retained. In the new version, you always have to define the type of history. You can choose from createWebHashHistory,createMemoryHistory and createWebHistory.

Basically, you can start the application and run it on the new version of Vue. All operations can be done with a single bash command. Everything else should work with the old syntax, because the old API is still intact.

Size and scale

If you check the output size of the build command, you will notice a slight decrease: 43.75 KiB- > 40.57 KiB. This is because the default Vue instance is retained as the result of a named export. Build tools such as Webpack and Rollup can tree-shaking named exports (remove unused code), but not for default exports.

If there is no CLI

If you do not have CLI, you must upgrade vue-loader or rollup-plugin-vue to the next major release and add the @ vue/compiler-sfc package. There is no more magic here, you have to do all the operations manually. You also have to make code changes manually, and there are no tools to search the code base and update the syntax.

Thank you for your reading, the above is the content of "what is the Vue 3 upgrade method". After the study of this article, I believe you have a deeper understanding of what the Vue 3 upgrade method is, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.