Vue3 - Vite2 - TypeScript 開發覆盤總結
https://juejin.cn/post/6950487211368251399
背景
近期在研發一套物聯網設備管理系統，其主要用途是將公司旗下所負責智能園區中的硬件設備通過物聯網雲平臺來進行綜合管控。
由於這個產品是實驗性項目，沒有合同，沒有明確收益。所以能夠拿到的資源非常少。
產品具體的負責人，只有 1.5 人，幾乎只有我自己。所以既要擔任產品經理，又要擔任開發者，還要擔任運維。不過從技術角度而言，選型可以更加自由。
整個系統在架構上設計分爲 4 層。自底向上分別是設備硬件、設備接入網關、物聯網平臺、設備管理系統。除去設備硬件，其它 3 層都屬於軟件範疇。
這篇文章主要記錄一下我在開發最後一層 - 設備管理系統的前端開發過程中的一些總結。
前端採用 Vite2.x、Vue3.x、Vuex4.x、VueRouter4.x、TypeScript、Element-Plus 進行開發。可以看到，這些框架和庫所採用的版本是比較激進的，大部分都是最新版本，以及 rc 和 beta 版本。不過從項目開始到寫這篇總結，其中的一些庫的版本已經不是最新的了，不得不感慨前端技術變化之快。
一個組件的思考
首先來看一個組件。
水波紋. gif
這是一個具有波紋效果、用來表示當前 websocket 連接狀態的小圓點。是一個非常簡單的純展示組件。樣式效果使用 css3 變量、動畫、和 before、after 僞類實現。
props 設計非常簡單，只有一個 type 字段。根據 type 字段的不同，波紋的顏色也不同。
思路有了，下面是實現上的一些細節性問題。
如何聲明字段名爲枚舉的類型？
根據設計，type 字段應該是一個枚舉值，不應該由調用方隨意設置。
下面是 Type 的枚舉聲明，共有 6 個字段。
enum Type {
primary = "primary",
success = "success",
warning = "warning",
warn = "warn", // warning alias
danger = "danger",
info = "info",
}
TypeScript 中聲明類型的關鍵字有兩個，interface 和 type，在聲明 key 不確定類型的字段時稍有不同。
使用 type 進行聲明：
type ColorConfig = {
[key in Type]: Colors;
};
使用 interface 卻只能像下面這樣：
interface ColorConfig {
[key: string]: Colors;
}
因爲 interface 的索引只能是基礎類型，類型別名也不可以。而 type 的索引可以是複合類型。
Vue 3 如何獲取元素實例？
在 vue3 中，組件的邏輯可以放在 setup 函數里面，但是 setup 中不再有 this，所以 vue2 中的 this.$refs 的用法在 vue3 中無法使用。
新的用法是：
-
給元素添加 ref 屬性。
-
在 setup 中聲明與元素 ref 同名的變量。
-
在 setup 的 return 對象中將 ref 變量作爲同名屬性返回。
-
在 onMounted 生命週期中訪問 ref 變量，既是元素實例。
第一步：
<div class="point point-flicker" ref="point"></div>第二步：
const point = ref<HTMLDivElement | null>(null);
注意類型要填寫 HTMLDivElement，這樣才能享受類型推斷。
第三步：
return { point };
這一步必不可少，如果返回對象中不包含這個同名屬性，onMounted 中訪問的 ref 對象會是 null。
第四步：
onMounted(() => {
if (point?.value) {
// logic
}
});
如何操作僞類？
JavaScript 無法獲取到僞類元素，但是可以換一種思路。僞類樣式引用 css 變量，再通過 js 控制 css 變量來完成間接操作僞類的效果。
比如這是一個僞類：
.point-flicker:after {
background-color: var(--afterBg);
}它依賴了 afterBg 變量。
如果需要修改它的內容，只需要使用 js 操作 afterBg 的內容即可。
point.value.style.setProperty("--bg", colorConfig[props.type].bg);
API 的變化
Vue3 中組件如何修改自身的 props？
有一種不是很常見的情況，需要組件修改父組件傳遞給自己的 Props。
比如抽屜組件、擬態框組件等。
在 vue2 中常見的用法是 sync 和 v-model。
vue3 中只推薦使用 v-model:xxx="" 的方式。
比如父組件傳遞：
<ws-log v-model="wsLogVisible" />
子組件：
<template>
<div v-model:visible="visible">
...
</div>
</template>
<script>
// ...
props: {
visible: {
type: Boolean,
},
},
</script>
Vue3 中 watch 用法的變化
watch 變得更加簡單。
import { watch } from "vue";
watch(source, (currentValue, oldValue) => {
// logic
});
當 source 變化時自動執行 watch 第二個參數所傳入的函數。
Vue3 中 computed 用法的變化
computed 也變得更加簡單。
import { computed } from "vue"
const v = computed(() => {
return x
});
computed 返回的變量是一個響應式對象。
Vue3 中組件循環自身的技巧
這是一種開發組件的技巧。
假設你有一個不確定深度的樹狀結構數據。
{
"label": "root",
"children": [
{
"label": "a",
"children": [
{
"label": "a1",
"children": []
},
{
"label": "a2",
"children": []
}
]
}
]
}
它的類型定義如下：
export interface Menu {
id: string;
label: string;
children: Menu | null;
}
你需要實現一種樹狀組件來渲染它們。這時就需要用到這種技巧。
<template>
<div>{{ menu.label }}</div>
<Menu
@select="select"
v-for="item in menu.children"
:key="item.id"
:menu="item"
/>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: "Menu",
props: {
menu: {
type: Object,
},
},
});
</script>
組件的 name 可以在自身中直接使用，而不需要在 component 中聲明。
一些坑
Vuex：慎用 Map
在 Vuex 中，我設計了一個數據結構用於存儲模塊（業務概念）不同的狀態。
type Code = number;
export type ModuleState = Map<Code, StateProperty>;
但是我發現一個問題，當我修改 Map 中某一個 value 中的屬性時，不會觸發 Vuex 的監聽。
所以我只好將數據結構修改爲對象的形式。
export type ModuleState = { [key in Code]: StateProperty };
ts 中索引不可以使用類型別名，但是可以寫成下面這樣：
type Code = number;
export type ModuleState = { [key in Code]: StateProperty };
除此之外，Map 還存在另外一個問題。
當一個 Map 類型的 Proxy 對象作爲參數被傳遞時，是無法使用 get、set、clear 等 Map 方法的，但是 TypeScript 會提示這些方法可用。如果使用了這些方法，會得到一個 Uncaught TypeError。
如果使用 Object 則不會產生這個問題。
WebSocket 發生異常無法被 try catch 監聽
ws 的異常只能在 onerror 和 onclose 兩個事件中進行處理，try catch 是無法捕獲的。
有些時候，onerror 和 onclose 會連續執行，比如觸發 onerror，導致連接關閉，就會緊接着觸發 onclose。
Vue Devtools
vue devtools 目前無法支持 Vue3，但是 vue devtools 幾乎是開發中必不可少的工具，目前可以使用 vue devtools beta 版本，但存在一些 Bug。
下載地址
用法非常簡單，安裝後重啓瀏覽器就可以。不需要設置 vue.config.devtools = true，在 vue3 中 vue.config 實例不存在 devtools 屬性。
ESbuild 安裝依賴
在使用 vite 啓動服務的同時安裝依賴，非常容易碰到一個錯誤。
Error: EBUSY: resource busy or locked, open 'E:\gxt\property-relay-fed\node_modules\esbuild\esbuild.exe'這個問題的原因是 vite 依賴的編譯工具 esbuild.exe 被佔用所導致的，解決方法很簡單，就是停掉 vite，安裝完依賴後再重新啓動 vite。
Vite 在 Chrome 中調試的問題
系統中有一些移動頁面，需要嵌入在 App 中使用。
常見的調試 WebView 的方法有兩種，一種簡單的方式是使用騰訊開源的 vcosnole，另一種麻煩一些的調試方式是使用 Chrome 的 DevTools。
但是 vconsole 並沒有想象中那麼好用。
image.png
所以我選擇使用 Chrome 調試，chrome://inspect/#devices
但是在調試過程中我發現 Chrome 調試工具裏面竟然運行的是 TS 源碼，TS 的語法直接被認爲語法錯誤。（我是使用 Vite 啓動的開發服務。）
解決方案很簡單，但挺 Low。先使用 vite build 把 TS 代碼編譯成 JS，再使用 vite preview 啓動服務。
WebSocket
websocket 和 Vue3 沒什麼關係，但是在這裏簡單提一下。
設備管理系統的核心概念是設備，設備會有很多屬性，在硬件上也被稱作數據點。這些屬性會經歷非常長的鏈路傳輸到用戶界面上。整體流程大概是：硬件通過 tcp 協議上傳到接入網關，接入網關處理後再通過 mqtt 協議上傳到物聯網平臺，物聯網平臺再經過規則引擎處理，通過 webhook restful 的形式發送到業務系統，業務系統再通過 websocket 推送到前端。
雖然數據通過層層編解碼、不同的協議繞了非常遠的距離呈現到用戶面前，但是前端只需要關心 websocket 就足夠了。
WebSocket 重連
在做重連時，需要注意 onerror 和 onclose 連續執行的問題，通常是使用類似防抖的方法來解決。
我的做法是增加一個變量來控制重連次數。
let connecting = false; // 斷開連接後，先觸發 onerror，再觸發 onclose，主要用於防止重複觸發
conn();
function conn() {
connecting = false;
if (ctx.state.stateWS.instance && ctx.state.stateWS.instance.close) {
ctx.state.stateWS.instance.close();
}
const url = ctx.state.stateWS.url + "?Authorization=" + getAuthtication();
ctx.state.stateWS.instance = new WebSocket(url);
ctx.state.stateWS.instance.onopen = () => {
ctx.commit(ActionType.SUCCESS);
};
ctx.state.stateWS.instance.onclose = () => {
if (connecting) return;
ctx.commit(ActionType.CLOSE);
setTimeout(() => {
conn();
}, 10 * 1000);
connecting = true;
};
ctx.state.stateWS.instance.onerror = () => {
if (connecting) return;
ctx.commit(ActionType.ERROR);
setTimeout(() => {
conn();
}, 10 * 1000);
connecting = true;
};
ctx.state.stateWS.instance.onmessage = function (
this: WebSocket,
ev: MessageEvent
) {
// logic
} catch (e) {
console.log("e:", e);
}
};
}
WebSocket 連接活動日誌
系統是設計成 7*24 小時不間斷運行。所以 websocket 很容易受到一些網絡因素或者其它因素的影響發生斷開，重連是一項非常重要的功能，同時還應該具備重連日誌功能。
在用戶的不同環境中，排查 WebSocket 的連接狀態很麻煩，添加一個連接日誌功能是比較不錯的方案，這樣可以很好的看到不同時間的連接情況。
image.png
需要注意，這些日誌是存儲在用戶的瀏覽器內存中的，需要設置上限，到達上限要自動清除早期日誌。
WebSocket 鑑權
websocket 的鑑權是很多人容易忽視的一個點。
我在系統設計中，restful API 的鑑權是通過在 request header 上附帶 Authorization 字段，設置生成的 JWT 來實現的。
websocket 無法設置 header，但是可以設置 query，實現思路類似 restful 的認證設計。
關於 ws 鑑權的過期、續期、權限等問題，和 restful 保持一致即可。
script setup：更加清爽的 API
script setup 至今仍是一個實驗性特性，但它確實非常清爽。
單文件組件的 setup 常規用法像下面這樣：
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
setup () {
return {}
}
})
</script>
使用 script setup 後，代碼變成了下面這樣：
<script setup lang="ts">
</script>在 sciprt 標籤中的頂層變量、函數都會 return 出去。
在這種模式下，減少了大量代碼，可以提高開發效率、降低心智負擔。
但這時也存在幾個問題，比如在 script setup 中怎麼使用生命週期和 watch/computed 函數？怎麼使用組件？怎麼獲取 props 和 context？
使用組件
直接導入組件後，vue 會自動識別，無需使用 component 掛載。
<script setup lang="ts">
import C from "component"
</script>
使用生命週期和監聽計算函數
和標準寫法基本無差異。
<script setup lang="ts">
import { watch, computed, onMounted } from "vue"
</script>
使用 props 和 context
由於 setup 被提升到 script 標籤上了，自然也就沒辦法接收 props 和 context 這兩個參數。
所以 vue 提供了 defineProps、defineEmit、useContext 函數。
defineProps
defineProps 的用法和 OptionsAPI 中的 props 用法幾乎一致。
<script setup lang="ts">
import { defineProps } from "vue";
interface Props {
moduleID: string;
}
const props = defineProps<Props>(["moduleID"]);
console.log(props.moduleID);
</script>
defineEmit
defineEmit 的用法和 OptionsAPI 中的 emit 用法也幾乎一致。
<script setup lang="ts">
import { defineEmit } from "vue";
const emit = defineEmit(["select"]);
console.log(emit("select"));
</script>
emit 的第一個參數是事件名稱，後面支持傳遞不定個數的參數。
useContext
useContext 是一個 hook 函數，返回 context 對象。
const ctx = useContext()
原理
原理相當簡單。增加了一層編譯過程，將 script setup 編譯成標準模式的代碼。
但是實現上有非常多的細節，所以導致至今仍未推出正式版。
Vue3 Composition 所帶來的模塊化開發方式
這套技術棧帶給我最深的感受還是開發方式上的變化。
在 Vue2 的開發中，Options API 在面對業務邏輯複雜的頁面時非常喫力。當邏輯長達千行時，追蹤一個變量的變化是一件非常頭痛的事情。
但是有了 Composition API 後，這將不再是問題，它帶來了一種全新的開發方式，雖然有種 React 的感覺，但這相比之前已經非常棒了！
這項目中所有的頁面，我都使用 hooks 的方式開發。
在設備模塊中，我的 js 代碼是這樣的。
<script lang="ts">
import { defineComponent, toRefs } from "vue";
import { useDeviceCreate } from "./create";
import { useDeviceQuery } from "./query";
import { useDeviceDelete } from "./delete";
import { useUnbind } from "./unbind";
import { useBind } from "./bind";
import { useDeviceEdit } from "./edit";
import { useState } from "./state";
import { useAssign } from "./assign";
export default defineComponent({
setup() {
const queryObj = useDeviceQuery();
const { query, devices } = queryObj;
const reload = query;
return {
...toRefs(useDeviceCreate(reload)),
...toRefs(queryObj),
...toRefs(useDeviceDelete(reload)),
...toRefs(useUnbind(reload)),
...toRefs(useBind(reload)),
...toRefs(useDeviceEdit(reload)),
...toRefs(useState(devices)),
...toRefs(useAssign()),
};
},
});
</script>
每個模塊各司其職，各自有自己的內部數據，各個模塊如果需要共享數據，可以通過 Vuex，或者在頂層組件的 setup 中傳遞，比如上面的 reload 函數。
我的目錄結構是這樣的。
image.png
整體上非常清爽，工程化的感覺越來越強。
前端架構不同於後端架構。
後端考慮的更多是高可用、高性能、可擴展。前端考慮的問題更多是如何實現高內聚低耦合的分層設計，架構即設計。
良好的架構設計能夠極大的開發效率，降低開發人員的心智負擔。
這也是我們一直以來所關注的問題。
本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/uiGqqTlkqxlItFnwMmYDUQ