The official version of Vue 3 will release in Q3 2020. It is currently in the release candidate stage that means that the APIs, core, structures are stable and able to become a production release unless significant bugs emerge. Therefore, it’s an appropriate time to figure out which programming differences between Vue 3 and Vue 2 and make the necessary adaptation.
Vue 3 does not change absolutely with Vue 2 but when completed rewriting it from Vue 2, some expected upgrades turn into a reality. The expected means that it makes our application smaller, faster, and more powerful. This article is for those who have experience with Vue 2. Firstly, looking at the way to create an app, you will see the difference in syntax. Not only syntax but also essence is changed.
Global configurations make issues during testing in unit tests because test cases can affect each other by global configuration. All of those effects are pollution. Vue 3 provides different global configurations but it makes it difficult to share a copy of configuration to multiple apps. In Vue 2, you implement only one single root node in the template but Vue 3 no longer requires a single root node for components that means it provides developer multiple root in the template.
This message never appears in Vue 3. The reasons for creating the composition API are:. Large components become difficult to read and maintain. Managing and maintaining logic between components is a big problem (mixins).
Therefore, the appearance of the composition API will solve the above issues. The features of composition API includes:. Optimal TypeScript support. A component is too large and a good code organization is mandatory. Reusable code is required. Note: If you want to use composition API in Vue 2, you can use this plugin. To use Composition API, we should start with the setup() method. In Vue 3, you can replace the setup() method by some following options:.
Computed Properties. Lifecycle methods. Note: Vue 3 development can use all of the above normally in the same way of Vue 2 without the setup() method. The ref is “Reactive Reference” which wraps primitive data to allow us to track change.