Tutorial

An Overview of What's Coming in Vue 3

Updated on February 23, 2021
    Default avatar

    By Parthiv Mohan

    An Overview of What's Coming in Vue 3

    This tutorial is out of date and no longer maintained.

    Introduction

    At the time of this writing, Vue 3.0 is at its tenth alpha version. Expect a faster, smaller, more maintainable, and easier-to-use version of the Vue you know and love. You can still use Vue via a script tag and your Vue 2.x code will continue to work. But you can start playing with the latest version of Vue 3.0.

    Note:: Since original publication, Vue 3.0 was released on September 18, 2020.

    In this article, you will explore some of the features that Vue 3.0 is offering.

    Comparing the Options API and Composition API

    Among other things, there’s a new API for creating components. It doesn’t introduce new concepts to Vue, but rather exposes Vue’s core capabilities like creating and observing reactive state as standalone functions. This is ultimately useful to Vue developers of all levels.

    In Vue 2, components are created with the object-based Options API. Vue 3 adds a set of APIs, referred to as the Composition API, which is function-based. This is primarily to address two issues that Vue 2 ran into for very large projects.

    In large components that encapsulate multiple logical tasks, you want to group code by feature, but the nature of the Options API is that such code gets split up (among lifecycle hooks and so on), negatively affecting readability. Secondly, you want to be able to reuse logic in large-scale projects, and in Vue 2, solutions like mixins do not address either issue very well.

    Vue 3 seeks to address both issues by exposing a new API. This API will live alongside the Options API, not replace it. This means that you can go on building components in the way that you are used to without encountering any problems. But, you can also start building with the Composition API, which provides more flexible code organization and logic reuse capabilities as well as other improvements.

    Even if the problems it specifically addresses are not pertinent to you, the new API has clearly had a lot of thought gone into it to push Vue forward as a framework, for instance, by reducing the extent to which Vue operates “magically” behind the scenes.

    Using the Composition API

    The Composition API is available now as a plugin for Vue 2 so you can try it out. It will be shipped baked-in in Vue 3.

    In Vue 2 reactivity was achieved through the getters and setters of Object.defineProperty. This caused some limitations which you have already probably experienced (e.g., updating an Array by index). In Vue 3, reactivity is accomplished through proxies, a feature that was introduced in JavaScript ES6.

    You need not have a Vue instance to use the new reactivity API. It offers standalone APIs which allow you to create, observe, and react to state changes.

    You would first import { reactive } from 'vue'. Then, you could create an object in the following way:

    const state = reactive({ count: 0 })

    You will have access to APIs that will allow you to dynamically inject component lifecycle hooks into a Vue instance.

    The lifecycle registration methods can only be used in the setup() method which is the entry point where all the composition functions are called. For instance:

    import { onMounted } from 'vue'
    
    export default {
      setup() {
        onMounted(() => {
          console.log('component is mounted.')
        })
      }
    }
    

    Functions that use these APIs can be imported into a component, allowing the component to do multiple logical tasks with reusable and readable code.

    Improving TypeScript Support

    The Composition API also offers better TypeScript support. It is supposed to result in better type inferences with bindings returned from setup() and props declarations used to infer types.

    Component code using TypeScript and JavaScript will look largely identical and TypeScript definitions benefit JavaScript users as well if they use an IDE like Visual Studio Code.

    Improving Rendering Speeds

    Vue 2 supports templates as well as render functions. You don’t need to know an awful lot here except that Vue 3 continues to support both while optimizing rendering speed (such as by speeding up diff algorithms that operate under the hood so that Vue knows what needs to be re-rendered).

    Improving Mounting and Patching

    Virtual DOM has been rewritten from the ground-up to make for faster mounting and patching.

    Compile-time hints have been added to reduce runtime overhead. This means skipping unnecessary condition branches and avoiding re-renders. Static tree and static prop hoisting mean entire trees and nodes can skip being patched. Inline functions (like in a handler for a component in a template) won’t cause unnecessary re-renders.

    You are going to get a proxy-based observation mechanism with full language coverage and better performance. Instance properties will be proxied faster using native Proxy instead of Object.defineProperty like before.

    You can expect up to 100% faster component instance initialization with double the speed and half the memory usage.

    Reducing File Sizes

    Vue 3 is also smaller.

    It is tree-shaking-friendly. Tree shaking refers to shaking off unused code. The core runtime has gone from ~20kb in size, gzipped, to ~10kb, gzipped.

    The size of the Vue bundle increases with each new feature but, by providing most global APIs and Vue helpers as ES module exports, Vue 3 makes more code tree shakeable, even template code.

    Enhancing Coherence

    Libraries like Vue Router and test-utils will be updated to line up with the new Vue. Vue now has a custom renderer API (similar to React Native for those who want to use it to create renderers for mobile or other host environments.

    Conclusion

    In this article, you explored some of the features that Vue 3.0 is offering. The new Composition API moves us towards an all-around better Vue.

    You can continue your learning by diving into the closed pull requests tagged for the "3.x’ release.

    Note: The migration guide covers new features and breaking changes.

    An exact release date is not set but it is coming soon. You can plan and prepare for adopting it in future projects today!

    Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

    Learn more about us


    About the authors
    Default avatar
    Parthiv Mohan

    author

    Still looking for an answer?

    Ask a questionSearch for more help

    Was this helpful?
     
    1 Comments
    

    This textbox defaults to using Markdown to format your answer.

    You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

    Try DigitalOcean for free

    Click below to sign up and get $200 of credit to try our products over 60 days!

    Sign up

    Join the Tech Talk
    Success! Thank you! Please check your email for further details.

    Please complete your information!

    Get our biweekly newsletter

    Sign up for Infrastructure as a Newsletter.

    Hollie's Hub for Good

    Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

    Become a contributor

    Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

    Welcome to the developer cloud

    DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

    Learn more
    DigitalOcean Cloud Control Panel