背景

前段時間需要排Q3的前端技術項，剛好我一直想做vue3項目很久了，就與領導商議了一下，把一個線上小項目改造成vue3版本的。
這是個PC端項目，作為微前端被內嵌至別的應用之中，項目不大，只有三個界面，不過這三個界面都是基礎核心業務模塊，里面內嵌了樹、動態布局、動態篩選等N個業務組件。
在最近一個月內，經過斷斷續續的開發，昨天項目發布到生產環境。現總結一下這段實踐。

技術棧

• vue全家桶：vue3.2、vue-router4.0、pinia2.0
• 組件庫：element-plus 2.2.x、vxetable 4.2.x
• 加強類：typescript、eslint、prettier
• 打包構建：vite 2.9.x
• 微前端相關：vite-plugin-qiankun

之所以在使用element plus的基礎上，又添加了vxetable的使用，是因為之前的項目表格都是使用的vxetable，后者在復雜表格的實踐上，功能是遠超過element table的

具體開發過程

• 使用的 npm init vue@latest 腳手架初始化工程
• 刪除無用代碼，引入組件庫、axios、sortable等業務包
• 業務界面、業務組件通過組合式api全部重寫（之前的代碼已經成了巨石應用）
• 全局組件部分使用組合式api重寫
• 微前端整合
• 代碼優化、注釋，上線

ts的引入

之前開發react的時候，使用過ts，不過開發vue2項目的時候，由于其對ts支持的不友好，都沒有使用ts
由于vue3對ts支持的比較好，再加上ts目前作為前端開發屆的標配，沒有理解不添加使用ts

選擇組合式api（Composition API）

個人覺得是vue3相對于vue2開發體驗改變最大的地方，完全顛覆了之前的option寫法。
作為當年第一波吃vue2螃蟹人，我對option寫法很是喜歡，并且制定了一系列規范來寫更好的option，如data里面的數據，按模塊順序、分開書寫、vue2 的option屬性需要按順序排列，不能留空（詳見：前端規范 - vue2開發規范）
在之前的vue2項目中，單vue組件過大的話，的確會出現上下橫跳的費勁場景，一個業務邏輯需要在data、watch、methods中來回書寫

使用組合式api的確改變了開發體驗。上圖可以很形象的總結出變化，以后寫代碼，單vue組件內比較容易劃分模塊
而組合式api代理的所有模塊都是import導入這點，與react又是一大相似點

setup語法糖

相對比第一波吃vue3螃蟹的人，我入場的時候已經支持了setup語法糖，那沒理由不使用它

組合式函數來代替mixin

組合式函數，因為與react hooks的思路類似，業內也叫vue hooks
個人對vue2的mixin是又愛又恨，在拆分巨型vue文件時，mixin往往是利器，但其自身的缺陷（數據來源不明確、數據覆蓋等），又讓我不敢隨意使用mixin
組合式函數的出現，就是為了替代mixin；在實際的開發中，全局、模塊內也是創建hooks文件夾，里面放js文件
但hooks也不是100%的好，因為其傳參、返回都是顯式定義，因此會對上下文順序有依賴

provide、inject來做全局應用

在vue2的時候，我推薦將http請求、url鏈接統一歸納管理，然后掛載在vue prototype上，就可以直接通過this進行調用，如下面的代碼

this.$http.get(this.$listUrl.bom.getList, ...)

現在就不行了，因為組合式api直接沒有this了！
替代方案1：每個界面都引用 $http、$listUrl，這個屬于下策
替代方案2：在main.ts定義全局變量，然后每個vue組件通過getCurrentInstance獲取調用，如下面代碼
這種跟微信小程序的獲取全局變量很是類似，但是不好用，引用的代碼很多，vue官方也不建議使用

// mian.ts中定義全局變量 app.config.globalProperties.$http = $http// 業務vue中 import { getCurrentInstance } from 'vue' const { ctx } = getCurrentInstance() as any ctx.$http.get

代替防范3：使用provide、inject來做全局應用
在main.js定義全局變量，然后每個vue組件通過inject獲取，如下面代碼
雖然不如vue2中使用的便捷，不過也容易理解

// mian.ts provide全局變量 app.provide('global', {$http,$listUrl })// 業務vue import { inject } from 'vue' const global = inject('global') global.$http.get(global.$listUrl.MATERIAL_SELECT_TREE_INFO, { params }).

對vue2代碼的兼容

很多項目無法升級到vue3的一大原因是因為vue3的周邊生態不夠完善，尤其是公司內部的生態支持
我這次升級的業務使用到了兩個復雜的業務組件，直接通過npm引入是不行的，只能拿到本地來調整
vue3也支持之前的option寫法，不過個別api需要做出改動，我遇到的改動不算很多，具體如下：

• emit需要顯式定義好
• 自定義v-model的改動
• 生命周期的改動

那些小坑你一把的改動

v-model 的改動，vue2是value，現在是modelValue

prop: value -> modelValue;
event: input -> update:modelValue;

<ChildComponent :value="pageTitle" @input="pageTitle = $event" /> <ChildComponent v-model="pageTitle" /><!-- would be shorthand for: --><ChildComponent:modelValue="pageTitle"@update:modelValue="pageTitle = $event" />

外部調用組件內部方法、屬性，需要顯式拋出

否則調用不到

// 子組件 // 定義方法 function open() {...} // 顯式拋出 defineExpose({open })

那些廢棄了的api

• eventBus 這個還好，本身算是老古董，我也一直不建議使用
• filter 這個我很難過，從我接觸vue1.x版本開始，過濾器就是我喜歡vue的一個特性，現在廢棄了有點舍不得

element plus的升級

作為vue3的對應版本，能感受到element plus的努力

• icon引入方式的變化 - 這個影響最大
• size取消了mini的規格
• button type=“link”的棄用
• treeV2 樹的虛擬滾動添加 - 有小坑需要踩
• tableV2 表格的虛擬滾動添加 - 沒具體使用，估計也會有小坑

構建工具選擇vite

這算是開發過程中體驗最舒服的地方了，啟動秒起、代碼修改后界面秒刷新
默認打包命令、文件夾與之前的vue cli默認一致，可以無縫對接公司的devops系統
不好處：
由于vite使用rollup來打包，因此你需要做一些配置的話，需要查閱rollup的api文檔，相當于你當年在webpack踩的坑，現在又需要重新走一遍

Vuex -> Pinia機會可以忽略的改動

我算是個vuex的保守使用者，在不需要共享數據的時候，我是不建議使用vuex的
這次項目改動使用的Pinia，屬于常規操作并且地方不多，除了Pinia刪除了mutations這個小改動外，沒感覺到有多大的變化

cdn的引入

vite是支持靜態js通過cdn來引用的，這樣會減少加載包的大小
社區有很多解決方案，都是通過rollup的擴展能力
不過我使用cdn引入，與微前端的模式有沖突，后面放棄了cdn的引用

<!-- index.html界面引用cdn文件（要引公司內部的cdn，不能引用第三方cdn） --> <script src="//xxcdn/vue/3.2.37/vue.min.js"></script> <script src="//cdn.jsdelivr.net/npm/vue-demi@0.13.7"></script> ... // vite.config.ts // 需要install下面的兩個包 import commonjs from 'rollup-plugin-commonjs' import externalGlobals from 'rollup-plugin-external-globals' ... const globals = externalGlobals({vue: 'Vue','vue-router': 'VueRouter','vue-demi': 'VueDemi',pinia: 'Pinia',axios: 'axios','element-plus': 'ElementPlus','@element-plus/icons-vue': 'ElementPlusIconsVue', }) const plugins = process.env.NODE_ENV === 'production' ? [] : [commonjs(), globals]defineConfig({plugins: [vue(), ...plugins],build: {target: 'es2015',rollupOptions: {external: ['vue', 'vue-demi', 'pinia', 'vue-router', 'element-plus', '@element-plus/icons-vue'],plugins: [commonjs(),globals],},},

微前端的適配

一早就知道qiankun的官網不支持vite，但又舍不得vite的開發體驗，一開始想做成本地vite+打包使用webpack的模式，
不過還是在社區里面找到了解決方案，通過vite-plugin-qiankun來實現，雖然最后無法實現動態插入publicPath，不過瑕不掩瑜，完全不影響生產環境使用

其他開發體驗

• 使用proxy代替了Object.defineProperty做數據綁定這點，對開發體驗小有提升，不需要再寫$set、數組splice模擬通過下標修改
• Volar不是那么的好用，無法進行詳細的配置，格式化的時候對組件多屬性的折疊不友好，這里推薦使用prettier做代碼格式化；而且
• vsode開發體驗，不知是個人vscode的問題，感覺代碼提示、輸入反饋，不如vue2項目的體驗來的好，后續需要持續關注
• vue devtools升級到了新版本，體驗倒是不錯

性能提升

說實話，由于數據量不是十分大，直觀體驗上，性能沒有多少提升……后續需要找一下經典場景來測試一下

總結

這個項目也算是完整的從0到1開發一個vue3項目，雖然項目不算大，但麻雀雖小五臟俱全，該有的體驗也都把玩了一下。
總體來說，vue3帶來了一些新內容，但還是屬于框架內的改動，無法影響到整個前端圈。如果是之前平穩運行的項目，不建議推倒重構
到vue3版本，新項目或者小項目重構，可以大膽使用vue3
vue3是vue的未來，現在也已經很成熟了，后續的新項目，都推薦使用vue3來做的

后續

近期需要根據此項目，抽出腳手架來，供團隊內使用。
還需要多學習總結，打造vue3版本的代碼規范+最佳實踐，以及ts的代碼規范

總結

以上是生活随笔為你收集整理的vue3开发实践总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。