Vue3結合TypeScript項目開發(fā)實踐總結
概述
Vue3出來已經有一段時間了，在團隊中，也進行了大量的業(yè)務實踐，也有了一些自己的思考。
總的來說，Vue3無論是在底層的原理上，還是在業(yè)務的實際開發(fā)中，都有了長足的進步。
使用 proxy 代替之前的 Object.defineProperty 的API，性能更加優(yōu)異，也解決了之前vue在處理對象、數組上的缺陷；在diff算法上，使用了靜態(tài)標記的方式，大大提升了Vue的執(zhí)行效率。
在使用的層面，我們從options Api，變成了composition Api，慢慢的在實際的業(yè)務中，我們拋棄了原本的data、methods、computed那種隔離式的寫法。compositon Api，它更加聚焦，它講究的是相關業(yè)務的聚合性。同時，在composition Api中，為了防止過于重的業(yè)務邏輯，它提供了一種關注點分離的方式，大大的提升了我們代碼的可讀性。
完全良好的支持了TypeScript，類型校驗也成為了以后Vue3進行大型項目開發(fā)的質量保障，同時這也是面向了趨勢 -- 前端的未來就是TypeScript！
1、compositon Api
compositon Api的本質，體現在代碼里面，也就是一個setup函數，在這個setup函數中，返回的數據，會用到該組件的模板中。return的這個對象，一定程度上，代表了之前vue2中的data屬性。
import { defineComponent, ref } from 'vue';
export default defineComponent({
name: 'Gift',
setup() {
const counter = ref(0);
return {
counter
}
}
})
這時候，對于大多數初學者來說，可能存在的疑惑就是，那么我能不能定義options Api的寫法，比如data、computed、watch、methods等等。
這里我需要明確的是，Vue3是完全兼容Vue2的這種options Api的寫法，但是從理念上來說，更加推薦setup的方式，來寫我們的組件。原因如下：Vue3的存在，本身是為了解決Vue2的問題的，Vue2的問題就是在于，聚合性不足，會導致代碼越來越臃腫！setup的方式，能夠讓data、方法邏輯、依賴關系等聚合在一塊，更方便維護。
也就是說，以后我們盡量不要寫單獨的data、computed、watch、methods等等，不是Vue3不支持，而是和Vue3的理念違背。
components屬性，也就是一個組件的子組件，這個配置在Vue2和3的差異不大，Vue2怎么用，Vue3依然那么用。
1、ref 和 reactive的區(qū)別？
在功能方面，ref 和 reactive，都是可以實現響應式數據！
在語法層面，兩個有差異。ref定義的響應式數據需要用[data].value的方式進行更改數據；reactive定義的數據需要[data].[prpoerty]的方式更改數據。
const actTitle: Ref<string> = ref('活動名稱');
const actData = reactive({
list: [],
total: 0,
curentPage: 1,
pageSize: 10
});
actTitle.value = '活動名稱2';
actData.total = 100;
但是在應用的層面，還是有差異的，通常來說：單個的普通類型的數據，我們使用ref來定義響應式。表單場景中，描述一個表單的key:value這種對象的場景，使用reactive；在一些場景下，某一個模塊的一組數據，通常也使用reactive的方式，定義數據。
那么，對象是不是非要使用reactive來定義呢？其實不是的，都可以，根據自己的業(yè)務場景，具體問題具體分析！ref他強調的是一個數據的value的更改，reactive強調的是定義的對象的某一個屬性的更改。
2、周期函數
周期函數，在Vue3中，是被單獨使用的，使用方式如下：
import { defineComponent, ref, onMounted } from 'vue';
export default defineComponent({
name: 'Gift',
setup() {
const counter = ref(0);
onMounted(() => {
// 處理業(yè)務，一般進行數據請求
})
return {
counter
}
}
})
3、store使用
在Vue2中，其實可以直接通過this.$store進行獲取，但是在Vue3中，其實沒有this這個概念，使用方式如下：
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、router的使用
在Vue2中，是通過this.$router的方式，進行路由的函數式編程，但是Vue3中，是這么使用的：
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
}
}
})
2、關注點分離
關注點分離，應該分兩層意思：第一層意思就是，Vue3的setup，本身就把相關的數據，處理邏輯放到一起，這就是一種關注點的聚合，更方便我們看業(yè)務代碼。
第二層意思，就是當setup變的更大的時候，我們可以在setup內部，提取相關的一塊業(yè)務，做到第二層的關注點分離。
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { defineComponent, ref, computed } from 'vue';
import useMerchantList from './merchant.js';
export default defineComponent({
name: 'Gift',
setup() {
const counter = ref(0);
const router = useRouter();
const onClick = () => {
router.push({ name: "AddGift" });
}
// 在該示例中，我們把獲取商家列表的相關業(yè)務分離出去。也就是下面的merchant.ts
const {merchantList} = useMerchantList();
return {
counter,
onClick,
merchantList
}
}
})
merchant.ts
import { getMerchantlist } from "@/api/rights/gift";
import { ref, onMounted } from "vue";
export default function useMerchantList(): Record<string, any> {
const merchantList = ref([]);
const fetchMerchantList = async () => {
let res = await getMerchantlist({});
merchantList.value = res?.data?.child;
};
onMounted(fetchMerchantList);
return {
merchantList
};
}
3、TypeScript支持
這一部分內容，準確的來說，是TS的內容，不過它與Vue3項目開發(fā)，息息相關，所以真的想用Vue3，我們還是得了解TS的使用。
不過這一部分，我不會介紹TS的基礎語法，主要是在業(yè)務場景中，如何組織TS。
使用TS進行業(yè)務開發(fā)，一個核心的思維是，先關注數據結構，再根據數據結構進行頁面開發(fā)。以前的前端開發(fā)模式是，先寫頁面，后關注數據。
比如要寫一個禮品列表的頁面，我們可能要定義這么一些interface。總而言之，我們需要關注的是：頁面數據的interface、接口返回的數據類型、接口的入參類型等等。
// 禮品創(chuàng)建、編輯、列表中的每一項，都會是這個數據類型。
interface IGiftItem {
id: string | number;
name: string;
desc: string;
[key: string]: any;
}
// 全局相應的類型定義
// 而且一般來說，我們不確認，接口返回的類型到底是什么（可能是null、可能是對象、也可能是數組），所以使用范型來定義interface
interface IRes<T> {
code: number;
msg: string;
data: T
}
// 接口返回數據類型定義
interface IGiftInfo {
list: Array<IGiftItem>;
pageNum: number;
pageSize: number;
total: number;
}
在一個常見的接口請求中，我們一般使用TS這么定義一個數據請求，數據請求的req類型，數據請求的res類型。
export const getGiftlist = (
params: Record<string, any>
): Promise<IRes<IGiftInfo>> => {
return Http.get("/apis/gift/list", params);
};
到此這篇關于Vue3結合TypeScript項目開發(fā)實踐總結的文章就介紹到這了,更多相關Vue3 TypeScript開發(fā)內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了Vue enter回車導致頁面刷新問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue-Cli項目優(yōu)化操作,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
這篇文章主要介紹了在vue3.0中如何配置代理問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要給大家介紹了關于vue3使用ref獲取dom結果為'null'的原因詳析,ref是Vue3中一個非常重要的功能,它可以用來獲取DOM節(jié)點,從而實現對DOM節(jié)點的操作,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了Vue的自定義組件不能使用click方法的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
在Vue中,父組件可以通過`ref`引用子組件,并通過`$refs`屬性來訪問子組件的數據,下面分步驟給大家介紹vue 父組件獲取子組件里面的data數據,感興趣的朋友一起看看吧2024-06-06
本篇文章主要介紹了基于vue實現swipe輪播組件實例代碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了Vue中TypeScript和Pinia使用方法,讓我們來看一個簡單的示例來演示TypeScript 和 Pinia的強大之處，需要的朋友可以參考下2023-07-07
Vue3動態(tài)組件怎么進行異常處理？下面本篇文章帶大家聊聊Vue3 動態(tài)組件異常處理的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2023-02-02
這篇文章主要為大家介紹了Avue?組件庫的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08