下面是我在開(kāi)發(fā)大型 Vue 項(xiàng)目時(shí)的最佳實(shí)踐。這些技巧將幫助你開(kāi)發(fā)更高效、更易于維護(hù)和共享的代碼。

今年做自由職業(yè)的時(shí)候，我有機(jī)會(huì)開(kāi)發(fā)了一些大型 Vue 應(yīng)用程序。我所說(shuō)的這些項(xiàng)目，Vuex store 超過(guò)十個(gè)，包含大量的組件（有時(shí)候幾百個(gè)）和視圖頁(yè)面。對(duì)我來(lái)說(shuō)這是個(gè)很有益的經(jīng)驗(yàn)，因?yàn)槲野l(fā)現(xiàn)了很多有意思的模式，可以讓代碼擁有更好的伸縮性。我還必須修正一些導(dǎo)致著名的意大利面條式代碼困境的錯(cuò)誤實(shí)踐。

因此，今天我將與你分享10個(gè)最佳實(shí)踐，如果你正在處理大型代碼庫(kù)，我建議你參考這些方法。

1. 使用 slot, 讓組件更強(qiáng)大，也更容易理解

最近我寫了篇關(guān)于 Vue.js slot 的文章，它強(qiáng)調(diào)了 slot 如何使組件更易于重用和維護(hù)，以及為什么應(yīng)該使用它們。

但是這與 Vue.js 大型項(xiàng)目有什么關(guān)系呢？一張圖片通常勝過(guò)千言萬(wàn)語(yǔ)，所以我要給你描繪一幅關(guān)于我第一次后悔沒(méi)有使用它們的畫面。

有一天，我要?jiǎng)?chuàng)建一個(gè) popup。乍一看并沒(méi)有什么復(fù)雜的東西，只是包含了一個(gè)標(biāo)題，一個(gè)描述和一些按鈕。所以我所做的就是把一切配置一股腦當(dāng)做 props 傳進(jìn)去。最終我定義了三個(gè) prop，用于自定義組件，當(dāng)用戶單擊按鈕時(shí)將發(fā)送一個(gè)事件。So easy !

但是，隨著項(xiàng)目的發(fā)展，團(tuán)隊(duì)要求我們?cè)谄渲姓故靖嗥渌男聝?nèi)容：表單字段、不同的按鈕(取決于它顯示在哪個(gè)頁(yè)面上)、卡片、頁(yè)腳，以及列表。我以為，如果繼續(xù)使用 prop 來(lái)迭代這個(gè)組件也沒(méi)啥問(wèn)題。但是我滴個(gè)神哪，我是大錯(cuò)特錯(cuò)！組件很快變得非常復(fù)雜，難以理解，因?yàn)樗藷o(wú)數(shù)的子組件，用了太多的 prop，并發(fā)送了一堆的事件。我開(kāi)始體驗(yàn)到了可怕的情況，當(dāng)你做出一點(diǎn)改動(dòng)，其他頁(yè)面的某個(gè)地方就會(huì)崩潰！我仿佛造了一個(gè) Frankenstein 怪人，而不是一個(gè)可維護(hù)的組件!🤖

然而，如果我從一開(kāi)始就依賴 slot，情況可能會(huì)好多了。最后我重構(gòu)了所有東西，得到了這個(gè)小組件：更容易維護(hù)，理解起來(lái)更快，更好擴(kuò)展！

<template>
 <div class="c-base-popup">
 <div v-if="$slot.header" class="c-base-popup__header">
 <slot name="header">
 </div>
 <div v-if="$slot.subheader" class="c-base-popup__subheader">
 <slot name="subheader">
 </div>
 <div class="c-base-popup__body">
 <h1>{{ title }}</h1>
 <p v-if="description">{{ description }}</p>
 </div>
 <div v-if="$slot.actions" class="c-base-popup__actions">
 <slot name="actions">
 </div>
 <div v-if="$slot.footer" class="c-base-popup__footer">
 <slot name="footer">
 </div>
 </div>
</template>

<script>
export default {
 props: {
 description: {
 type: String,
 default: null
 },
 title: {
 type: String,
 required: true
 }
 }
}
</script>

我的觀點(diǎn)是，從經(jīng)驗(yàn)來(lái)看，那些知道何時(shí)使用 slot 的開(kāi)發(fā)人員所構(gòu)建的項(xiàng)目確實(shí)會(huì)對(duì)其未來(lái)的可維護(hù)性產(chǎn)生很大的影響。由于發(fā)送的事件更少，代碼更容易理解，而且提供了更大的靈活性，可以在其中顯示任何組件。

敲黑板：根據(jù)經(jīng)驗(yàn)，當(dāng)你開(kāi)始在父組件中復(fù)制子組件的 prop 時(shí)，你就應(yīng)該考慮使用 slot 了。

2. 合理組織 Vuex Store

通常，Vue.js 新手開(kāi)始了解Vuex，因?yàn)樗麄儎偤门龅搅诉@兩個(gè)問(wèn)題：

• 組件樹(shù)結(jié)構(gòu)中相隔太遠(yuǎn)的組件之間訪問(wèn)數(shù)據(jù)
• 組件銷毀后需要持久化數(shù)據(jù)

這個(gè)時(shí)候他們就會(huì)創(chuàng)建第一個(gè) Vuex store，學(xué)習(xí)模塊并開(kāi)始在應(yīng)用程序中組織它們。
問(wèn)題在于，創(chuàng)建模塊時(shí)沒(méi)有單一的模式可以遵循。然而，我強(qiáng)烈建議你仔細(xì)考慮如何組織它們。據(jù)我所見(jiàn)，大多數(shù)開(kāi)發(fā)人員更喜歡根據(jù)功能來(lái)組織它們。例如:

• Auth.
• Blog.
• Inbox.
• Settings.

就我來(lái)說(shuō)，我發(fā)現(xiàn)根據(jù)從 API 獲取的數(shù)據(jù)模型來(lái)組織它們更容易理解。例如:

• Users
• Teams
• Messages
• Widgets
• Articles

如何選擇取決于你自己。唯一需要記住的是，從長(zhǎng)遠(yuǎn)來(lái)看，一個(gè)組織良好的 Vuex store 會(huì)造就一個(gè)更高效的團(tuán)隊(duì)。它還將使新人在加入團(tuán)隊(duì)時(shí)更容易將他們的想法圍繞在你的代碼基礎(chǔ)上。

3. 使用 action 發(fā)起 API 調(diào)用和提交數(shù)據(jù)

我的大部分 API 調(diào)用（如果不是全部）是在Vuex action 里面完成的。你可能會(huì)問(wèn)：為什么要這么做？ 🤨

♀️ 簡(jiǎn)單來(lái)說(shuō)，它們中的大多數(shù)獲取的數(shù)據(jù)需要提交到 store里去。另外，它們還提供了一層封裝和可重用性，我很喜歡用。還有一些原因如下：

• 如果我需要在兩個(gè)地方（假設(shè)是博客頁(yè)面和首頁(yè)）獲取文章的第一頁(yè)，我只需要用正確的參數(shù)調(diào)用合適的 dispatcher 就行了。除了 dispatcher 調(diào)用，無(wú)需重復(fù)代碼就可以完成數(shù)據(jù)的獲取，commit 到 store 和返回。
• 如果我需要寫一些避免重復(fù)獲取第一頁(yè)的邏輯，我就可以在一個(gè)地方完成。這樣做除了會(huì)減輕服務(wù)器負(fù)載，還會(huì)增強(qiáng)我對(duì)代碼的信心。
• 我可以跟蹤這些操作中的大多數(shù) Mixpanel（一個(gè)網(wǎng)站用戶行為分析工具） 事件，這使得分析代碼非常容易維護(hù)。我確實(shí)有一些應(yīng)用程序，其中所有的 Mixpanel 調(diào)用都是只在 action 中完成的。我不需要了解哪些數(shù)據(jù)被跟蹤，哪些沒(méi)有，以及什么時(shí)候發(fā)送這些信息。以這種工作方式的樂(lè)趣簡(jiǎn)直無(wú)法言說(shuō)。

4. 用 mapState，mapGetters，mapMutations 和 mapActions 簡(jiǎn)化代碼

通常不需要?jiǎng)?chuàng)建多個(gè)計(jì)算屬性或方法，只需在組件內(nèi)部訪問(wèn) state/getters 或者調(diào)用 actions/mutations 。使用mapState，mapGetters，mapMutations 和 mapActions 
可以幫助你簡(jiǎn)化代碼，把來(lái)自 store 模塊的數(shù)據(jù)分組到一起，讓代碼更容易理解。

// NPM
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";

export default {
 computed: {
 // Accessing root properties
 ...mapState("my_module", ["property"]),
 // Accessing getters
 ...mapGetters("my_module", ["property"]),
 // Accessing non-root properties
 ...mapState("my_module", {
 property: state => state.object.nested.property
 })
 },

 methods: {
 // Accessing actions
 ...mapActions("my_module", ["myAction"]),
 // Accessing mutations
 ...mapMutations("my_module", ["myMutation"])
 }
};

有關(guān)以上工具方法的所有信息都在  Vuex 官方文檔。

5. 使用 API 工廠

我通常喜歡寫一個(gè)this.$api 助手，以便在任何地方調(diào)用，獲取后臺(tái) API 資源。在我的項(xiàng)目根目錄有一個(gè)api 文件夾，包含了所有相關(guān)的類。如下所示（僅部分）：

api
├── auth.js
├── notifications.js
└── teams.js

每個(gè)文件都將其類別下的所有 API 資源分組。下面是我在 Nuxt 應(yīng)用中使用插件初始化這個(gè)模式的方法（在標(biāo)準(zhǔn)的 Vue 應(yīng)用中的過(guò)程也類似）。

// PROJECT: API
import Auth from "@/api/auth";
import Teams from "@/api/teams";
import Notifications from "@/api/notifications";

export default (context, inject) => {
 if (process.client) {
 const token = localStorage.getItem("token");
 // Set token when defined
 if (token) {
 context.$axios.setToken(token, "Bearer");
 }
 }
 // Initialize API repositories
 const repositories = {
 auth: Auth(context.$axios),
 teams: Teams(context.$axios),
 notifications: Notifications(context.$axios)
 };
 inject("api", repositories);
};

export default $axios => ({
 forgotPassword(email) {
 return $axios.$post("/auth/password/forgot", { email });
 },

 login(email, password) {
 return $axios.$post("/auth/login", { email, password });
 },

 logout() {
 return $axios.$get("/auth/logout");
 },

 register(payload) {
 return $axios.$post("/auth/register", payload);
 }
});

現(xiàn)在，我可以簡(jiǎn)單地在我的組件或 Vuex action 里像這樣調(diào)用它們：

export default {
 methods: {
 onSubmit() {
 try {
 this.$api.auth.login(this.email, this.password);
 } catch (error) {
 console.error(error);
 }
 }
 }
};

6. 使用 $config 訪問(wèn)環(huán)境變量（在模板里特別有用）

你的項(xiàng)目可能在一些文件中定義了一些全局配置變量：

config
├── development.json
└── production.json

我喜歡通過(guò) this.$config 助手快速訪問(wèn)它們，特別是在模板里。像往常一樣，擴(kuò)展 Vue 對(duì)象非常容易：

// NPM
import Vue from "vue";

// PROJECT: COMMONS
import development from "@/config/development.json";
import production from "@/config/production.json";

if (process.env.NODE_ENV === "production") {
 Vue.prototype.$config = Object.freeze(production);
} else {
 Vue.prototype.$config = Object.freeze(development);
}

7.  按照某個(gè)約定來(lái)給代碼提交命名

隨著項(xiàng)目的增長(zhǎng)，你可能需要定期瀏覽組件的歷史記錄。如果你的團(tuán)隊(duì)沒(méi)有遵循相同的約定來(lái)命名他們的提交，那么理解每個(gè)提交將會(huì)變得更加困難。

我一直推薦使用 Angular 提交信息指南。我在每個(gè)項(xiàng)目中都遵循它，在很多情況下，其他團(tuán)隊(duì)成員很快就會(huì)發(fā)現(xiàn)遵循它帶來(lái)的好處。

遵循這些指導(dǎo)原則可以得到更具可讀性的信息，這使得在查看項(xiàng)目歷史記錄時(shí)更容易跟蹤提交。簡(jiǎn)而言之，它是這樣工作的：

git commit -am "<type>(<scope>): <subject>"

# 舉例
git commit -am "docs(changelog): update changelog to beta.5"
git commit -am "fix(release): need to depend on latest rxjs and zone.js"

看下他們的 README 文件 了解更多了解更多關(guān)于它和相關(guān)約定。

8. 項(xiàng)目上線后固定 package 版本

我知道，所有 package 都應(yīng)該遵循語(yǔ)義化版本規(guī)則。但現(xiàn)實(shí)情況是，有些根本沒(méi)有遵守。

為了避免因?yàn)槟硞€(gè)依賴項(xiàng)破壞了整個(gè)項(xiàng)目而不得不在半夜醒來(lái)，鎖定所有 package 版本可以讓你的早晨工作壓力更小。

它的意思很簡(jiǎn)單：避免使用帶 ^ 前綴的版本號(hào)：

{
 "name": "my project",

 "version": "1.0.0",

 "private": true,

 "dependencies": {
 "axios": "0.19.0",
 "imagemin-mozjpeg": "8.0.0",
 "imagemin-pngquant": "8.0.0",
 "imagemin-svgo": "7.0.0",
 "nuxt": "2.8.1",
 },

 "devDependencies": {
 "autoprefixer": "9.6.1",
 "babel-eslint": "10.0.2",
 "eslint": "6.1.0",
 "eslint-friendly-formatter": "4.0.1",
 "eslint-loader": "2.2.1",
 "eslint-plugin-vue": "5.2.3"
 }
}

9. 在顯示大量數(shù)據(jù)時(shí)使用 Vue Virtual Scroller

當(dāng)你需要在某個(gè)頁(yè)面中顯示大量的行，或者需要循環(huán)大量的數(shù)據(jù)時(shí)，你可能已經(jīng)注意到頁(yè)面可能會(huì)很快變得非常慢。要解決這個(gè)問(wèn)題，你可以使用vue-virtual-scoller。

npm install vue-virtual-scroller

它將只渲染列表中可見(jiàn)的項(xiàng)，并重用組件和 dom 元素，效率高，性能好。它真的很容易使用，如絲般順滑！✨

<template>
 <RecycleScroller
 class="scroller"
 :items="list"
 :item-size="32"
 key-field="id"
 v-slot="{ item }"
 >
 <div class="user">
 {{ item.name }}
 </div>
 </RecycleScroller>
</template>

10. 跟蹤第三方包的大小

當(dāng)很多人在同一個(gè)項(xiàng)目中工作時(shí)，如果沒(méi)人關(guān)注安裝包的數(shù)量，那么很快就會(huì)越來(lái)越多。為了避免應(yīng)用程序變慢(特別是在移動(dòng)網(wǎng)絡(luò)變慢的情況下)，我在 VS Code 中使用了 import cost 插件。這樣，我就可以從我的編輯器中看到導(dǎo)入的模塊庫(kù)有多大，并且可以在它變得太大時(shí)檢查出問(wèn)題。

例如，在最近的一個(gè)項(xiàng)目中，整個(gè) lodash 庫(kù)被導(dǎo)入(大約有24kB的gzipped)。結(jié)果只使用了 cloneDeep 方法。通過(guò) import cost 插件定位到這個(gè)問(wèn)題，我們是這樣解決的：

npm remove lodash
npm install lodash.clonedeep

cloneDeep 函數(shù)可以在需要的地方引入：

import cloneDeep from "lodash.clonedeep";

要進(jìn)一步優(yōu)化，你可以使用 Webpack Bundle Analyzer  ，用交互式的可縮放地圖可視化文件大小。

關(guān)于處理大型 Vue 代碼庫(kù)，你還有其他最佳實(shí)踐可以分享的嗎？歡迎在評(píng)論區(qū)留言。

原文

喜歡的朋友可以加作者二維碼

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論