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

This article mainly shows you "how to use Vue2 code to change into Vue3", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use Vue2 code to change into Vue3" this article.

Vue3 has been out for some time, and many of my friends have been familiar with the documentation, written several Demo, and craved new features such as Composition API for a long time. Unfortunately, in practical work, most of my friends still have to live on thousands of lines of old Vue2 projects. A frame upgrade is like decorating an old house-full of ideas and lack of determination.

In fact, the Vue team has minimized destructive updates and provided a detailed migration guide with a large number of items, but at a glance, most of them are manual work, and some are very simple, such as an extra layer of asynchronous components:

Address of the migration guide: https://v3.cn.vuejs.org/guide/migration/array-refs.html

Others are a bit troublesome to change, such as renaming the life cycle of custom instructions and minor changes in incoming parameters:

After seeing this change, programmers, who hate repetition, have begun to wonder if they can write a code to help us change these rules in batches. Of course, it is much more difficult to write conversion code than to write web pages. Fortunately, we already have a handy tool: GoGoCode address https://github.com/thx/gogocode.

So we combed through the API changes mentioned in the migration guide with vue-router\ vuex upgrade, and wrote nearly 30 conversion logic with GoGoCode, covering most of the scenarios from Vue2 to Vue3 code break change. This program can help you convert Vue2 code into Vue3 code with one click.

Address of the migration guide: https://v3.cn.vuejs.org/guide/migration/array-refs.html

In the comparison of the differences between the two Vue2 to Vue3 mentioned above, the code on the right side of Vue3 is straight out according to the original piece of Vue2 code on the left through this tool. The effect is not bad ^ _ ^, let's try it together!

Give it a try

Global installation of gogocode-cli

Npm install gogocode-cli-g

Jump to the path of the Vue project that needs to be upgraded in the terminal (terminal). If you need to upgrade the Vue code under the src path, execute the following command

Gogocode- s. / src- t gogocode-plugin-vue-o. / src-out

After the conversion operation is completed, the new Vue3 code is written to the src-out directory.

We tried with vue-hackernews-2.0, the official example project of Vue2, and found that on the basis of the transformation, you can run with a slight change and then change the construction process. Some of the Diff of the transformation are as follows: (check the full Diff)

Vue2's official sample project vue-hackernews-2.0 address: https://github.com/vuejs/vue-hackernews-2.0

View the full Diff address: https://github.com/thx/gogocode/commit/6506a0e693aff1896da6c8863fa7e7c72d89610f?branch=6506a0e693aff1896da6c8863fa7e7c72d89610f&diff=split

This is just a brief introduction. For a complete plan, please refer to: https://gogocode.io/zh/docs/specification/vue2-to-vue3

The implementation is much easier than expected.

In order to achieve the purpose of conversion, GoGoCode added support for. For the parsing of vue files, we can easily get the parsed template and scirpt AST nodes, and use the convenient API of GoGoCode to process them.

Some simple rules, such as the asynchronous component transformation described earlier, can directly replace a similar string. Because it is based on AST, there is no need to care about the code format, and the workload is very small:

Script .replace ('() = > import ($_ $)', 'Vue.defineAsyncComponent (() = > import ($_ $)'). Replace (`() = > ({component: import ($_ $1), $$})`, `Vue.defineAsyncComponent ({loader: () = > import ($_ $1), $$}) `)

This project also examines GoGoCode's handling of complex situations, just like the changes in the life cycle of custom instructions mentioned earlier, which can be easily done!

The above is all the contents of the article "how to change Vue2 code to Vue3". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.