關(guān)于Vue3和Ts的心得和考慮
七月在線-機(jī)器學(xué)習(xí)集訓(xùn)營(yíng)15期2022最新

download：https://www.51xuebc.com/thread-499-1-1.html

1 前言
Vue3曾經(jīng)正式發(fā)布了一段時(shí)間了，各種生態(tài)曾經(jīng)成熟。最近運(yùn)用taro+vue3重構(gòu)冷鏈的小程序，經(jīng)過了一段時(shí)間的開發(fā)和運(yùn)用，有了一些本人的考慮。

總的來說，Vue3無論是在底層原理還是在實(shí)踐開發(fā)過程中，都有了很大的進(jìn)步。

從源碼層面來說，運(yùn)用Proxy替代Object.defineProperty的API，一個(gè)是代理的對(duì)象，一個(gè)是遞歸監(jiān)控的屬性，從而在性能上有了很大的進(jìn)步，并且，也處理了對(duì)象動(dòng)態(tài)屬性增加、數(shù)組改動(dòng)監(jiān)聽上的缺陷；對(duì)diff算法停止優(yōu)化，增加了靜態(tài)標(biāo)志，大大進(jìn)步了Vue的執(zhí)行效率；還有靜態(tài)提升、事情監(jiān)聽緩存等一系列提升效率的手腕。

從應(yīng)用層面來說，主要的改動(dòng)是將option API改成了composition API（組合式API），在業(yè)務(wù)中丟棄data、methods、生命周期函數(shù)隔分開的開發(fā)方式，使代碼相關(guān)于業(yè)務(wù)有更強(qiáng)的聚合性，在代碼開發(fā)、代碼閱讀、代碼維護(hù)方面關(guān)于開發(fā)者都是愈加友好。

關(guān)于typescript有了更好的支持，我們曉得，關(guān)于大型的前端項(xiàng)目來說，運(yùn)用typescript的類型校驗(yàn)，能使前端項(xiàng)目有更強(qiáng)的強(qiáng)健性，這也使得Vue3關(guān)于大型項(xiàng)目的開發(fā)提供了更強(qiáng)的質(zhì)量保證。

2 組合式API
所謂的組合式API，將Vue2中的data、methods、生命周期、數(shù)據(jù)監(jiān)聽等option，都封裝成鉤子函數(shù)，然后組合到setup函數(shù)中，其中心就在于setup函數(shù)。setup函數(shù)存在的意義，就是為了運(yùn)用這些新增的組合式API，并且這些API只能在setup函數(shù)中運(yùn)用。

setup函數(shù)執(zhí)行的機(jī)遇是，props初始化之后，beforeCreate函數(shù)執(zhí)行之前，所以在執(zhí)行setup時(shí)，還沒有初始化Vue實(shí)例，因而在setup中不能運(yùn)用this對(duì)象。setup函數(shù)的返回值會(huì)被注入到Vue實(shí)例中，供Vue組件運(yùn)用，所以任何數(shù)據(jù)想在Vue組件的模板中運(yùn)用，必需在setup函數(shù)中return進(jìn)來。

組合式API的組合，表現(xiàn)在兩個(gè)層面。第一層的意義是，將某一業(yè)務(wù)相關(guān)數(shù)據(jù)和處置邏輯放到一同，這是一種關(guān)注點(diǎn)的聚合，更便當(dāng)我們編寫代碼、處置業(yè)務(wù)邏輯，并且能更聚焦業(yè)務(wù)邏輯，更便當(dāng)我們看代碼。第二層面的意義，當(dāng)某個(gè)組件的業(yè)務(wù)邏輯足夠復(fù)雜，setup中的代碼足夠大的狀況下，我們能夠在setup內(nèi)部，進(jìn)一步提取相關(guān)的一塊業(yè)務(wù)，使代碼邏輯愈加明晰，做到了進(jìn)一步的聚協(xié)作用。

如下面代碼所示，將業(yè)務(wù)代碼塊A抽出來，則代碼塊A中return出來的數(shù)據(jù)就能夠在組件中運(yùn)用：

// 組件
import functionA from 'A'
export default defineComponent({
name: 'componentName',
setup() {
...functionA()
}
})
// 代碼塊A
export default () => {
return {
a: 1
}
}
3 響應(yīng)式API
在Vue3中響應(yīng)式API，主要表現(xiàn)在ref和reactive兩個(gè)函數(shù)。關(guān)于響應(yīng)式API，想說兩個(gè)問題，第一個(gè)是為什么要增加響應(yīng)式API，第二個(gè)是響應(yīng)式API函數(shù)ref和reactive的異同點(diǎn)。

3.1 為什么增加響應(yīng)式API
在Vue2中一切數(shù)據(jù)都寫在data的option中，data中的數(shù)據(jù)都是響應(yīng)式的，這樣產(chǎn)生的一個(gè)問題是，有些常量數(shù)據(jù)自身不需求監(jiān)聽，從而形成了資源的糜費(fèi)。所以在Vue3中增加了響應(yīng)式API，只需求對(duì)需求動(dòng)態(tài)更新dom的數(shù)據(jù)停止響應(yīng)式，不需求動(dòng)態(tài)更新dom的數(shù)據(jù)不停止響應(yīng)式處置，從很大水平上儉省了資源。這里我覺得需求留意的是，寫代碼的時(shí)分一定要認(rèn)真考慮一下，哪些數(shù)據(jù)需求停止響應(yīng)式綁定，哪些數(shù)據(jù)不需求停止響應(yīng)式綁定，而不是一股腦的全給綁定上，這樣即便代碼邏輯不能很明晰易懂，并且也會(huì)影響執(zhí)行效率（寫慣了Vue2的同窗需求留意）。

3.2 ref和reactive的異同點(diǎn)
在理解了為什么要增加響應(yīng)式API后，我們發(fā)現(xiàn)Vue3提供了兩個(gè)響應(yīng)式API函數(shù)，ref和reactive。為什么會(huì)提供兩個(gè)API呢？ 一個(gè)不就能夠了嗎？那么這兩個(gè)API之間的區(qū)別是什么呢？

在運(yùn)用層面，ref綁定的數(shù)據(jù)，需求運(yùn)用[data].value停止數(shù)據(jù)更改。而reactive綁定的數(shù)據(jù)需求運(yùn)用[data].[prpoerty]的方式停止數(shù)據(jù)更改。在運(yùn)用場(chǎng)景方面，普通的，單個(gè)的普通數(shù)據(jù)，我們運(yùn)用ref來定義響應(yīng)式。而復(fù)雜數(shù)據(jù)，如：表單數(shù)據(jù)對(duì)象、某一模塊的一組數(shù)據(jù)等，運(yùn)用reactive來定義響應(yīng)式。

那么，對(duì)象是不是必需用reactive來定義呢？ 其實(shí)不是的，都能夠。官方說法是：能夠依據(jù)本身習(xí)氣運(yùn)用不同的API。其實(shí)，我覺得，他們是有各自的運(yùn)用場(chǎng)景的，ref更強(qiáng)調(diào)的是數(shù)據(jù)Value的改動(dòng)，reactive更強(qiáng)調(diào)的是數(shù)據(jù)中某一屬性的改動(dòng)。

4 treeShaking思想
當(dāng) Javascript 項(xiàng)目到達(dá)一定體積時(shí)，將代碼分紅模塊會(huì)更易于管理。但是，當(dāng)這樣做時(shí)，我們最終可能會(huì)導(dǎo)入實(shí)踐上未運(yùn)用的代碼。Tree Shaking 是一種經(jīng)過消弭最終文件中未運(yùn)用的代碼來優(yōu)化體積的辦法。

Vue3運(yùn)用了tree shaking的辦法，將組件以及其一切的生命周期函數(shù)等辦法停止分開，假如在組件中運(yùn)用的代碼將不會(huì)呈現(xiàn)在最終的打包文件中，如此，會(huì)減少大大Vue3項(xiàng)目的打包體積。由此形成的一個(gè)結(jié)果就是，運(yùn)用辦法的不同。

4.1 生命周期函數(shù)的運(yùn)用辦法

import { defineComponent, ref, onMounted } from 'vue';
export default defineComponent({
name: 'Gift',
setup() {
const counter = ref(0);
onMounted(() => {
// 處置業(yè)務(wù)，普通停止數(shù)據(jù)懇求
})
return {
counter
}
}
})
4.2 Vuex的運(yùn)用辦法
import { useStore } from "vuex";
import { defineComponent, ref, computed } from 'vue';
export default defineComponent({
name: 'Gift',
setup() {
const counter = ref(0);
const store = useStore();
const storeData = computed(() => store); // 配合computed，獲取store的值。
return {
counter,
storeData
}
}
})
4.3 Router的運(yùn)用辦法
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { defineComponent, ref, computed } from 'vue';
export default defineComponent({
name: 'Gift',
setup() {
const counter = ref(0);
const router = useRouter();
const onClick = () => {
router.push({ name: "AddGift" });
}
return {
counter,
onClick
}
}
})
5 關(guān)于Typescript的運(yùn)用
這一局部是關(guān)于Ts的內(nèi)容，不過它與Vue3的開發(fā)息息相關(guān)。Vue3整體是運(yùn)用Ts寫的，因而，開發(fā)Vue3的項(xiàng)目需求運(yùn)用Ts，所以，我們還是要理解TS的。

關(guān)于Ts的運(yùn)用這里就不在細(xì)說了，在這里想說的的是，在實(shí)踐業(yè)務(wù)場(chǎng)景中是如何組織Ts代碼的。經(jīng)過對(duì)TS的大量運(yùn)用，我的一個(gè)領(lǐng)會(huì)是：Ts的中心思想是先關(guān)注數(shù)據(jù)構(gòu)造，在依據(jù)數(shù)據(jù)構(gòu)造停止頁面開發(fā)。而以前的前端開發(fā)形式是，先寫頁面，然后再關(guān)注數(shù)據(jù)。

比方說，我們要開發(fā)一個(gè)頁面，我們可能需求先定義一些interface。開發(fā)頁面的時(shí)分我們要關(guān)注：頁面數(shù)據(jù)的interface、接口返回?cái)?shù)據(jù)的類型、懇求參數(shù)的類型等等。