Vue3目前還沒(méi)有文檔仔蝌，但git上面卻有些樣本，本來(lái)打算但拿它的樣本去寫(xiě)一個(gè)tutorial，但發(fā)現(xiàn)已經(jīng)有人寫(xiě)了挡育，而且寫(xiě)得很好。此文是我按著他的文章內(nèi)容用自己的系統(tǒng)環(huán)境走了一遍編寫(xiě)朴爬，大多數(shù)只是翻譯過(guò)來(lái)即寒。
相關(guān)參考：
https://vuejsdevelopers.com/2020/03/16/vue-js-tutorial/
https://github.com/vuejs/vue-next-webpack-preview
開(kāi)發(fā)環(huán)境:
window10 x64
node v10.16.3
npm v6.13.4
1.Vue3安裝和設(shè)置
首先,我們需要把項(xiàng)目vue-next-webpack-preview復(fù)制過(guò)來(lái)，此項(xiàng)目包含Vue的設(shè)置
git clone https://github.com/vuejs/vue-next-webpack-preview.git vue3-experiment
cd vue3-experiment
npm i
當(dāng)我們復(fù)制完項(xiàng)目和安裝完node_modules之后召噩，我們需要把樣板的文件刪除,和重新創(chuàng)建一個(gè)新的main.js(window系統(tǒng)我找不到好命令母赵，只好全部刪了再重新創(chuàng)建)
rd -r "src"
mkdir src
cd src
type > main.js
現(xiàn)在我們來(lái)運(yùn)行一下(記得把路徑切換回跟目錄，假如路徑還是‘src’的話具滴，執(zhí)行下‘cd ../’)
npm run dev
2.創(chuàng)建一個(gè)新的Vue app
以前我們會(huì)用new Vue()去創(chuàng)建應(yīng)用凹嘲，現(xiàn)在我們引入createApp方法去創(chuàng)建。
我們會(huì)調(diào)用createApp方法构韵，然后把我們定義的Vue實(shí)例對(duì)象作為參數(shù)傳入周蹭，之后createApp方法會(huì)返回一個(gè)app對(duì)象。
下一步疲恢，我們會(huì)調(diào)用app對(duì)象的mount方法谷醉，把我們css選擇器的元素傳進(jìn)去，這個(gè)就像我們之前的vue2的$mount方法一樣
//main.js
import { createApp } from "vue";
const app = createApp({
// root instance definition
});
app.mount("#app");
為何要這么做
以前的話冈闭，我們會(huì)把一些全局寫(xiě)在這里(如plugins, mixins, prototype properties等等)俱尼，假如有多個(gè)app的話，會(huì)造成實(shí)例污染萎攒。
//main.js
// Affects both instances
Vue.mixin({ ... })
const app1 = new Vue({ el: '#app-1' })
const app2 = new Vue({ el: '#app-2' })
vue3的createApp會(huì)返回一個(gè)全新的app遇八，可以很好地避免這個(gè)問(wèn)題
3.添加state屬性
這里，我們會(huì)創(chuàng)建一個(gè)'計(jì)數(shù)'的app耍休，每次我們點(diǎn)擊按鈕刃永，計(jì)數(shù)都+1。
在Vue2羊精，我們可以在我們的app創(chuàng)建一個(gè)data對(duì)象斯够，data對(duì)象里有創(chuàng)建一個(gè)count屬性作為記錄計(jì)數(shù)。
//main.js
const app = createApp({
data: {
count: 0
}
});
但現(xiàn)在不允許這樣干了喧锦，data對(duì)象必須通過(guò)工廠方法創(chuàng)建并返回读规，你必須要在Vue components中這么做。
//main.js
const app = createApp({
data: () => ({
count: 0
})
});
為何要這么做
假如有些情況燃少，我們需要共享state呢束亏？?jī)蓚€(gè)app之間的state會(huì)互相影響。
//main.js
const state = {
sharedVal: 0
};
const app1 = new Vue({ state });
const app2 = new Vue({ state });
// Affects both instances
app1._data.sharedVal = 1;
但這方面的用例很少而且可以繞過(guò)阵具，而且這樣聲明很不友善碍遍，所以這種特征（feature定铜，或者說(shuō)這種寫(xiě)法吧）已經(jīng)決定移除。
我們來(lái)繼續(xù)剛才計(jì)數(shù)app,我們需要加一個(gè)方法去增加記錄計(jì)數(shù)(count),這一點(diǎn)和Vue 2沒(méi)什么不同
//main.js
const app = createApp({
data: () => ({
count: 0
}),
methods: {
inc() {
this.count++;
}
}
});
4.使用root component
我們目前為止還有沒(méi)有component來(lái)瀏覽效果（文章說(shuō)在控制臺(tái)會(huì)出現(xiàn)‘Component is missing render function’的警告怕敬，但反正我看不到這個(gè)警告）揣炕。
現(xiàn)在我們來(lái)創(chuàng)建一個(gè)component來(lái)作為一個(gè)root實(shí)例。
cd src
type > App.vue
App.vue的內(nèi)容我們先不管东跪，現(xiàn)在我們可以獲取root實(shí)例用來(lái)渲染component了畸陡，在Vue2中，我們通常會(huì)用render方法去做:
//main.js
import App from "./App.vue";
const app = createApp({
...
render: h => h(App)
});
app.mount("#app");
我們依然可以這么做越庇，但在Vue 3有一種更簡(jiǎn)單的方法罩锐，我們可以直接把root實(shí)例作為參數(shù)帶過(guò)去:
//main.js
import App from "./App.vue";
const app = createApp(App);
app.mount("#app");
這意味著App component不止用來(lái)渲染root實(shí)例，而且本身就是一個(gè)root實(shí)例卤唉。
至此涩惑，我們讓代碼再變簡(jiǎn)單點(diǎn)吧:
//main.js
createApp(App).mount("#app");
我們把之前計(jì)數(shù)的state和方法移動(dòng)到App.vue(root component)吧。
//App.vue
<script>
export default {
data: () => ({
count: 0
}),
methods: {
inc() {
this.count++;
}
}
};
</script>
5.創(chuàng)建template
這個(gè)沒(méi)啥好說(shuō)桑驱，就是在root component添加template代碼竭恬，放一個(gè)按鈕，然后每點(diǎn)擊一次按鈕就+1熬的，我們?yōu)g覽器看到的就這個(gè)部分的內(nèi)容：
//App.vue
<template>
<span>Button clicked {{ count }} times.</span>
<button @click="inc">Inc</button>
</template>
<script>
...
</script>
以前的話痊硕，這樣寫(xiě)一定會(huì)報(bào)錯(cuò)，因?yàn)橛袃蓚€(gè)root元素押框，template下面只能允許一個(gè)大的html元素岔绸，包含所有，但在Vue3橡伞，我們沒(méi)有這樣的強(qiáng)制（終于把單元素這種寫(xiě)法改掉了盒揉，以前一直就覺(jué)得有點(diǎn)受迫）。
6.Composition API
Composition API是Vue3的一個(gè)王牌兑徘。Composition API可以讓你使用setup方法去定義（define刚盈，定義或者設(shè)計(jì)的意思）控件。
直接看代碼吧挂脑，我們可以把App.vue寫(xiě)成：
//App.vue
<template>
<span>Button clicked {{ count }}</span>
<button @click="inc">Inc</button>
</template>
<script>
import { ref } from "vue";
export default {
setup () {
const count = ref(0);
const inc = () => {
count.value++;
};
return {
count,
inc
}
}
};
</script>
我們導(dǎo)入ref方法藕漱，這個(gè)方法可以讓我們?nèi)ザxcount這個(gè)變成，這個(gè)變量相當(dāng)于this.count崭闲。假如我們不加ref方法肋联，直接寫(xiě)成‘const count = 0;’，count會(huì)變成一個(gè)常量镀脂，不會(huì)再改變牺蹄，這個(gè)跟react是不是有點(diǎn)像？
更多可以參考這個(gè)文檔 Vue Composition API docs
附最終效果圖：
