本文介紹了編寫vue.js元件前需要知道的 10 件事，其中包括：元件可以全域性或區域性載入；延遲載入 / 非同步元件；必需的 Props；使用 $emit 觸發自定義事件；多 Props 繫結和覆蓋等等。

1. 元件可以全域性或區域性載入

vue.js提供了兩種載入元件的方法：一種是 Vue 例項中的全域性載入，另一種是元件級的載入。兩種方法都有各自的優點。

全域性載入的元件可以從應用程式中的任何模板（包括子元件）訪問。它限制了將全域性元件匯入子元件的次數。此外，如果你全域性載入元件，就不會得到 Vue 註冊元件錯誤“你註冊的元件正確嗎？”注意，載入全域性元件要謹慎。它會使你的應用程式膨脹，即使不使用，它仍然會包含在你的

importVuefrom'vue';
importEditorfrom'./componetns/Editor.vue'

//Where'editor'isthenameofthe component <editor></editor>
Vue.component('editor', Editor);

區域性載入元件使你能夠隔離元件，並且只在必要時載入它們。當與webpack結合使用時，你可以只在使用元件時延遲載入它們。這使你的應用程式初始檔案較小，並減少了初始載入時間。

<template>
<section>
<editor></editor>
</section>
</template>

<script>
importEditorfrom'./Editor'
exportdefault{
name:'dashboard',
components: {
Editor
}
}
</script>
 

2. 延遲載入 / 非同步元件

使用 Webpack 的動態匯入來延遲載入元件。Vue 支援在渲染時延遲載入元件和程式碼分割。這些優化讓你可以只在需要時載入元件程式碼，從而減少 HTTP 請求、檔案大小，並自動提高效能。這個特性的重要之處在於，它既可以處理全域性載入的元件，也可以處理區域性載入的元件。

全域性載入非同步元件：

importVuefrom'vue';

//Where'editor'isthenameofthe component <editor></editor>
//Returnsa promise thatonlygetscalledwhenthe compoentisrenderedandthencached.
Vue.component('editor', () =>import('./componetns/Editor.vue'));
 

本地載入非同步元件：

<template>
<section>
<editor></editor>
</section>
</template>

<script>
exportdefault{
name:'dashboard',
components: {
'Editor':()=>import('./Editor')
}
}
</script>

“當他們將平均頁面載入時間減少 850 毫秒時，COOK 將轉化率提高了 7％，跳出率降低了 7％，每次會話增加了 10％。”

3. 必需的 Props

有很多方法可以為元件建立 props；你可以傳遞一個表示 prop 名稱的字串陣列，也可以傳遞一個以鍵作為 prop 名稱的物件和一個配置物件。

使用基於物件的方法，你可以為單個 prop 建立一些鍵配置更改，其中之一就是必需的鍵。必需的鍵需要一個 true 或 false 值。當元件被使用時，如果 prop 沒有設定，true 就會丟擲一個錯誤，false（預設值）就不必需或者丟擲一個錯誤。在和其他開發人員共享元件以及提醒你自己某個 prop 對該元件至關重要時，這是很好的做法。

<template>
<section>
<editorv-if="isAdmin"></editor>
</section>
</template>

<script>
exportdefault{
name:'Editor',
props: {
enabled: {},
isAdmin: {
required:true
}
}
}
</script>

4. 使用 $emit 觸發自定義事件

子元件和父元件之間的通訊可以通過使用元件內建的函式emit來發出自定義事件。

emit來發出自定義事件。emit來發出自定義事件。emit函式接受一個事件名稱字串和要發出的可選值。要偵聽事件，只需將“@eventName”新增到發出事件的元件並傳入事件處理程式。這是一種很好的方法，可以保持真相的單一來源，並使資料從子元件流向父元件。

<template>
<section>
<button@click="onClick">Save</button>
</section>
</template>

<script>
exportconstSAVE_EVENT ='save';
exportdefault{
name:'triggerEvent',
methods: {
onClick() {
this.$emit(SAVE_EVENT);
}
}
}
</script>

<template>
<section>
<pv-show="showSaveMsg">Thanks for Listening for the saved event</p>
<trigger-event@save="onSave"></trigger-event>
</section>
</template>

<script>
exportdefault{
name:'TriggerEvent',
data(){
return{
showSaveMsg:false
}
},
components:{
//You can find Trigger Custom Events in VueJs https://gist.github.com/eabelard/36ebdc8367bfeff75387cc863c810f65
TriggerEvent:()=>import('./TriggerEvent')
},
methods: {
onSave() {
this.showSaveMsg =true;
}
}
}

5. 將元件分解為邏輯塊

說起來容易做起來難，但是你如何定義要將元件分解成什麼樣的邏輯塊？分解元件的第一種方法是基於資料變化率。如果資料在元件的某個部分始終在變化，而在其他部分沒有變化，那麼它可能應該自成元件。

這樣做的原因是，如果你的資料 /html在模板的一個部分中不斷變化，那麼整個模板都需要檢查和更新。但是，如果將相同的html放入它自己的元件中，並使用 props 傳遞資料，那麼當它的 props 發生更改時，只有那個元件才會更新。

另一種從邏輯上分解元件的方法是重用。如果你的 HTML、圖形或功能在整個應用程式中始終如一地使用，比如按鈕、複選框、徽標動畫、操作呼叫或文字簡單變化的圖形，那麼它們就是可以隔離到一個可重用的新元件中的很好的候選項。可重用元件具有易於維護的潛在好處，因為你可以更改一個元件，而不必在程式碼庫中查詢替換和更改多個地方。

6. 驗證 Props

使用物件表示法來配置每個 prop，而不是使用字串陣列來定義 prop。兩種非常有用的配置樣式是“type”和 validator。

使用型別引數，Vue 將對你的 prop 值進行自動型別檢查。例如，如果我們期望一個 Number prop，但收到了一個 String，你會在控制檯收到類似這樣的警告：

[Vue warn]: Invalid prop: type check failed for prop “count”. Expected Number

對於更復雜的驗證，我們可以將函式傳遞給 validator 屬性，該屬性以該值作為引數並返回 true 或 false。這非常強大，因為它允許我們針對傳遞給該特定屬性的值編寫自定義驗證。

<template>
<section:hljs-attr">status]">
<p>You{{status}}the test</p>
</section>
</template>

<script>
exportdefault{
name:"CustomValidation",
props: {
enabled:Boolean,
status: {
default:"fail",
validator:function(value){
return["pass","fail"].includes(value);
}
}
}
};
</script>
<stylescoped>
.custom-validation{
opacity:0.5;
}
.enabled{
opacity:1;
}
.pass{
color: green;
}
.fail{
color: red;
}
</style>

7. 多 Props 繫結和覆蓋

如果元件有許多 props（比如 5、6、7 或更多），那麼不斷地為每個 prop 設定繫結可能會變得單調乏味。幸運的是，有一種快速的方法可以設定元件上所有屬性的繫結，那就是使用 v-bind 繫結物件，而不是單個屬性。

使用物件繫結的另一個好處是可以覆蓋來自物件的任何繫結。在我們的例子中，如果我們在 person 物件中將 isActive 設定為 false，那麼我們就可以對實際的 person 元件執行另一個繫結，並將 isActive 設定為 true，而不覆蓋原始元件。

<template>
<divid="app">
<personv-bind="person":isActive="true"/>
</div>
</template>

<script>
importPersonfrom"./components/Person.vue";
exportdefault{
name:"App",
components: { Person },
data() {
return{
person: {
firstName:"Jaxson",
lastName:"Pierre",
dob:"05/22/1996",
isActive:false
}
};
}
};
</script>

8. 在元件中修改 Props

在某些情況下，你可能希望修改從某個 prop 傳入的值。然而，這樣做你會收到一個警告“避免直接改變一個 prop”，因為你的確不該。相反，使用 prop 值作為區域性資料屬性的預設值。這樣做將使你能夠看到原始值，而修改區域性資料不會改變 prop 值。

這是有代價的。使用此方法，你的區域性資料屬性不會對 prop 值作出反應，因此來自父元件的任何對 prop 值的更改都不會更新你的區域性值。但如果確實需要這些更新，則可以使用 computed 屬性來組合值。

<template>
<main>
<section>
<h2>Non reactive</h2>
<p>{{ localFirstName }}</p>
<[email protected]="changeLocalFirstName">Update First Name</button>
</section>
<section>
<h2>reactive List</h2>
<ol>
<liv-for="item in itemsList":key="item">{{ item }}</li>
</ol>
</section>
</main>
</template>

<script>
exportdefault{
name:"FullName",
props: {
firstName: {
type:String,
default:"Mike"
},
title: {
type:String,
default:"Senior"
},
items: {
type:Array,
default() {
return["lemons","oranges"];
}
}
},
computed: {
itemsList() {
return[...this.items, ...this.localItems];
}
},
data() {
return{
localItems: ["mangos","apples"],
localFirstName:this.firstName
};
},
methods: {
changeLocalFirstName() {
this.localFirstName ="Jackson";
}
}
};
</script>

<stylescoped>
</style>

9. Test Utils Mount 與 Shallow Mount

有兩種方法可以在 Vue tests utils 中建立和引導元件。一個是 mount，另一個是 shallow mount；兩者各有優缺點。

當你希望在元件及其子元件之間進行共生測試時，mount技術非常有效。它讓你可以測試父元件是否正確地與子元件進行預期的互動。相反，正如名稱所示，shallow mount 只例項化父元件並在完全隔離的情況下渲染它，而不考慮它的任何子元件。

那麼哪種方法更好呢？這取決於你。你選擇的策略應該取決於你自己的可衡量目標。試著在完全隔離的情況下單獨測試元件，shallow 方法工作得很好。需要處理包含子元件的元件，而且要確保通訊，那麼就要使用 mount 選項。一個很好的選擇是兩者都使用。你並不必侷限於一個，以混合搭配滿足測試需求為準。

資源搜尋網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com

10. 強大的 Vue-cli

Vue CLI 是一個功能強大的命令列介面，它使得開發人員可以快速地利用大量可以加速工作流的特性。

我經常使用的一個特性是執行 vue serve 並將路徑傳遞給 vue 元件。這樣做的好處在於，你可以完全獨立地開發元件，同時還可以熱過載和遍歷元件，直到它的核心功能都完成了為止。不需要臨時將新元件匯入要開發的頁面。

vue serve ./components/views/GoldenRule

在團隊中工作時，你可能希望提取一個特定的元件並與其他元件共享。這就需要 Vue CLI 的下一個特性：將 Vue 元件匯出為庫的能力。當被呼叫時，Vue 將自動構建一個單檔案元件，將css移到一個外部css檔案中（可選的，你也可以內聯它），並建立 UMD 和 Common .js 檔案，以匯入其他 JS 專案。