Vue3 the big hits - other technologies

Global Installation / Configuration API changes

In Vue2.x in the global property and global API function is so fun

import Vue from 'vue'
import App from './App.vue'

Vue.config.ignoredElements = [/^app-/]
Vue.use(/* ... */)
Vue.mixin(/* ... */)
Vue.component(/* ... */)
Vue.directive(/* ... */)

new Vue({
  render: h => h(App)
}).$mount('#app')

Now, let's see how it works in the Vue 3:

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.config.ignoredElements = [/^app-/]
app.use(/* ... */)
app.mixin(/* ... */)
app.component(/* ... */)
app.directive(/* ... */)

app.mount('#app')

You may have noticed that each configuration are limited to a certain Vue application using the defined createApp.

It can make your code easier to understand, and less prone to unexpected problems caused by third-party plug-ins. Currently, if some third-party solutions are modifying Vue object, you might be in unexpected ways (especially global mix) affect your application, Vue 3 is no need to worry.

Fragment

If you create a Vue component, it can have only one root node.

This means you can not create such components:

<template>
  <div>Hello</div>
  <div>World</div>
</template>

The reason is representative of any component Vue Vue instance needs to bind to a single DOM element. The only way to create DOM assembly having a plurality of nodes having no basic functional components by creating instances Vue.

Current, Vue 2 can be used vue-fragments library, and in the Vue 3, you can use it immediately! Reference vue-fragments wording

<template>
        <v-fragment> 
              <div>Hello</div>
              <div>World</div>
        </v-fragment> 
    </template>

Suspense

It can help us be more simple to use asynchronous request processing and display components Loading

<Suspense>
  <template >
    <Suspended-component />
  </template>
  <template #fallback>
    Loading...
  </template>
</Suspense>

Suspense can hang Loading content will always be displayed to the Suspended-component fully rendered so far. Suspend can wait until the assembly is downloaded (if it is an asynchronous component), or perform some operation on an asynchronous setup function.

More v-model

V model is a command, it may be used to implement two-way binding on the given component. We can pass reactivity and modify the properties of the internal components.

Look v-model:

<input v-model="property />

The above example will be rewritten as the following syntax have exactly the same effect:

<input 
  v-bind:value="property"
  v-on:input="property = $event.target.value"
/>

If we want the same elements are added to the change events with v-model, change the value to bind checked words. Unfortunately, v-model each component can be only one component.

In Vue 3 This will not be a problem! You will be able to provide the v-model attribute name, and have any number of properties as required. Below, you can find the v-model examples in the form of two components:

<InviteeForm
  v-model:name="username"
  v-model:email="email"
/>

Portals

Portals are special assemblies for presenting some of the content outside of the current assembly. If parent element has overflow: hidden or z-index style, as a sub-assembly frame mode, and the pop-up window when the display assembly is usually the top of the page, may be due to insufficient z-index, covered by other elements, it has Portals you can rest assured!

For each Portals, we need to specify its target goal, which will be presented Portals content. Below, you can see the implementation of portal-vue library, Vue 2 can be something like this:

<portal to="destination">
  <p>此插槽内容将呈现在name为“destination”的portal-target所在的任何位置。</p>
</portal>

<portal-target name="destination">
  <!--
  此组件可以位于应用程序中的任何位置。
  上面porta组件的槽内容将在此处呈现。
  -->
</portal-target>

Vue 3 additional out of the box ready to use support for portals!

New custom command API

Custom instructions will vary slightly Vue 3 API, to better align with the component life cycle. This change will make the API more intuitive, making it easier for novices to understand and learn API.

This is the current custom commands API:

const MyDirective = {
  bind(el, binding, vnode, prevVnode) {},
  inserted() {},
  update() {},
  componentUpdated() {},
  unbind() {}
}

...... This is the way in Vue 3.

const MyDirective = {
  beforeMount(el, binding, vnode, prevVnode) {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeUnmount() {}, // new
  unmounted() {}
}

Even though this is a major change, it should be easy to build using Vue covers compatibility.