全局安裝/配置API更改 在Vue2.x中對全局屬性和全局API函數是這麼玩的 現在，讓我們看看它如何在Vue 3中運行： 您可能已經註意到，每個配置都限於使用定義的某個Vue應用程式createApp。 它可以使您的代碼更易於理解，並且不易出現由第三方插件引起的意外問題。當前，如果某些第三方解決方 ...
全局安裝/配置API更改
在Vue2.x中對全局屬性和全局API函數是這麼玩的
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')
現在，讓我們看看它如何在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')
您可能已經註意到，每個配置都限於使用定義的某個Vue應用程式createApp。
它可以使您的代碼更易於理解，並且不易出現由第三方插件引起的意外問題。當前，如果某些第三方解決方案正在修改Vue對象，則可能會以意想不到的方式（尤其是全局混合）影響您的應用程式，而Vue 3則無需擔心。
Fragment
如果您創建一個Vue組件，則它只能有一個根節點。
這意味著無法創建這樣的組件：
<template>
<div>Hello</div>
<div>World</div>
</template>
原因是代表任何Vue組件的Vue實例都需要綁定到單個DOM元素中。創建具有多個DOM節點的組件的唯一方法是通過創建不具有基礎Vue實例的功能組件。
當前，Vue 2中可以使用vue-fragments庫，而在Vue 3中，您可以立即使用它！
vue-fragments參考寫法
<template>
<v-fragment>
<div>Hello</div>
<div>World</div>
</v-fragment>
</template>
Suspense
其可以幫助我們更簡易的使用非同步請求及處理Loading組件的展示
<Suspense>
<template >
<Suspended-component />
</template>
<template #fallback>
Loading...
</template>
</Suspense>
Suspense可以掛起Loading內容將一直顯示到Suspended-component完全渲染為止。掛起可以等待，直到該組件被下載（如果這是一個非同步組件），或者在setup功能上執行一些非同步操作。
多個v-model
V模型是一種指令，可用於在給定組件上實現雙向綁定。我們可以傳遞反應性屬性並從組件內部對其進行修改。
看看v-model：
<input v-model="property />
將以上示例重寫為以下語法將具有完全相同的效果：
<input
v-bind:value="property"
v-on:input="property = $event.target.value"
/>
假如我們希望用v-model同樣給該元素添加 change事件、變更checked值進行綁定的話。
不幸的是，v-model每個組件只能有一個組件。
在Vue 3中這不會成為問題！您將能夠提供v-model屬性名稱，並根據需要擁有任意數量的屬性。在下麵，您可以v-model在表單組件中找到兩個的示例：
<InviteeForm
v-model:name="username"
v-model:email="email"
/>
Portals
Portals是特殊的組件，用於在當前組件之外呈現某些內容。
如果父組件有overflow: hidden 或 z-index 樣式，子組件作為模態框、彈出視窗以及通常顯示在頁面頂部的組件的時候，可能會因為z-index不足，被其他元素覆蓋，有了Portals就可以放心了！
對於每個Portals，我們需要指定它的目標目標，在其中將呈現Portals內容。在下麵，您可以看到portal-vue庫的實現，Vue 2中可以這麼用：
<portal to="destination">
<p>此插槽內容將呈現在name為“destination”的portal-target所在的任何位置。</p>
</portal>
<portal-target name="destination">
<!--
此組件可以位於應用程式中的任何位置。
上面porta組件的槽內容將在此處呈現。
-->
</portal-target>
Vue 3將附加對portals的開箱即用支持！
新的自定義指令API
自定義指令API在Vue 3中將略有變化，以更好地與組件生命周期保持一致。這項更改將使API更加直觀，從而使新手更容易理解和學習API。
這是當前的自定義指令API：
const MyDirective = {
bind(el, binding, vnode, prevVnode) {},
inserted() {},
update() {},
componentUpdated() {},
unbind() {}
}
……這就是Vue 3中的樣子。
const MyDirective = {
beforeMount(el, binding, vnode, prevVnode) {},
mounted() {},
beforeUpdate() {},
updated() {},
beforeUnmount() {}, // new
unmounted() {}
}
即使這是一項重大更改，也應該使用Vue相容性構建輕鬆涵蓋。
