Vue 3教程
Vue 3尚未正式發佈，但是維護者已經發布了Beta版本，供我們的參與者嘗試並提供反饋。
如果你想知道Vue 3的主要功能和主要變化是什麼，那麼我將在這篇文章中重點介紹一下，告訴你使用Vue 3 beta 9創建一個簡單的應用程序。
我將介紹儘可能多的新內容，包括fragments，teleport，Composition API以及其他一些晦澀的更改。我將盡力解釋該功能或更改的原理。
目錄
我們將建立什麼
我們將構建一個帶有模式窗口功能的簡單應用。我之所以選擇它，是因為它可以方便地展示Vue 3的許多變化。
這是該應用在打開和關閉狀態下的外觀，因此你可以在腦海中描繪出我們正在做什麼：
Vue 3安裝和setup
與其直接安裝Vue 3，不如克隆一個項目 vue-next-webpack-preview，這將為我們提供一個包括Vue 3在內的最小的Webpack設置。
$ git clone https://github.com/vuejs/vue-next-webpack-preview.git vue3-experiment
$ cd vue3-experiment
$ npm i
一旦克隆好了，安裝好了NPM模塊，我們需要做的就是刪除樣板文件，然後創建一個新的 main.js 文件，這樣我們就可以從頭開始創建我們的Vue 3 app了。
$ rm -rf src/*
$ touch src/main.js
現在，我們將運行開發服務器：
$ npm run dev
創建一個新的Vue 3 app
我們啓動一個新的Vue應用程序的方式改變了，我們現在需要導入新的 createApp 方法，而不是使用新的 Vue()。
我們調用這個方法，傳遞我們的Vue實例定義對象，並將返回對象分配給一個變量 app。
接下來，我們將在 app 上調用 mount 方法，並傳遞一個CSS選擇器來指示我們的mount元素，就像在Vue 2中使用 $mount 實例方法一樣。
// src/main.js
import { createApp } from "vue";
const app = createApp({
// 根實例定義
});
app.mount("#app");
變化的原因
與舊的API一樣，我們添加的任何全局配置（plugins，mixins，原型屬性等）都將永久更改全局狀態。例如：
// src/main.js
// 影響兩個實例
Vue.mixin({ ... })
const app1 = new Vue({ el: '#app-1' })
const app2 = new Vue({ el: '#app-2' })
在單元測試中，這確實是一個問題，因為要確保將每個測試都與上一個測試隔離是很棘手的。
在新的API下，調用 createApp 將返回一個新的app實例，該實例不會被應用於其他實例的任何全局配置污染。
添加state屬性
我們的模態窗口可以處於兩種狀態之一——打開或關閉。讓我們用一個布爾狀態屬性 modalOpen 來管理它，我們將給它一個初始值 false。
在Vue 2下，我們可以通過在我們的應用實例上創建一個 data 屬性並將一個對象分配給該對象來聲明 modalOpen 屬性，例如：
// src/main.js
const app = createApp({
data: {
modalOpen: false
}
});
不再允許這樣做。相反，必須為數據分配一個返回狀態對象的工廠函數。
// src/main.js
const app = createApp({
data: () => ({
modalOpen: false
})
});
變化的原因
使用對象而不是工廠函數來存儲數據的優點是，首先，它在語法上更簡單；其次，你可以在多個根實例之間共享頂級狀態，例如：
// src/main.js
const state = {
sharedVal: 0
};
const app1 = new Vue({ state });
const app2 = new Vue({ state });
// 影響兩個實例
app1._data.sharedVal = 1;
這種用例很少，可以使用。因為有兩種類型的聲明是不適合初學者的，所以決定刪除這個特性。
在繼續之前，我們還添加一個方法來切換 modalOpen 值。這與Vue 2沒什麼不同。
// src/main.js
const app = createApp({
data: () => ({
modalOpen: true
}),
methods: {
toggleModalState() {
this.modalOpen = !this.modalOpen;
}
}
});
使用一個根組件
如果你現在進入瀏覽器並檢查控制枱，則會看到警告“Component is missing render function”，因為我們尚未為根實例定義模板。
Vue 2的最佳實踐是為根實例創建一個最小的模板，並創建一個app組件，其中將聲明主app標記。
讓我們在這裏也這樣做。
$ touch src/App.vue
現在我們可以獲取根實例來渲染該組件。區別在於，對於Vue 2，我們通常會使用render函數來執行此操作：
// src/main.js
import App from "./App.vue";
const app = createApp({
...
render: h => h(App)
});
app.mount("#app");
我們仍然可以做到這一點，但是Vue 3有一個更簡單的方法——使 App 成為根組件。為此，我們可以刪除根實例定義，而是傳遞 App 組件。
// src/main.js
import App from "./App.vue";
const app = createApp(App);
app.mount("#app");
這意味着 App 組件不僅由根實例渲染，而且是根實例。
在此過程中，我們通過刪除 app 變量來簡化語法：
// src/main.js
createApp(App).mount("#app");
現在移至根組件，讓我們向該組件重新添加狀態和方法：
// src/App.vue