溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了Vue代碼可讀性的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
千萬不要把一個頁面的實現代碼都梭哈在一個.vue文件中，除非這個頁面非常簡單，不然這個.vue文件中的代碼會又長又臭。
Vue提供組件的目的不僅僅是為了復用，也可以用來分割代碼，甚至善用組件可以優化頁面的渲染更新速度。 這是因為Vue頁面渲染更新時不會去更新頁面中的組件，除非組件的props或者slot所引用的數據發生變化。
可以按以下步驟來將一個Vue頁面分割成一個個組件讓代碼更有條理性
如何定義UI組件呢？個人建議按有無處理服務端數據來區分UI組件和業務組件。例如加載彈窗、二次確認彈窗、消息提示框等等屬于UI交互組件。
將UI組件提取出來后，可以把UI交互的代碼和業務交互的代碼剝離開來。切記不能UI組件中寫業務代碼，這樣UI組件將無法復用。
舉一個反例，在二次確認彈窗中添加二次確認后要處理的業務代碼，導致UI組件將無法復用。我們可以模仿ElementUI中二次確認彈窗的調用來實現一個二次確認彈窗組件。
this.$confirm(message, title, options)
.then(res =>{})
.catch(err =>{})這樣業務代碼可以寫在then的回調函數中，組件的核心實現代碼如下所示:
//confirm.vue
<template>
<div v-show="show">
//...
<div @click="ok"></div>
<div @click="cancel"></div>
</div>
</template>
<script>
export default {
data() {
return {
show: false,
}
},
methods: {
ok() {
this.show = false;
this.resolve();
},
cancel() {
this.show = false;
this.resolve();
},
}
}
</script>//index.js
import Vue from 'vue';
import options from './confirm.vue';
const Confirm = Vue.extend(options);
let confirm = undefined;
const ConfirmInit = (options = {}) => {
return new Promise((resolve, reject) => {
options.resolve = resolve;
options.reject = reject;
confirm = new Confirm({
el: document.createElement('div'),
data: options
})
document.body.appendChild(confirm.$el);
Vue.nextTick(() => {
if (confirm) confirm.show = true;
})
return confirm;
})
}
Vue.prototype.$confirm = ConfirmInit;//main.js import 'components/confirm/index.js';//全局注冊二次確認彈窗confirm組件
一個頁面可以分為多個區域，比如頭部、底部、側邊欄、商品列表、成員列表等等，每個區域可以當作一個模塊來提取業務組件。
按模塊提取完業務組件，此時業務組件有可能還是很龐大的，故要按功能在進一步地提取功能組件。
功能有大有小，提取要注意把握幾個原則：
過于簡單的功能不提取：
例如一個收藏的功能，只要請求一個接口就完成，類似這樣的功能不要提取。要有一定復雜度的邏輯操作的功能才提取。
功能要單一：
一個功能組件只處理一項業務。
例如一個文件閱讀器組件，有一個需求，要求打開文件后自動收藏該文件，那么收藏邏輯代碼要寫在哪里呢？
或許你想都沒想就在組件中監聽文件成功打開的方法中寫下收藏邏輯代碼，過一段時間后，需求改為要先添加到閱讀記錄中再點擊收藏按鈕收藏，去組件中修改代碼時發現另一個頁面也引用了這個組件，故在組件中要額外加個參數做業務場景區分，隨著需求的變化導致業務場景的疊加，組件的代碼中會添加各種判斷邏輯，久而久之變得又長又臭，顯然這種做法是不可去。
正確的做法是在組件標簽上自定義一個事件on-fileOpen-success，用handleFileOpenSuccess函數來監聽這個事件。
<fileReader @on-fileOpen-success="handleFileOpenSuccess" > </fileReader>
在組件中監聽文件成功打開的方法中執行this.$emit('on-fileOpen-success',data)觸發這個事件，其中data可以把文件信息傳遞出去，在handleFileOpenSuccess函數去處理收藏或者添加歷史記錄再收藏等業務交互。這種做法使文件閱讀器組件具有單一性。
功能組件盡量少包含UI部分，UI部分用slot插槽傳入，這樣使組件更純粹，更具有復用性。
例如上傳組件的上傳圖標，不可能隨著UI設計稿的變動就往里面添加一個上傳圖標，此時可以利用slot插槽把上傳圖標傳入。
//upload.vue <template> <div> <slot name="icon"></slot> </div> </template> //index.vue <template> <div> <upload> <template #icon> //上傳圖標 </template> </upload> </div> </template>
如果想要將一個對象的所有屬性都作為prop傳入組件componentA，可以使用不帶參數的v-bind。例如，對于一個給定的對象params：
params: {
id: 1,
name: 'vue'
}優化前：
<componentA :id="params.id" :name="params.name"></componentA>
優化后：
<componentA v-bind="params"></componentA>
在封裝第三方組件中，經常會遇到一個問題，如何通過封裝的組件去使用第三方組件自身的屬性和事件。
比如封裝一個elementUi組件中的Input輸入框組件myInput，當輸入錯誤的內容在輸入框下面顯示錯誤的提示。
myInput組件代碼如下所示：
<template>
<div>
<el-input v-model="input"></el-input>
<div>{{errorTip}}</div>
</div>
</template>
<script>
export default {
props: {
value: {
type: String,
default: '',
},
errorTip: {
type: String,
default: '',
}
},
data() {
return {
}
},
computed: {
input: {
get() {
return this.value
},
set(val) {
this.$emit('input', val)
}
}
}
}
</script>這樣調用myInput組件，其中errorTip為輸入框輸入錯誤的提示。
<myInput v-model="input" :errorTip="errorTip"></myInput>
如果要在myInput組件上添加一個disabled屬性來禁用輸入框，要如何實現呢？一般同學會這么做
<template>
<div>
<el-input v-model="input"
:disabled="disabled"></el-input>
<div>{{errorTip}}</div>
</div>
</template>
<script>
export default {
props: {
//...
disabled: {
type: Boolean,
default: false
}
},
//...
}
</script>過一段時間后又要在myInput組件上添加el-input組件其它的屬性，el-input組件總共有27個多，那該怎么呢，難道一個個用prop傳進去，這樣做不僅可讀性差而且繁瑣，可以用$attrs一步到位，先來看一下attrs的定義。
$attrs: 包含了父作用域中不作為 prop 被識別 (且獲取) 的 attribute 綁定 (class 和 style 除外)。當一個組件沒有聲明任何prop 時，這里會包含所有父作用域的綁定 (class 和 style 除外)，并且可以通過 v-bind="$attrs" 傳入內部組件
v<template>
<div>
<el-input v-model="input"
v-bind="$attrs"></el-input>
<div>{{errorTip}}</div>
</div>
</template>這還不夠，還得把inheritAttrs選項設置為false，為什么呢，來看一下inheritAttrs選項的定義就明白了。
默認情況下父作用域的不被認作 props 的 attribute 綁定 (attribute bindings) 將會“回退”且作為普通的 HTML attribute 應用在子組件的根元素上。當撰寫包裹一個目標元素或另一個組件的組件時，這可能不會總是符合預期行為。通過設置 inheritAttrs 為 false，這些默認行為將會被去掉。而通過 $attrs 可以讓這些 attribute 生效，且可以通過 v-bind 顯性的綁定到非根元素上。注意：這個選項不影響 class 和 style 綁定。
簡單來說，把inheritAttrs設置為false，v-bind="$attrs" 才生效。
<template>
<div>
<el-input v-model="input"
v-bind="$attrs"></el-input>
<div>{{errorTip}}</div>
</div>
</template>
<script>
export default {
inheritAttrs: false,
props: {
value: {
type: String,
default: '',
},
errorTip: {
type: String,
default: '',
}
},
data() {
return {
}
},
computed: {
input: {
get() {
return this.value
},
set(val) {
this.$emit('input', val)
}
}
}
}
</script>這樣就可以很清楚的把el-input組件的屬性和myinput組件的屬性區分開來了，組件的props選項的可讀性大大提高。
那么如何實現在myIpput組件上使用el-input組件上自定義的事件呢，可能你的第一反應是this.$emit。
<template>
<div>
<el-input v-model="input"
v-bind="$attrs"
@blur="blur">
</el-input>
<div>{{errorTip}}</div>
</div>
</template>
<script>
export default {
//...
methods: {
blur() {
this.$emit('blur')
}
}
}
</script>
<myInput
v-model="input"
:errorTip="errorTip"
@blur="handleBlur">
</myInput>el-input組件有4個自定義事件，還不算多，假如遇到自定義事件更多的第三方組件，要怎么辦，難道一個一個添加進去，不僅會增加一堆非必要的methods，而且可讀性差很容易和myInput自身的methods混在一起。其實可以用$listeners一步到位，先來看一下$listeners的定義。
$listeners：包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監聽器。它可以通過 v-on="$listeners" 傳入內部組件。
<template>
<div>
<el-input v-model="input"
v-bind="$attrs"
v-on="$listeners">
</el-input>
<div>{{errorTip}}</div>
</div>
</template>
<script>
export default {
//...
}
</script>
<myInput
v-model="input"
:errorTip="errorTip"
@blur="handleBlur">
</myInput>在myInput組件中只要在el-input組件上添加v-on="$listeners"，就可以在myInput組件上使用el-input組件自定義的事件。
感謝你能夠認真閱讀完這篇文章，希望小編分享的“Vue代碼可讀性的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
