Vue 3 Breaking Changes

Posted on  by admin
Thanks to the Vue Core team, we can try out the most anticipated Vue 3 which has a lot of great improvements and features to look forward.

Currently it's in the beta release, and if you want to get hands-on with the latest changes you can try to install it and followup the changes in their github release. As a VueJS developer, I have experienced the current code implementation of Vue 2, and when I tried the Vue 3, I noticed there are some breaking changes.

But don't get me wrong, I personally like the breaking changes as I believe it will help to improve the code quality and lesser chance of unexpected bugs.

Also, these breaking changes are coming from the agreed RFC by the Vue Core team, so check them out for more detail. Alas, here we go! In the Vue 2, usually the plugin installation will be done in the global instance of the Vue object, and then we create a new instance of the Vue to initialize the Vue app.

This implementation has a flaw if you need to create multiple Vue app in the same page.

Since it uses the global Vue instance to install the app, you can't initiate multiple Vue app with different plugins to be installed.

This can lead to the pollution of the Vue instance. In the Vue 3, plugin installation and app initialization are immutable from the original Vue instance, since you must initiate the Vue app first before installing the plugins.

Notice that there's no global Vue defined and mutated here.

With this, now you can be sure that every plugin used on each application is specific and won't pollute other Vue app. More details and the reason behind in the RFC: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0009-global-api-change.md.

💓 Before I make anyone panic here, please note that this changes on v-model API is not affecting the usage of v-model in the native elements like ,