Vue3教程-使用Vue3新特性創建一個簡單App

1.Vue3安裝和設置
首先,我們需要把項目vue-next-webpack-preview復制過來，此項目包含Vue的設置

git clone https://github.com/vuejs/vue-next-webpack-preview.git vue3-experiment
cd vue3-experiment
npm i
當我們復制完項目和安裝完node_modules之后，我們需要把樣板的文件刪除,和重新創建一個新的main.js(window系統我找不到好命令，只好全部刪了再重新創建)

rd -r "src"
mkdir src
cd src
type > main.js
現在我們來運行一下(記得把路徑切換回跟目錄，假如路徑還是‘src’的話，執行下‘cd ../’)

npm run dev
2.創建一個新的Vue app
以前我們會用new Vue()去創建應用，現在我們引入createApp方法去創建。
我們會調用createApp方法，然后把我們定義的Vue實例對象作為參數傳入，之后createApp方法會返回一個app對象。
下一步，我們會調用app對象的mount方法，把我們css選擇器的元素傳進去，這個就像我們之前的vue2的$mount方法一樣

//main.js

import { createApp } from "vue";

const app = createApp({
// root instance definition
});

app.mount("#app");
為何要這么做
以前的話，我們會把一些全局寫在這里(如plugins, mixins, prototype properties等等)，假如有多個app的話，會造成實例污染。

//main.js

// Affects both instances
Vue.mixin({ ... })

const app1 = new Vue({ el: '#app-1' })
const app2 = new Vue({ el: '#app-2' })
vue3的createApp會返回一個全新的app，可以很好地避免這個問題

3.添加state屬性
這里，我們會創建一個'計數'的app，每次我們點擊按鈕，計數都+1。
在Vue2，我們可以在我們的app創建一個data對象，data對象里有創建一個count屬性作為記錄計數。

//main.js

const app = createApp({
data: {
count: 0
}
});
但現在不允許這樣干了，data對象必須通過工廠方法創建並返回，你必須要在Vue components中這么做。

//main.js

const app = createApp({
data: () => ({
count: 0
})
});
為何要這么做
假如有些情況，我們需要共享state呢？兩個app之間的state會互相影響。

//main.js

const state = {
sharedVal: 0
};

const app1 = new Vue({ state });
const app2 = new Vue({ state });

// Affects both instances
app1._data.sharedVal = 1;
但這方面的用例很少而且可以繞過，而且這樣聲明很不友善，所以這種特征（feature，或者說這種寫法吧）已經決定移除。
我們來繼續剛才計數app,我們需要加一個方法去增加記錄計數(count),這一點和Vue 2沒什么不同

//main.js

const app = createApp({
data: () => ({
count: 0
}),
methods: {
inc() {
this.count++;
}
}
});
4.使用root component
我們目前為止還有沒有component來瀏覽效果（文章說在控制台會出現‘Component is missing render function’的警告，但反正我看不到這個警告）。
現在我們來創建一個component來作為一個root實例。

cd src
type > App.vue
App.vue的內容我們先不管，現在我們可以獲取root實例用來渲染component了，在Vue2中，我們通常會用render方法去做:

//main.js

import App from "./App.vue";

const app = createApp({
...
render: h => h(App)
});

app.mount("#app");
我們依然可以這么做，但在Vue 3有一種更簡單的方法，我們可以直接把root實例作為參數帶過去:

//main.js

import App from "./App.vue";

const app = createApp(App);

app.mount("#app");
這意味着App component不止用來渲染root實例，而且本身就是一個root實例。
至此，我們讓代碼再變簡單點吧:

//main.js

createApp(App).mount("#app");
我們把之前計數的state和方法移動到App.vue(root component)吧。

//App.vue

5.創建template
這個沒啥好說，就是在root component添加template代碼，放一個按鈕，然后每點擊一次按鈕就+1，我們瀏覽器看到的就這個部分的內容：

//App.vue

以前的話，這樣寫一定會報錯，因為有兩個root元素，template下面只能允許一個大的html元素，包含所有，但在Vue3，我們沒有這樣的強制（終於把單元素這種寫法改掉了，以前一直就覺得有點受迫）。

6.Composition API
Composition API是Vue3的一個王牌。Composition API可以讓你使用setup方法去定義（define，定義或者設計的意思）控件。
直接看代碼吧，我們可以把App.vue寫成：

//App.vue

我們導入ref方法，這個方法可以讓我們去定義count這個變成，這個變量相當於this.count。假如我們不加ref方法，直接寫成‘const count = 0;’，count會變成一個常量，不會再改變，這個跟react是不是有點像？
更多可以參考這個文檔 Vue Composition API docs