什么是組件？

web的組件其實(shí)就是頁(yè)面組成的一部分，好比是電腦中的每一個(gè)元件（如硬盤、鍵盤、鼠標(biāo)），它是一個(gè)具有獨(dú)立的邏輯和功能或界面，同時(shí)又能根據(jù)規(guī)定的接口規(guī)則進(jìn)行相互融合，變成一個(gè)完整的應(yīng)用。

web頁(yè)面就是由一個(gè)個(gè)類似這樣的部分組成的，比如導(dǎo)航、列表、彈窗、下拉菜單等。頁(yè)面只不過是這些組件的容器，組件自由組合形成功能完整的界面，當(dāng)不需要某個(gè)組件，或者想要替換某個(gè)組件時(shí)，可以隨時(shí)進(jìn)行替換和刪除，而不影響整個(gè)應(yīng)用的運(yùn)行。

前端組件化的核心思路就是將一個(gè)巨大復(fù)雜的東西才分成粒度合理的小東西。

使用組件的好處：

• 提高開發(fā)效率
• 方便重復(fù)使用
• 簡(jiǎn)化調(diào)試步驟
• 提升整個(gè)項(xiàng)目的課維護(hù)性
• 便于協(xié)同開發(fā)
  

組件（Component）是 Vue.js 最強(qiáng)大的功能之一。
組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。
在較高層面上，組件是自定義元素， Vue.js 的編譯器為它添加特殊功能。
在有些情況下，組件也可以是原生 HTML 元素的形式，以 is 特性擴(kuò)展。

組件系統(tǒng)讓我們可以用獨(dú)立可復(fù)用的小組件來構(gòu)建大型應(yīng)用，幾乎任意類型的應(yīng)用的界面都可以抽象為一個(gè)組件樹：

vue.js的組件可以理解為預(yù)先定義好行為的ViewModel類。一個(gè)組件可以預(yù)先定義很多選項(xiàng)。但是最核心的是以下幾個(gè)：

• 模板（template）——模板聲明了數(shù)據(jù)和最終展現(xiàn)給用戶的DOM之間的映射關(guān)系。
• 初始數(shù)據(jù)（data）——一個(gè)組件的初始數(shù)據(jù)狀態(tài)。對(duì)于可服用的組件來說，通常是私有的狀態(tài)。
• 接受的外部參數(shù)（props）——組件之間通過參數(shù)來進(jìn)行數(shù)據(jù)的傳遞和共享。參數(shù)默認(rèn)是單向綁定（由上至下），但也可以顯式聲明為雙向綁定。
• 方法（methods）——對(duì)數(shù)據(jù)的改動(dòng)操作一般都在組件的方法內(nèi)進(jìn)行。可以通過v-on指令將用戶輸入事件和組件方法進(jìn)行綁定。
• 生命周期鉤子函數(shù)（lifecycle hooks）——一個(gè)組件會(huì)觸發(fā)多個(gè)生命周期鉤子函數(shù)，比如created、attached、destroyed等。在這些鉤子函數(shù)中，我們可以封裝一些自定義的邏輯。和傳統(tǒng)的MVC相比，這可以理解為Controller的邏輯被分散到了這些鉤子函數(shù)中。

以上就是深入了解vue 組件的詳細(xì)內(nèi)容，更多關(guān)于vue 組件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論