New features in Vue 3:

What’s New in Vue 3:

More Maintainable
TypeScript & Modularized internals

Faster
Proxy-based Reactivity System
Compiler-informed Virtual DOM &SSR

Smaller
Tree-Shaking
Compile-time flags

Scales Better
Composition API

Better 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

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 components (computed properties, methods, lifecycle hooks, and so on) as well as to the component’s template.

Let’s add setup to our component:

setup to our 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:

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”.

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.

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.

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, the 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 the 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.

References:

Introduction | Vue.js

Learn about the new and exciting features that are Vue 3 brings to the table