Vue 3 vs Vue 2

In this topic, we will compare Vue 2 and Vue 3. We will take a look at what is different between them, why you might still want to use Vue 2, why you might want to change to Vue 3, and how you can do that.

Major differences

Creating a New Application: When you start making a new application, you'll see a big difference between Vue 2 and Vue 3. The command you use to do this is different for Vue 2 and Vue 3:

Vue 2:

npm install [email protected]

Vue 3:

npm install vue

These commands show that Vue 3 is the default version now.

Composition API: One of the most significant changes in Vue 3 is the introduction of the Composition API, a new way to abstract and reuse logic in Vue components. While Vue 2 uses the Options API, which organizes code by options (data, methods, computed, etc.), the Composition API organizes code by logical concerns, making it easier to manage complex components. Here's a simple example of how the two APIs differ:

Vue 2 (Options API):

<template>
  <div>
     <div>{{ count }}</div>
     <button @click="increment">Increment counter</button>
  </div>  
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
}
</script>

Vue 3 (Composition API):

<template>
  <div>
    <div>{{ count }}</div>
    <button @click="increment">{{ count }}</button>
  </div>
</template>

<script>
 import { ref } from 'vue'
 export default {
   setup() {
    const count = ref(0)
    const increment = () => {
      count.value++
    }
    return {
      count,
      increment
    }
   }
 }
</script>

Reactivity System: Vue 3 also brought a new reactivity system based on ES6 Proxies, resulting in better performance and memory usage. In contrast, Vue 2 relies on ES5 getters and setters, which can be less efficient. For example, Vue 2 cannot detect property addition or deletion, but with Vue 3's ES6 Proxies, these changes are reactive.

Size: Vue 3 is more lightweight and faster than Vue 2. The core runtime of Vue 3 is approximately half the size of Vue 2, leading to more efficient downloading and loading in the browser.

Multiple Root Elements: In Vue 2, each component could only have one root element. In Vue 3, you can have multiple root elements in a single component, which can make your HTML cleaner and easier to read. Here's a small example:

<!-- Vue 2 -->
<template>
  <div> <!-- Single root element -->
    <h1>Hello, Vue 2!</h1>
    <p>Welcome to Vue 2.</p>
  </div>
</template>

<!-- Vue 3 -->
<template>
  <h1>Hello, Vue 3!</h1> <!-- Multiple root elements -->
  <p>Welcome to Vue 3.</p>
</template>

Teleport Component: Vue 3 introduces a new built-in component called Teleport. It lets you specify where you want to render a part of your component, which can be somewhere completely different in the DOM.

In Vue 2, to move a part of your component to a different place in the DOM, you would have to use a library or manually manipulate the DOM. Let's say we have a modal we want to render directly under the body tag, here's how we might do it:

<template>
  <div>
    <button @click="showModal = true">Show Modal</button>
    <div v-if="showModal" class="modal">
      <div class="modal-content">
        <span @click="showModal = false" class="close">&times;</span>
        <p>Some text in the Modal..</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false
    }
  }
}
</script>

Here, the modal is a child of the component, and we use CSS to make it appear as if it's outside the component. This can lead to issues such as the modal being clipped if the parent has a style of overflow: hidden.

In Vue 3, we can use the Teleport component to render the modal outside of our component's DOM tree. Here's how we can do it:

<template>
  <div>
    <button @click="showModal = true">Show Modal</button>
    <teleport to="body">
      <div v-if="showModal" class="modal">
        <div class="modal-content">
          <span @click="showModal = false" class="close">&times;</span>
          <p>Some text in the Modal..</p>
        </div>
      </div>
    </teleport>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false
    }
  }
}
</script>

In this example, the modal is actually rendered as a child of the body tag, not as a child of our component. This can solve a lot of issues, especially when dealing with z-index and overflow problems. It also makes it easier to reuse the modal across different components.

Suspense Component: Vue 3 has a new Suspense component. It lets you wrap around parts of your application that might take some time to load, like data from an API. While it's waiting, it can show fallback content.

Improved TypeScript Support: Vue 3 has better support for TypeScript, a popular JavaScript superset. This can make it easier to catch errors and write safer, more reliable code.

Vue 2 advantages

There are still some cases where Vue 2 might be a better choice:

1. Mature and Stable: Vue 2 has been around longer, which means it's more mature and stable. It's been tested by many developers in various scenarios, so it's less likely to have unexpected issues.

2. More Resources: Because Vue 2 has been around longer, there are more educational resources available, like tutorials and examples. This can make it easier to get help and find solutions to problems.

3. Third-Party Library Support: Some third-party libraries that work with Vue 2 don't work with Vue 3 yet. If your project relies on these libraries, sticking with Vue 2 might be the best option for now.

Remember, the best version to use depends on your specific needs and the requirements of your project.

Why migrate to Vue 3?

Upgrading to Vue 3 offers several benefits. The Composition API can make your code neater and easier to use again. The new reactivity system makes your web page use less memory. Also, because Vue 3 is smaller, it loads quicker which can make your web page work better.

How to migrate

Transitioning from Vue 2 to Vue 3 requires careful consideration of API changes and third-party library compatibility. Vue provides a migration guide and a migration build to facilitate this process. The migration build is a version of Vue 3 that provides Vue 2 compatible behavior and warnings for incompatible usage. This enables you to incrementally migrate your application, addressing one warning at a time.

Conclusion

In conclusion, Vue 3 offers several substantial improvements over Vue 2, such as the Composition API, a new reactivity system, and smaller size. While Vue 2 may still be the better choice in some cases, the advantages of Vue 3 make it an appealing option for many applications. If you want to change to Vue 3, you should do it carefully and use the help that Vue provides.

We hope this comparison, complete with examples, provides a clearer understanding of the differences between Vue 2 and Vue 3, assisting you in making an informed decision for your projects.