What’s New in Vue 3:

More Maintainable

 Type Script & Modularized internals

 Faster

 Proxy-based Reactivity System

 Compiler-informed Virtual DOM &SSR

Smaller

Tree-Shaking

Compile-time flags

Scales Better 

 Composition API

 Beeter DX 

 New single-file Component improvement

Some of the new features to keep an eye on in Vue 3 include:

Composition API

Teleport

Multi root components(Fragments)

Emits Component Option

createRenderer API from @vue/runtime-core (opens new window)to create custom renderers

SFC Composition API Syntax Sugar (<script setup>) (opens new window)experimental

SFC State-driven CSS Variables (v-bind in <style>) (opens new window)experimental

SFC <style scoped> can now include global rules or rules that target only slotted content

Composition API:

It’s a completely new approach to logic reuse and code organization.Creating Vue components allows us to extract repeatable parts of the interface coupled with its functionality into reusable pieces of code.This alone can get our application pretty far in terms of maintainability and flexibility. However, our collective experience has proved that this alone might not be enough, especially when your application is getting really big – think several hundred components. When dealing with such large applications, sharing and reusing code becomes especially important.

Basics of Composition API:

The new setup component option is executed before the component is created, once the props are resolved, and serves as the entry point for composition API’s.The setup option should be a function that accepts props and context.

Additionally, everything that we return from setup will be exposed to the rest of our component (computed properties, methods, lifecycle hooks and so on) as well as to the component’s template.

Let’s add setup to our component:

// src/components/UserRepositories.vue

export default {

  components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList },

  props: {

    user: {

      type: String,

      required: true

    }

  },

  setup(props) {

    console.log(props) // { user: ” }

    return {} // anything returned here will be available for the rest of the component

  }

  // the “rest” of the component

}

Reactive Variables with ref:

ref takes the argument and returns it wrapped within an object with a value property, which can then be used to access or mutate the value of the reactive variable:

import { ref } from ‘vue’

const counter = ref(0)

console.log(counter) // { value: 0 }

console.log(counter.value) // 0

counter.value++

console.log(counter.value) // 1

Wrapping values inside an object might seem unnecessary but is required to keep the behavior unified across different data types in JavaScript. That’s because in JavaScript, primitive types like Number or String are passed by value, not by reference:

Note:

Keep in mind that the Composition API is not a change as it’s purely optional to use. The main motivation is to allow for better code organization and the reuse of code between components (as mixins are essentially an anti-pattern).

Teleport:

Teleport provides a clean way to allow us to control under which parent in our DOM we want a piece of HTML to be rendered, without having to resort to global state or splitting this into two components.

When using this component inside the initial HTML structure, we can see a problem – the modal is being rendered inside the deeply nested div and the position: absolute of the modal takes the parent relatively positioned div as reference.

Let’s modify our modal-button to use <teleport> and tell Vue “teleport this HTML to the “body” tag”.

app.component(‘modal-button’, {

  template: `

    <button @click=”modalOpen = true”>

        Open full screen modal! (With teleport!)

    </button>

    <teleport to=”body”>

      <div v-if=”modalOpen” class=”modal”>

        <div>

          I’m a teleported modal! 

          (My parent is “body”)

          <button @click=”modalOpen = false”>

            Close

          </button>

        </div>

      </div>

    </teleport>

  `,

  data() {

    return { 

      modalOpen: false

    }

  }

})

Multi root components:

This single-root limitation was also an issue for React, but it provided an answer in version 16 with a feature called fragments. To use it, wrap your multi-root templates in the special React.Fragment element:

In Vue 3, components now can have multiple root nodes! However, this does require developers to explicitly define where attributes should be distributed.

In Vue 3, this restriction is lifted. There is no need for a root element anymore.

<!– Layout.vue –>

<template>

  <header>…</header>

  <main v-bind=”$attrs”>…</main>

  <footer>…</footer>

</template>

Emits Component Option:

Custom Events

Like components and props, event names provide an automatic case transformation. If you emit an event from the child component in camel case, you will be able to add a kebab-cased listener in the parent:

JS:

this.$emit(‘myEvent’)

HTML:

<my-component @my-event=”doSomething”></my-component>

Validate Emitted Events:Similar to prop type validation, an emitted event can be validated if it is defined with the Object syntax instead of the array syntax.

To add validation, the event is assigned a function that receives the arguments passed to the $emit call and returns a boolean to indicate whether the event is valid or not.

v-model arguments:

By default, v-model on a component uses modelValue as the prop and update:modelValue as the event. We can modify these names passing an argument to v-model:

Multiple v-model bindings:

We all know that v-model is used for two-way binding. We mostly use it with form elements. Sometimes, we even use it with custom components.

Vue-2 allowed the use of only one v-model on a component. In Vue-3, we can bind any number of v-models to our custom components:

Teleport:

Fragments

Emits Component Option

createRenderer API from @vue/runtime-core (opens new window)to create custom renderers

SFC Composition API Syntax Sugar (<script setup>) (opens new window)experimental

SFC State-driven CSS Variables (v-bind in <style>) (opens new window)experimental

SFC <style scoped> can now include global rules or rules that target only slotted content

Currently the major changes in v.3 include:

TypeScript support

Modularity

Virtual DOM rewrite for faster performance

Slots Generation optimization (separate rendering for parent & child components)

Static props hoisting

Hooks API (experimental)

Time Slicing Support (experimental)

Let’s start with the API that most of you probably heard about…

Composition API: It’s a completely new approach to logic reuse and code organization.