Hello everyone! It's been one and a half years since Vue 3 "One Piece" was released. When it was released, I started to work on Vue, but it was Vue 2, not Vue 3. I started working on Vue 3 a year later, and I can honestly say that I am glad I did.

I believe Vue 3 is cleaner and more understandable. We'll talk about things you should know and use if you are writing for Vue 3 or considering upgrading. Then I'll share my thoughts on Vue 3.

Things You Should Know Before Upgrading or Using

1. Composition API

First of all, we'll talk about the Composition API, and I think it's the rule if you are writing Vue 3. You might think Composition API is more complicated, but it's the opposite of that. Trust me, you'll understand. Composition API is a built-in feature of Vue 3, and is currently available to Vue 2 via the officially maintained @vue/composition-api plugin. Here is an example:

<script setup>
import { ref, onMounted } from 'vue'

// It is a reactive state
const count = ref(0)

// Functions that mutate state and trigger updates
function increment() {
  count.value++
}

// Lifecycle hooks
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

You can see the <script setup> in the example, and you can ask what that is. That is a compile-time syntactic sugar for using Composition API inside Single File Components (SFCs). In fewer words, it's good for many reasons, and you can read them here.

Composition API good for:

• Better Logic Reuse: The primary advantage of Composition API is that it enables clean, efficient logic reuse in the form of Composable functions.
• More Flexible Code Organization
• Better Type Inference
• Smaller Production Bundle and Less Overhead: Code written in Composition API and <script setup> is also more efficient and minification-friendly than Options API equivalent.

I tried to explain why Composition API is good. but you can also read the documentation for more information.

2. Reactive References

If you've ever worked with Vue 2 before, you'll remember the data() function. It was returning the states and variables to the DOM and it was reactive. If you don't know what "reactive" means, checkout this article. In Vue 3, you are free to create reactive variables with ref. The ref is “Reactive Reference” which wraps primitive data to allow us to track change.

Let me show you the differences in reactive variables between Vue 2 and Vue 3:

• Vue 2

<template>
  <div id="app">
    <div>Name: {{ name }}</div>
  </div>
</template>

<script>
export default {
  name: "App",
  data(){
    return {
      name: "Name"
    }
  }
};
</script>

• Vue 3

<template>
  <div>Name: {{ name }}</div>
</template>
<script>
import { ref } from "vue";
export default {
  setup() {
    const name = ref('Name');
    return { name };
  }
};
</script>

They are working almost exactly the same. What I mean by saying "almost", it has mini differences. If you want to go deeper into reactivity, you can check out the official Vue.js documentation here.

3. Ecosystem Convenience and Up-to-Dateness

It's not unique to Vue 3, but in Vue 3 the team is always supporting new technologies and they are keeping it up-to-date with packages. Also, when a new Vue version comes out, they upgrade other packages really fast. I can give an example for that; Vue 3 was released on September 18, 2020, and Vue Router Next (v4) came out on December 7, 2020. Not even 2 months. Also, Pinia is a big example for they are supporting new technologies. I know Eduardo San Martin Morote started to create Pinia, and he is also working on Vue. That proves they didn't like Vuex (Evan You) and they created a new one for state management.

Another example is Volar Extension. Volar is developed by Johnson Chu and he is not particularly part of core Vue Team. Right now in the Vue.js official documentation, Volar is a recommended VSC extension. You can see it here. Again, this proves that the Vue team supports new technologies.

Here is Conclusion

At Vue 3, things are going so far so good. For the above reasons, I prefer Vue 3 to Vue 2. If you have Vue 2 project and you are considering to upgrade, first of all think about all your dependencies. Most of packages is upgraded or created a new Next version for Vue 3 compatibility. Any package you have may not have had their dependencies upgraded, which is a major issue. Anyhow, you can upgrade your small-scaled project easily with the official migration guide.

Vue 3 is essentially a more powerful version of Vue 2. Vue 3 is significantly faster and lighter, with better TypeScript support and several exciting new features. The framework has been completely rewritten, but the API (how developers interact with it) has not changed. What a fantastic idea!

Consider upgrading to Vue 3 as a switch to a slightly newer phone of the same brand, such as going from an iPhone X to an iPhone 11 Pro. The sensation is fantastic, and you notice significant improvements, but the user interface stays unchanged. In both scenarios, you have a fantastic phone! The same is true for Vue.js: when you upgrade to Vue 3, you will be able to do more with your new framework, but everything you could do before will still be functional.

To help you make the transition, the Vue team will release detailed tutorials as well as a migration tool that will parse your application and guide you through the update.

So, in 2021, don't be terrified of Vue 3 and stop putting off learning and using Vue 2. In 2021, everyone is using Vue 2! You will not fall behind, you will not lose out, and your codebase is not out of date. Keep making fantastic products, and when the Vue 3 ecosystem is ready for migration, we'll all know and have time to upgrade.

The most important point is to use Vue 3 with best practices and the correct ways. With the correct way, it's way better than Vue 2 and the Options API.

Yes that was the my thoughts about Vue 3 so far. Thank you for reading, and I hope you enjoyed the content; if so, please show your appreciation by leaving an emoji or sharing with your friends.

If you want to keep up with me, you can find me on Twitter | LinkedIn or simply visit my website.

• Yusufcan Yılmaz