15個Vue3全家桶開發的常見問題（帶你快速避坑）

這篇文章跟大家分享 Vue3全家桶開發的比較常見問題，讓大家可避坑踩雷，希望能夠給大家幫忙！

最近入門Vue3 並完成3 個項目，遇到問題蠻多的，今天就花點時間整理一下，和大家分享15 個比較常見的問題，基本都貼出對應文檔地址，還請多看文檔~ 已經完成的3 個項目基本上都是使用Vue3 (setup-script 模式)全家桶開發，因此主要分幾個方面總結：

# #Vue3
• Vite
• VueRouter
• Pinia
• ElementPlus

（學習影片分享：

vue影片教學）

一、Vue3

1. Vue2.x 與Vue3.x 生命週期方法的變化

#文件地址：https://v3.cn.vuejs.org/guide/composition-api-lifecycle-hooks.html

Vue2.x 和Vue3.x 生命週期方法的變化蠻大的，先看看：

目前Vue3.x 依然支援Vue2.x 的生命週期，但不建議混搭使用，前期可以先使用2.x的生命週期，後面盡量使用3.x 的生命週期開發。

由於我使用都是 

script-srtup模式，所以都是直接使用Vue3.x 的生命週期函數：

// A.vue\
<script setup>\
import { ref, onMounted } from "vue";\
let count = ref<number>(0);\
\
onMounted(() => {\
count.value = 1;\
})\
</script>

每個鉤子的執行時機點，也可以看看文件：

v3.cn.vuejs.org/guide/insta…

2. script-setup 模式中父元件取得子元件的資料

文件位址：

v3.cn.vuejs.org/api/sfc-scr…

這裡主要介紹父元件如何去取得子組件內部定義的變量，關於父子組件通信，可以看文檔介紹比較詳細：

v3.cn.vuejs.org/guide/compo…

我們可以使用

全域編譯器宏的defineExpose宏，將子元件中需要揭露給父元件所取得的參數，透過 {key: vlaue}方式作為參數即可，父元件透過模版ref 方式取得子元件實例，就能取得對應值：

// 子组件\
<script setup>\
let name = ref("pingan8787")\
defineExpose({ name }); // 显式暴露的数据，父组件才可以获取\
</script>\
\
// 父组件\
<Chlid ref="child"></Chlid>\
<script setup>\
let child = ref(null)\
child.value.name //获取子组件中 name 的值为 pingan8787\
</script>

注意：

• 全域編譯器巨集只能在script- setup 模式下使用；
script-setup 模式下，使用巨集時無需 
• import可以直接使用;
script-setup 模式一共提供了4 個巨集，包括：defineProps、defineEmits、defineExpose、withDefaults。

3. 提供props 預設值

definedProps 文件：

v3.cn.vuejs.org/api/sfc-scr … 文件：v3.cn.vuejs.org/api/sfc-scr…

前面介紹script-setup 模式提供的4 個

全域編譯器巨集，還沒有詳細介紹，這一節介紹 defineProps和 withDefaults。使用 defineProps巨集可以用來定義元件的入參，使用如下：

<script setup>\
let props = defineProps<{\
schema: AttrsValueObject;\
modelValue: any;\
}>();\
</script>

這裡只定義

props屬性中的 schema和 modelValue兩個屬性的類型， defineProps 的這種宣告的缺點在於，它沒有提供設定props 預設值的方式。

其實我們可以透過withDefaults 這個巨集來實作：

<script setup>\
let props = withDefaults(\
defineProps<{\
schema: AttrsValueObject;\
modelValue: any;\
}>(),\
{\
schema: [],\
modelValue: &#39;&#39;\
}\
);\
</script>

withDefaults 輔助函數提供了對預設值的型別檢查，並確保傳回的props 的型別刪除了已宣告預設值的屬性的可選標誌。

4. 設定全域自訂參數

」文件位址：

v3.cn.vuejs.org/guide/migra…

在 Vue2.x 中我们可以通过 Vue.prototype 添加全局属性 property。但是在 Vue3.x 中需要将 Vue.prototype 替换为 config.globalProperties 配置：

// Vue2.x\
Vue.prototype.$api = axios;\
Vue.prototype.$eventBus = eventBus;\
\
// Vue3.x\
const app = createApp({})\
app.config.globalProperties.$api = axios;\
app.config.globalProperties.$eventBus = eventBus;

使用时需要先通过 vue 提供的 getCurrentInstance方法获取实例对象：

5. v-model 变化

文档地址：v3.cn.vuejs.org/guide/migra…

当我们在使用 v-model指令的时候，实际上 v-bind 和 v-on 组合的简写，Vue2.x 和 Vue3.x 又存在差异。

Vue2.x

在子组件中，如果要对某一个属性进行双向数据绑定，只要通过 this.$emit('update:myPropName', newValue) 就能更新其 v-model绑定的值。

• Vue3.x

script-setup模式下就不能使用 this.$emit去派发更新事件，毕竟没有 this，这时候需要使用前面有介绍到的 defineProps、defineEmits 两个宏来实现：

父组件使用的时候就很简单：

6. 开发环境报错不好排查

文档地址：v3.cn.vuejs.org/api/applica…

Vue3.x 对于一些开发过程中的异常，做了更友好的提示警告，比如下面这个提示：

这样能够更清楚的告知异常的出处，可以看出大概是 <elinput>这边的问题，但还不够清楚。这时候就可以添加 Vue3.x 提供的<strong>全局异常处理器</strong>，更清晰的<strong>输出错误内容和调用栈信息，代码如下</strong>：</elinput>

这时候就能看到输出内容如下：

一下子就清楚很多。当然，该配置项也可以用来集成错误追踪服务 Sentry 和 Bugsnag。推荐阅读：Vue3 如何实现全局异常处理？

7. 观察 ref 的数据不直观，不方便

当我们在控制台输出 ref声明的变量时。

会看到控制台输出了一个 RefImpl对象：

看起来很不直观。我们都知道，要获取和修改 ref声明的变量的值，需要通过 .value来获取，所以你也可以：

这里还有另一种方式，就是在控制台的设置面板中开启 「Enable custom formatters」选项。

image.png

image.png

这时候你会发现，控制台输出的 ref的格式发生变化了：

更加清晰直观了。

這個方法是我在《Vue.js 設計與實作》中發現的，但在文件也沒有找到相關介紹，如果有朋友發現了，歡迎告知~

二、Vite

1. Vite 動態匯入的使用問題

文件位址：cn.vitejs.dev/ guide/featu…

使用webpack 的同學應該都知道，在webpack 中可以透過 require.context動態匯入檔案：

#在Vite 中，我們可以使用這兩個方法來動態匯入檔案：

• #import.meta.glob

此方法匹配到的檔案預設是懶載入，透過動態導入實現，建置時會分離獨立的chunk，是異步導入，回傳的是Promise，需要做非同步操作，使用方式如下：

• import.meta.globEager

##該方法是直接匯入所有模組，並且是

同步導入

，返回結果直接透過 

for...in循環就可以操作，使用方式如下：

如果僅使用非同步導入Vue3 元件，也可以直接使用Vue3 defineAsyncComponent API 來載入：

#2. Vite 設定alias 類型別名

文件位址：cn.vitejs.dev/config/#res…

當專案比較複雜的時候，常常需要設定alias 路徑別名來簡化一些程式碼：

#在Vite 中設定也很簡單，只需要在 

vite.config.ts

 的 resolve.alias中設定即可：

如果使用的是TypeScript 時，編輯器會提示路徑不存在的警告⚠️，這時候可以在 

tsconfig.json

中加入 

compilerOptions.paths的設定：

##3. Vite 設定全域scss

文件位址：cn.vitejs.dev/config/#css…

當我們需要使用scss 設定的主題變數（如 $primary）、mixin方法（如 @mixin lines）等時，如： #我們可以將scss 主題設定文件，配置在 vite.config.ts 的 css.preprocessorOptions.scss.additionalData

## ######如果不想使用scss 設定文件，也可以直接寫成scss 程式碼：##################三、VueRouter########## ###1. script-setup 模式下取得路由參數############文件位址：###router.vuejs.org/zh/guide/ad…######## #####由於在 ###script-setup###模式下，沒有 ###this####可以使用，就不能直接通過 ###this.$router###或 ####this. $route###來取得路由參數和跳轉路由。當我們需要取得路由參數時，就可以使用 ###vue-router###提供提供的 ###useRoute###方法來取得，使用如下：############

如果要做路由跳轉，就可以用 useRouter方法的回傳值去跳轉：

2、Pinia

1. store 解構的變數修改後沒有更新

#文件位址：pinia.vuejs.org/core-concep…

當我們解構出store 的變數後，再修改store 上變數的值，視圖沒有更新：

##這時候點選按鈕觸發 

changeName事件後，檢視上的 name 並沒有改變。這是因為 store 是 reactive 對象，當解構後，就會破壞它的反應性。所以我們不能直接進行解構。這種情況就可以使用Pinia 提供 storeToRefs工具方法，使用起來也很簡單，只需要將需要解構的物件透過 storeToRefs方法包裹，其他邏輯不變：

這樣再修改其值，變更馬上更新視圖了。

2. Pinia 修改資料狀態的方式

依照官網給的方案，目前有三種方式修改：

• 透過 

  store.屬性名稱賦值修改單筆資料的狀態；

#這個方法就是前面一節所使用的：

• 透過 

  $patch方法修改多筆資料的狀態；

##文件位址：

pinia .vuejs.org/api/interfa…

當我們需要同時修改多筆資料的狀態時，如果還是按照上面方法，可能要這麼寫：

上面這麼寫也沒什麼問題，但是Pinia 官網已經說明，使用 

$patch

的效率會更高，效能更好，所以在修改多筆資料時，更建議使用 $patch，使用方式也很簡單：

#透過 
• action

  方法修改多筆資料的狀態；

也可以在store 中定義actions 的一個方法來更新：

##使用時：

這三種方式都能更新Pinia 中store 的資料狀態。

五、Element Plus

1. element-plus 打包時 @charset 警告

專案新安裝的element- plus 在開發階段都是正常，沒有提示任何警告，但是在打包過程中，控制台輸出下面警告內容：

在官方issues 中查閱很久：github.com/element-plu…

嘗試在 vite.config.ts

中設定 

charset: false，結果也是無效：

最後在官方的issues 中找到處理方法：

2. 中文語言套件設定

文件位址：

element-plus.gitee.io/zh-CN/guide…

預設elemnt-plus 的元件是英文態：

我們可以透過引入中文語言包，並加入到ElementPlus 配置中來切換成中文：

這時候就能看到ElementPlus 裡面元件的文字變成中文了。

總結

以上是我最近從入門到實戰Vue3 全家桶的3 個項目後總結避坑經驗，其實很多都是文檔中有介紹的，只是剛開始不熟悉。也希望大夥多看看文檔咯~

Vue3 script-setup 模式確實越寫越香。

本文內容如果有問題，歡迎大家一起留言討論。

【相關影片教學推薦：vuejs入門教學、web前端入門】