Vue設計思想
組件設計主要是模塊設計，主要體現(xiàn)在UI、基本功能、業(yè)務需求、性能。
UI即我們寫的html代碼主要是界面布局樣式等。
基本功能指的是實現(xiàn)我們需要的如按鈕的常用功能。
業(yè)務需求指的是在基礎功能的基礎上進行場景化的添加。
性能指組件的渲染時間等。
例子實現(xiàn)一個按鈕組件：
<div :class="[readonly?'readonly-hover':'',appointment?'appointment-style':'',ghost?'primary-ghost':'']" class="button-wrap">
{{ text }}
</div>
</template>
<script>
export default {
name: 'BtnComponent',
//所有得樣式都根據(jù)使用情況，根據(jù)props來傳
props: ['text', 'readonly', 'appointment', 'ghost'],
};
</script>
<style scoped lang="less">
.button-wrap{
display: flex;
justify-content: center;
align-items: center;
color: #fff;
height: 40px;
background-color: #FFFFFF;
border-radius: 3px;
cursor: pointer;
-moz-user-select:none; /*火狐*/
-webkit-user-select:none; /*webkit瀏覽器*/
-ms-user-select:none; /*IE10*/
-khtml-user-select:none; /*早期瀏覽器*/
user-select:none;
transition: background-color 0.2s linear;
&:hover{
background-color: #57a3f3;
}
}
.appointment-style{
&:hover{
background-color: #3F7DD7;
}
}
.primary-ghost{
color: #57a3f3;
border: 1px solid #57a3f3;
background-color: #fff;
&:hover{
background-color: rgba(81, 151, 252, 0.2);
}
}
.readonly-hover{
color:#AFC0D4;
border-color: #AFC0D4;
}
.readonly-hover:hover{
background: #FFFFFF;
cursor:not-allowed;
}
</style>
在頁面中調用時：
@click.native="getCode"
:text="codeMsg"
:readonly="sendFlag"
style="width:35%"
/>
Vue封裝主要的API
Vue組件的主要是能夠接收父組件傳過來的值以及方法，還有使用匿名或具名槽進行html部分的代碼的嵌入。
主要的使用的是Vue的props、event、solt.
props表示組件接收的參數(shù)，最好用對象的寫法，這樣可以針對每個屬性設置類型、默認值或自定義校驗屬性的值，此外還可以通過type、validator等方式對輸入進行驗證。
slot可以給組件動態(tài)插入一些內容或組件，是實現(xiàn)高階組件的重要途徑；當需要多個插槽時，可以使用具名slot
event是子組件向父組件傳遞消息的重要途徑。
組件中需要避免
- 避免隱性的父子間通信
應該優(yōu)先通過prop跟事件進行父子組件通信，而不是使用this.$parent或者改變prop。
vue應用是prop向下傳遞，事件向上傳遞。問題在于這樣使用方便但是會犧牲數(shù)據(jù)流的簡潔性。 - 避免在scoped中使用元素選擇器。
- 避免v-if跟v-for一起使用，可以更換為在一個計算器屬性上遍歷并過濾列表.。
如何拆分組件通常有兩種場景
- 基礎組件
主要是指可復用，實現(xiàn)某類功能，且不包含任何業(yè)務的組件，比如像 ElementUI 這樣的組件庫，提供的就是基礎組件庫。
但是基礎組件并不一定是單一組件，它可以是一個復合組件，由若干更小的組件單元甚至是其它基礎組件組成。比如 Table 組件，它內部就是由 Header、Body 組件組成。 - 業(yè)務組件
業(yè)務組件是在基礎組件的基礎上，開發(fā)出的融入業(yè)務邏輯的復合組件，通常，業(yè)務組件是為了解決某個特定的業(yè)務場景，它的復用性相比于基礎組件而言，沒有那么的強。
不過，業(yè)務組件也是可以復用的。比如彈窗登錄的場景，就有一套完整的業(yè)務邏輯以及和服務端的交互流程，我們可以把它拆成一個登錄組件，這樣就可以在頁面中方便的接入和復用。
在日常開發(fā)工作中，需不需要把某類場景的業(yè)務抽象成業(yè)務組件，因為隨著業(yè)務組件的積累，工作效率也會得到明顯的提升。-
因此，拆分組件主要是從代碼的復用性和維護性方面考慮，另外，從性能方面考慮，組件拆分粒度不易過細。
組件的顆粒度
在組件的掛載過程中，出了前面說的創(chuàng)建和渲染 VNode 之外，內部還創(chuàng)建一個組件實例，用來維護組件的狀態(tài)和數(shù)據(jù)，此外，還有組件初始化階段的一些響應式數(shù)據(jù)處理，都會有一定耗時和內存占用。
拆分組件力度過細，會導致嵌套組件過深，顯而易見是整個應用的初始化時長會變長，占用的內存空間也會變大。
