Vue3 Features:
- Vue 3 is faster, smaller in file size, and equipped with improved TypeScript support.
- Some of the new features include:
- Composition API
- Portals
- Global Mounting/Configuration API changes
- Multiple Root elements
- Suspense
- Multiple v-models
- Full TypeScript support
- Fragments
- Custom Directive API
The Composition API:
- The Composition API is an alternative to the existing Vue Options API.
- It's designed with TypeScript support in mind, along with code reuse, maintainability, and the organization of functionality based on logical concerns
- There are two primary advantages to using the Composition API:
- Improved organization
- Code sharing and reusability
Portals:
- Portals are a concept borrowed from React.
- It's responsible for rendering something in a location that is different from where it's initially declared.
- In the context of Vue 3, a Portal enables you to render a component or a portion of a component at a different position within the DOM tree.
- In Vue 3, portals will be integrated, making them very user-friendly.
- Vue 3 introduces a dedicated element called <Teleport>, and any code enclosed within this element will be primed for teleportation to any location.
- The <Teleport> element requires a to attribute.
Global Mounting/Configuration API changes:
- The process of mounting your Vue app has undergone slight changes, enhancing the potential for what can be achieved.
- The transition involves moving from a single global instance to declaring an instance and subsequently mounting it.
Multiple root elements (template syntax):
- In Vue 2, the <template> tag could only accommodate a single root element.
- Even when using just two <p> tags, they had to be wrapped within a <div> tag to function correctly.
- Consequently, modifications to the CSS in the parent component were often necessary to achieve the desired appearance.
- However, Vue 3 removes this constraint, eliminating the requirement for a root element altogether.
Suspense:
- Suspense is a novel feature that displays a default or fallback component while the main component retrieves the data.
- Suspense is a unique component that displays fallback content in place of your component until a certain condition is fulfilled.
- Often, async operations are employed to fetch data from servers.
- Instead of managing the template with v-if to toggle between different states before and after data retrieval, Suspense takes care of this process automatically.
Multiple v-models:
- We're all acquainted with the usage of v-model for achieving two-way binding, commonly applied to form elements and occasionally to custom components as well.
- If you're well-versed in Vue, you're probably familiar with the concept of v-model – it's a directive facilitating bidirectional binding within a component.
- Through it, you provide a reactive property and enable modifications from within.
- What you might not be aware of is that v-model essentially simplifies the process of passing a value and listening for the input event.
Full TypeScript Support:
- Vue 3 offers comprehensive TypeScript support.
- While TypeScript could be integrated into Vue 2, the process often felt forced and makeshift.
- Vue 3, on the other hand, is built using TypeScript, complete with auto-generated type definitions.
- The API remains consistent across both TypeScript and JavaScript implementations.
Custom Directive API:
- If you've used Vue, you're likely familiar with the concept of directives.
- One of the fundamental built-in directives is the one we discussed when covering v-model.
- Others, such as v-show, also play key roles.
- In Vue 2, it's possible to create custom directives.
- However, Vue 3 brings about changes in this aspect.
- The reason lies in the current state of the Directive API, which employs its own set of lifecycle methods that differ from the standard Vue lifecycle.
- These methods include bind, inserted, update, componentUpdated, and unbind.
- In Vue 3, these methods are synchronized with the regular Vue lifecycle, resulting in new lifecycle hooks: beforeMount, mounted, beforeUpdate, updated, beforeUnmount, and unmounted.
- This alignment simplifies the process of remembering and utilizing these hooks while developing your application.
- No more need to search for the specific method or recall two separate lifecycles.
Fragments:
- Another concept adopted from React is Fragments, sometimes referred to as “Multiple Root Nodes.”
- In Vue 2, you were limited to having just one root element in a component.
- Fragments tackle this limitation and enable you to incorporate multiple root nodes within a component.
- Working with multiple root nodes is as straightforward as it sounds.
- The only aspect to keep in mind is that if you intend to utilize attribute inheritance, you must specify which of the root components should inherit any attributes passed to the parent component.