Vue has a large following of developers. It’s easy to use and can be picked up relatively quickly.

Personally I think it combined the best of React and Angular and found a way to strike a balance to get the best of both worlds.

Evan You, the creator of Vue, previewed a new version of Vue during his keynote speech at Vue Toronto. Some of the takeouts from the preview are what will be covered in the rest of this article.

1. New Syntax

The biggest change coming to Vue 3 is a new syntax called Composition API. Vue 2 uses an Object-based API to compose component logic. A small component that contains a count and button to increase the count can be written like so:

<template>
  <div>
    <h1>My Event</h1>
    <p>Capacity: {{ capacity }}</p>
    <button @click="increaseCapacity">Increase Capacity</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      capacity: 3,
    }
  },
  methods: {
    increaseCapacity() {
      this.capacity += 1;
    }
  }
};
</script>

Logic is written in a set of properties and function exposed by Vue. One of the issues with this is that code reuse and organization can become a chore as the application grows in size. And this is one of the motivations behind the new version.

The component above re-written in Vue 3 would look like so:

<template>
  <div>
    <h1>Capacity: {{ state.capacity }}</h1>
    <button @click="increaseCapacity">Increase Capacity</button>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      capacity: 3,
    });

    function increaseCapacity() {
      state.capacity += 1;
    }
    return { capacity, increaseCapacity };
  },
};
</script>

Vue developers have split opinions on the new composition API. The good news is the new syntax can be used alongside the old one so you won’t have to rewrite old projects to use the new syntax. New components can be written with the new syntax and it should work.

Breaking it down

Let’s look at the new syntax quickly.

import { reactive } from 'vue';

Vue 3 is split into modules and you’ll need to import what you use. This enables module bundlers to do tree-shaking so the production bundle ends up with only what the application uses.

setup() { … }

The setup function is the only function inside the component and contains all the component’s logic.

const state = reactive({
  capacity: 3
});

reactive makes the state variable capacity a reactive reference so it gets updated automatically. 

function increaseCapacity() {
  state.capacity += 1;
}

This method updates the capacity property. The new syntax makes it easier to keep related logic together which would not be as easy using the previous syntax.

return { capacity, increaseCapacity };

At the end of the setup function, we return the variables and functions that our template needs access to work. This gives us more control as to what is accessible by the template and makes our components more maintainable.

2. Typescript Support

This is one thing that has been requested for by a good number of Vue developers so it’s great to see that it’s coming to Vue 3. Using the Vue CLI, one can create Typescript projects from scratch but some third party packages are needed to create a true, complete Typescript project. Vue 3 promises to bring better support for Typescript.

3. Smaller, Faster

Vue is already quite small (20 kb gzipped) at runtime but the new version is expected to be even smaller (10 kb gzipped). However, in the new version, the virtual DOM has been re-written from the ground up to use a more efficient code.

Static tree hoisting and static props hoisting would avoid re-rendering static parts of the virtual dom and repatching nodes that are not going to change. These are some of the changes that would make it faster. For a full list of some of the changes, do checkout Vue Mastery.

Conclusion

The composition API is by far the biggest change in Vue 3 and it does take some getting used to. The core concepts of Vue, however, remain the same and once you get used to the new syntax, it’s still the same old Vue but better.  You can start playing with the new syntax by using the Vue Composition API plugin. You can follow this blog post to get started.