Vue的編碼技巧與規(guī)范使用詳解

當(dāng)我們完成項(xiàng)目的構(gòu)建，進(jìn)入開發(fā)階段的時(shí)候，除了你需要了解框架本身的知識(shí)點(diǎn)外，我們還需要提前掌握一些項(xiàng)目的編碼技巧與規(guī)范，在根源上解決之后因編碼缺陷而導(dǎo)致的項(xiàng)目維護(hù)困難、性能下降等常見問(wèn)題，為項(xiàng)目多人開發(fā)提供編碼的一致性。

本文將羅列項(xiàng)目中常用的一些編碼技巧與規(guī)范來(lái)幫助大家提升代碼質(zhì)量，并會(huì)結(jié)合代碼片段加強(qiáng)大家的理解與認(rèn)知。當(dāng)然不是所有實(shí)例都是針對(duì) Vue.js 開發(fā)的，有些同樣也適用于其他前端項(xiàng)目。

實(shí)例

1. 使用對(duì)象代替 if 及 switch

在很多情況下，我們經(jīng)常會(huì)遇到循環(huán)判斷執(zhí)行賦值操作的場(chǎng)景，一般我們都會(huì)使用 if 及 switch 的條件判斷，如果符合則執(zhí)行賦值，不符合則進(jìn)入下個(gè)判斷，比如：

let name = 'lisi';
let age = 18;

if (name === 'zhangsan') {
 age = 21;
} else if (name === 'lisi') {
 age = 18;
} else if (name === 'wangwu') {
 age = 12;
}

// 或者
switch(name) {
 case 'zhangsan':
 age = 21;
 break
 case 'lisi':
 age = 18;
 break
 case 'wangwu':
 age = 12;
 break
}

這樣的寫法不僅冗余，而且代碼執(zhí)行效率不高，我們可以使用對(duì)象的形式簡(jiǎn)寫：

let name = 'lisi';
let obj = {
 zhangsan: 21,
 lisi: 18,
 wangwu: 12
};

let age = obj[name] || 18;

以上這種技巧適用于循環(huán)判斷一次賦值的情況，如果判斷過(guò)后有較多處理邏輯的還需要使用 if 或 switch 等方法。

2. 使用 Array.from 快速生成數(shù)組

一般我們生成一個(gè)有規(guī)律的數(shù)組會(huì)使用循環(huán)插入的方法，比如使用時(shí)間選擇插件時(shí)，我們可能需要將小時(shí)數(shù)存放在數(shù)組中：

let hours = [];

for (let i = 0; i < 24; i++) {
 hours.push(i + '時(shí)');
}

如果使用 Array.from 我們可以簡(jiǎn)寫為：

let hours = Array.from({ length: 24 }, (value, index) => index + '時(shí)');

3. 使用 router.beforeEach 來(lái)處理跳轉(zhuǎn)前邏輯

在某些情況下，我們需要在路由跳轉(zhuǎn)前處理一些特定的業(yè)務(wù)邏輯，比如修改路由跳轉(zhuǎn)、設(shè)置 title 等，代碼如下：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

// 首頁(yè)
const Home = (resolve => {
 require.ensure(['../views/home.vue'], () => {
 resolve(require('../views/home.vue'))
 })
})

let base = `${process.env.BASE_URL}`;

let router = new Router({
 mode: 'history',
 base: base,
 routes: [
 {
 path: '/',
 name: 'home',
 component: Home,
 meta: { title: '首頁(yè)' }
 },
 ]
})

router.beforeEach((to, from, next) => {
 let title = to.meta && to.meta.title;
 
 if (title) {
 document.title = title; // 設(shè)置頁(yè)面 title
 }
 
 if (to.name === 'home') {
 
 // 攔截并跳轉(zhuǎn)至 page2 單頁(yè)，$openRouter 方法在第 5 節(jié)中封裝
 Vue.$openRouter({
 name: 'page2'
 });
 }
 
 next();
})

export default router

注意最后需要調(diào)用 next() 方法執(zhí)行路由跳轉(zhuǎn)。

4. 使用 v-if 來(lái)優(yōu)化頁(yè)面加載

在 Vue 頁(yè)面中，一些模塊可能需要用戶主動(dòng)觸發(fā)才會(huì)顯示，比如彈框組件等這樣的子組件，那么我們可以使用 v-if 來(lái)進(jìn)行按需渲染，沒必要一進(jìn)頁(yè)面就渲染所有模塊。比如：

<template>
 <div @click="showModuleB = true"></div>
 <module-b v-if="isShowModuleB"></module-b>
</template>

<script>
import moduleB from 'components/moduleB'
export default {
 data() {
 return {
 isShowModuleB: false
 } 
 },
 components: {
 moduleB
 }
}
</script>

這樣當(dāng) isShowModuleB 為 false 的時(shí)候便不會(huì)加載該模塊下的代碼，包括一些耗時(shí)的接口調(diào)用。當(dāng)然 v-if 主要適用于代碼量較多、用戶點(diǎn)擊不是很頻繁的模塊的顯示隱藏，同時(shí)如果涉及到權(quán)限問(wèn)題的代碼都需要使用 v-if，而不是 v-show。

5. 路由跳轉(zhuǎn)盡量使用 name 而不是 path

我們前期配置的路由路徑后期難免會(huì)進(jìn)行修改，如果我們頁(yè)面跳轉(zhuǎn)的地方全是使用的 path，那么我們需要修改所有涉及該 path 的頁(yè)面，這樣不利于項(xiàng)目的維護(hù)。而相對(duì)于 path，name 使用起來(lái)就方便多了，因?yàn)槠渚哂形ㄒ恍裕词刮覀冃薷牧?path，還可以使用原來(lái)的 name 值進(jìn)行跳轉(zhuǎn)。

this.$router.push({ 
 name: 'page1'
});

// 而不是
this.$router.push({ 
 path: 'page1'
});

6. 使用 key 來(lái)優(yōu)化 v-for 循環(huán)

v-for 是 Vue 提供的基于源數(shù)據(jù)多次渲染元素或模板塊的指令。正因?yàn)槭菙?shù)據(jù)驅(qū)動(dòng)，所以在修改列表數(shù)據(jù)的時(shí)候，Vue 內(nèi)部會(huì)根據(jù) key 值去判斷某個(gè)值是否被修改，其會(huì)重新渲染修改后的值，否則復(fù)用之前的元素。

這里如果數(shù)據(jù)中存在唯一表示 id，則推薦使用 id 作為 key，如果沒有則可以使用數(shù)組的下標(biāo) index 作為 key。因?yàn)槿绻跀?shù)組中間插入值，其之后的 index 會(huì)發(fā)生改變，即使數(shù)據(jù)沒變 Vue 也會(huì)進(jìn)行重新渲染，所以最好的辦法是使用數(shù)組中不會(huì)變化且唯一的那一項(xiàng)作為 key 值。例如：

<template>
 <ul>
 <li v-for="(item, index) in arr" :key="item.id">{{ item.data }}</li>
 </ul>
</template>

<script>
export default {
 data() {
 return {
 arr: [
 {
 id: 1,
 data: 'a'
 },
 {
 id: 2,
 data: 'b'
 },
 {
 id: 3,
 data: 'c'
 }
 ]
 }
 }
}
</script>

7. 使用 computed 代替 watch

很多時(shí)候頁(yè)面會(huì)出現(xiàn) watch 的濫用而導(dǎo)致一系列問(wèn)題的產(chǎn)生，而通常更好的辦法是使用 computed 屬性，首先需要區(qū)別它們有什么區(qū)別：

其實(shí)它們?cè)诠δ苌线€是有所區(qū)別的，但是有時(shí)候可以實(shí)現(xiàn)同樣的效果，而 computed 會(huì)更勝一籌，比如：

<template>
 <div>
 <input type="text" v-model="firstName">
 <input type="text" v-model="lastName">
 <span>{{ fullName }}</span>
 <span>{{ fullName2 }}</span>
 </div>
</template>

<script>
export default {
 data() {
 reurn {
 firstName: '',
 lastName: '',
 fullName2: ''
 }
 },
 
 // 使用 computed
 computed: {
 fullName() {
 return this.firstName + ' ' + this.lastName
 }
 },
 
 // 使用 watch
 watch: {
 firstName: function(newVal, oldVal) {
 this.fullName2 = newVal + ' ' + this.lastName;
 },
 lastName: function(newVal, oldVal) {
 this.fullName2 = this.firstName + ' ' + newVal;
 },
 }
}
</script>

上方我們通過(guò)對(duì)比可以看到，在處理多數(shù)據(jù)聯(lián)動(dòng)的情況下，使用 computed 會(huì)更加合理一點(diǎn)。

computed 監(jiān)測(cè)的是依賴值，依賴值不變的情況下其會(huì)直接讀取緩存進(jìn)行復(fù)用，變化的情況下才會(huì)重新計(jì)算；而 watch 監(jiān)測(cè)的是屬性值， 只要屬性值發(fā)生變化，其都會(huì)觸發(fā)執(zhí)行回調(diào)函數(shù)來(lái)執(zhí)行一系列操作。

8. 統(tǒng)一管理緩存變量

在項(xiàng)目中或多或少會(huì)使用瀏覽器緩存，比如 sessionStorage 和 localStorage，當(dāng)一個(gè)項(xiàng)目中存在很多這樣的緩存存取情況的時(shí)候就會(huì)變得難以維護(hù)和管理，因?yàn)槠渚拖袢肿兞恳粯由⒙湓陧?xiàng)目的各個(gè)地方，這時(shí)候我們應(yīng)該將這些變量統(tǒng)一管理起來(lái)，放到一個(gè)或多個(gè)文件中去，比如：

/* types.js */

export const USER_NAME = 'userName';
export const TOKEN = 'token';

在需要存取的時(shí)候，直接引用：

import { USER_NAME, TOKEN } from '../types.js'

sessionStorage[USER_NAME] = '張三';
localStorage[TOKEN] = 'xxx';

使用這種方法的好處在于一旦我們需要修改變量名，直接修改管理文件中的值即可，無(wú)需修改使用它的頁(yè)面，同時(shí)這也可以避免命名沖突等問(wèn)題的出現(xiàn)，這類似于 vuex 中 mutations 變量的管理。

9. 使用 setTimeout 代替 setInterval

一般情況下我們?cè)陧?xiàng)目里不建議使用 setInterval，因?yàn)槠鋾?huì)存在代碼的執(zhí)行間隔比預(yù)期小以及 “丟幀” 的現(xiàn)象，原因在于其本身的實(shí)現(xiàn)邏輯。很多人會(huì)認(rèn)為 setInterval 中第二個(gè)時(shí)間參數(shù)的作用是經(jīng)過(guò)該毫秒數(shù)執(zhí)行回調(diào)方法，其實(shí)不然，其真正的作用是經(jīng)過(guò)該毫秒數(shù)將回調(diào)方法放置到隊(duì)列中去，但是如果隊(duì)列中存在正在執(zhí)行的方法，其會(huì)等待之前的方法完畢再執(zhí)行，如果存在還未執(zhí)行的代碼實(shí)例，其不會(huì)插入到隊(duì)列中去，也就產(chǎn)生了 “丟幀”。

而 setTimeout 并不會(huì)出現(xiàn)這樣的現(xiàn)象，因?yàn)槊恳淮握{(diào)用都會(huì)產(chǎn)生了一個(gè)新定時(shí)器，同時(shí)在前一個(gè)定時(shí)器代碼執(zhí)行完之前，不會(huì)向隊(duì)列插入新的定時(shí)器代碼。

// 該定時(shí)器實(shí)際會(huì)在 3s 后立即觸發(fā)下一次回調(diào)
setInterval(() => {
 // 執(zhí)行完這里的代碼需要 2s
}, 1000);

// 使用 setTimeout 改寫，4秒后觸發(fā)下一次回調(diào)
let doSometing = () => {
 // 執(zhí)行完這里的代碼需要 2s
 
 setTimeout(doSometing, 1000);
}

doSometing();

延伸閱讀：對(duì)于“不用setInterval，用setTimeout”的理解

10. 不要使用 for in 循環(huán)來(lái)遍歷數(shù)組

大家應(yīng)該都知道 for in 循環(huán)是用于遍歷對(duì)象的，但它可以用來(lái)遍歷數(shù)組嗎？答案是可以的，因?yàn)閿?shù)組在某種意義上也是對(duì)象，但是如果用其遍歷數(shù)組會(huì)存在一些隱患：其會(huì)遍歷數(shù)組原型鏈上的屬性。

let arr = [1, 2];

for (let key in arr) {
 console.log(arr[key]); // 會(huì)正常打印 1, 2
}

// 但是如果在 Array 原型鏈上添加一個(gè)方法
Array.prototype.test = function() {};

for (let key in arr) {
 console.log(arr[key]); // 此時(shí)會(huì)打印 1, 2, ƒ () {}
}

因?yàn)槲覀儾荒鼙ＷC項(xiàng)目代碼中不會(huì)對(duì)數(shù)組原型鏈進(jìn)行操作，也不能保證引入的第三方庫(kù)不對(duì)其進(jìn)行操作，所以不要使用 for in 循環(huán)來(lái)遍歷數(shù)組。

結(jié)語(yǔ)

本文羅列了 10 個(gè)項(xiàng)目開發(fā)中常見的編碼技巧與規(guī)范，其實(shí)技巧和規(guī)范之間本身就是相輔相成的，所以沒有分別進(jìn)行羅列。當(dāng)然實(shí)際的項(xiàng)目開發(fā)中存在著很多這樣的例子需要大家自己去歸納和整理，比如使用 name 來(lái)命名你的組件等。如果你有不錯(cuò)的點(diǎn)子，也可以分享在下方的評(píng)論區(qū)域中供大家學(xué)習(xí)。

拓展閱讀：前端各類規(guī)范集合

思考 & 作業(yè)

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com