Vue3 has been out for a while, many friends have already read the document, wrote several demos, greedy Composition API and other new features for a long time. But, in practical work, most of my friends still have to live with thousands of Vue2 old projects. Doing a frame upgrade is like decorating an old house — ideas are always abundant, but determination is always lacking.

In fact, the Vue team has tried to minimize disruptive updates and has provided a detailed migration guide. There are a number of them, but most of them are manual work. Some of them are simple, such as the need to package asynchronous components in one layer:

Others are a bit cumbersome to change, such as the renaming of custom directive life cycles and subtle changes to the parameters passed:

After seeing this change, as a programmer who hates repetition, I started to wonder if I could write a code to help us change these rules in batches. Of course, writing conversion code is much more difficult than writing web pages, but we already had a handy tool: GoGoCode.

We introduced it in our previous post, “Mama Ali’s New tool makes batch coding easier,” as a much simpler AST processing tool that makes writing transformation logic much less difficult, and is designed for this very purpose!

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

In the above mentioned two Vue2 to Vue3 difference comparison, the right Vue3 code is straight out according to the left Vue2 code piece, the effect is good ^_^, let’s try it together!

Give it a try

Install gogoCode globally using cli

npm install gogocode-cli -g
Copy the code

In terminal, jump to the Vue project path that you want to upgrade. To upgrade the Vue code in the SRC directory, run the following command

gogocode -s ./src -t gogocode-plugin-vue -o ./src-out
Copy the code

The new Vue3 code is written to the src-out directory after the transformation is completed

We tried Vue2’s official example project, vue-hackernews-2.0, and found that a few changes to the transformation and a change in the build process made it work. Some of the Diff’s of the transformation are as follows :(see full Diff)

Here is only a brief introduction, complete solution please refer to: documentation

Implementation was much easier than expected

In order to achieve the purpose of transformation, GoGoCode has added support for the parsing of.vue files. We can easily obtain the parsed Template and Scirpt AST nodes, and use the convenient API of GoGoCode for processing.

A few simple rules, such as the asynchronous component transformation described earlier, are simply string substituting, and since they are BASED on the AST, the code format is not a concern and the effort is minimal:

script
  .replace('() => import($_$)'.'Vue.defineAsyncComponent(() => import($_$))')
  .replace(
    ` () => ({ component: import($_$1), $$$ })`.` Vue.defineAsyncComponent({ loader: () => import($_$1), $$$ }) `
  );
Copy the code

This project also examines GoGoCode’s handling of complex situations, such as custom instruction lifecycle changes mentioned earlier, with ease!

Open source, hope to get everyone’s feedback

I hope these efforts can make some contributions to the Vue open source community, so that the community can enjoy the technical dividends brought by Vue3 as soon as possible, and also let the members of the Vue team get rid of the historical burden of Vue2 and focus more on the research and development of new features of Vue3! At the beginning of the project, I hope to get your feedback and help on the shortcomings:

Issues: github.com/thx/gogocod…

Nail group: 34266233

Finally: ask star support!

Github:github.com/thx/gogocod… (this project is in packages/gogocode-plugin-vue/ directory)

Liverpoolfc.tv: gogocode. IO

Appendix: Current conversion rule overridden

The rules Conversion support The document
The Ref array in v-for ✔ link
Asynchronous components ✔ link
Attribute enforcement behavior ✔ link
$attrs contains class&style ✔ link
$children ✖ ️ link
Custom instruction ✔ link
Custom element interactions Without conversion link
The Data options ✔ link
Emits options ✔ link
Event apis ✔ link
The filter ✔ link
fragment ✔ link
Functional component ✔ link
Global API ✔ link
Global API Treeshaking ✔ link
Inline template Attribute ✖ ️ link
keyattribute ✔ link
Key modifier ✔ link
Remove $listeners ✔ link
The mounting API changes ✔ link
propsData The development of link
Access this in the default function of prop Without conversion link
Render Function API ✔ link
Slot unified ✔ link
Suspense Without conversion link
Transitional class name change ✔ link
The Transition as Root The development of link
Transition Group Root element ✔ link
Remove the v-on. Native modifier ✔ link
v-model ✔ link
Comparison of priorities between V-IF and V-FOR ✔ link
V-bind merge behavior ✔ link
VNode life cycle event The development of link
Watch on Arrays ✔ link
vuex ✔ link
vue-router ✔ link