vue就地复用不是更快吗_Vue.js从零开始——组件（1）
其實(shí)本來應(yīng)該把這個章節(jié)也放在入門里面的，但是想想這個部分是 Vue 的核心功能之一，所以就獨(dú)立出來吧，專門進(jìn)行介紹也挺好的。
這個章節(jié)主要是對 Vue 的組件（Component）有個基礎(chǔ)的了解先，也就是組件的入門。
1 概念
組件是 Vue.js 最強(qiáng)大的功能之一，它可以擴(kuò)展 HTML 元素，封裝可重用的代碼。
組件系統(tǒng)讓我們可以用獨(dú)立可復(fù)用的小組件來構(gòu)建大型應(yīng)用，幾乎任意類型的應(yīng)用的界面都可以抽象為一個組件樹：
官網(wǎng)的圖，蠻形象的因為它可復(fù)用，所以并不在 HTML 里面定義，而是首先在 Vue 代碼中注冊一個名字，格式如下：
VuetagName 為組件名，options 為配置選項，完成后，我們可以在 HTML 當(dāng)中使用以下方式來調(diào)用組件：
<1.1 使用
下面是個例子：
<!DOCTYPE html>上面的代碼為了方便查看，我把 <script> 的部分統(tǒng)一放在了 <div> 下面，從邏輯上面發(fā)生的順序，可以理解為，先注冊了組件 button-counter，然后在 <div> 當(dāng)中引用，最后創(chuàng)建這個 <div> 的實(shí)例，從而使得組件發(fā)生作用。
因為組件是可復(fù)用的 Vue 實(shí)例，所以它們與 new Vue 接收相同的選項，例如 data、computed、watch、methods 以及生命周期鉤子等；僅有的例外是像 el 這樣根實(shí)例特有的選項。
1.2 復(fù)用
組件的誕生，其初衷就是為了能夠復(fù)用，所以只要在 Vue 當(dāng)中注冊了組件，之后在 HTML 當(dāng)中使用幾次都是可行的，譬如：
<這里代碼當(dāng)中調(diào)用了 4 次，于是就出現(xiàn)了 4 個完全相同的按鈕，當(dāng)然功能上也是一致的：當(dāng)點(diǎn)擊按鈕時，每個組件都會各自獨(dú)立維護(hù)它的 count；因為每用一次組件，就會有一個它的新實(shí)例被創(chuàng)建。
1.3 與 Vue 實(shí)例的區(qū)別
前面提到過，組件和 Vue 實(shí)例可以接受相同的選項，這里主要看看它和實(shí)例關(guān)鍵的不同之處：
- 沒有 el 選項：這是因為組件不需要事先綁定到對應(yīng)的 HTML 元素，而是在創(chuàng)建后，再到 HTML 當(dāng)中調(diào)用；
- data 必須是個函數(shù)：這樣，每個實(shí)例就可以維護(hù)一份被返回對象的獨(dú)立的拷貝，否則組件的復(fù)用就無法成立了，因為所用組件之間將會互相影響，比如上面的例子，可能會變成這樣：
當(dāng)然為了避免這種情況，Vue 對此做了一點(diǎn)限制，如果組件的 data 不是一個函數(shù)的時候，組件本身將無法使用，比如這樣：
Vue瞧，Vue 直接報錯了，而且寫的很清楚：The "data" option should be a function...。
2 組件的注冊
一個網(wǎng)頁應(yīng)用，是需要有很多結(jié)構(gòu)的，如果還記得之前 CSS 部分的網(wǎng)格布局，我們就應(yīng)該了解到大部分的頁面都是需要類似結(jié)構(gòu)的，我們可以直接轉(zhuǎn)化為各個組件，例如，可能會有頁頭、側(cè)邊欄、內(nèi)容區(qū)等組件，每個組件又包含了其它的像導(dǎo)航鏈接、Wiki 之類的組件。
為了能在模板中使用，這些組件必須先注冊以便 Vue 能夠識別。這里有兩種組件的注冊類型：全局注冊和局部注冊。
前面一節(jié)，我們的組件都只是通過 Vue.component 全局注冊的：
Vue就先從這一部分開始了解注冊組件的一些細(xì)節(jié)：
2.1 組件名
在注冊一個組件的時候，我們始終需要給它一個名字，也就是組件注冊的第一個參數(shù)。
給予組件的名字依賴于我們打算拿它來做什么：當(dāng)直接在 DOM 中使用一個組件 (而不是在字符串模板或單文件組件) 的時候，我們強(qiáng)烈推薦遵循 W3C 規(guī)范中的自定義組件名 (字母全小寫且必須包含一個連字符，即 kebab-case，例如 my-component-name)，這會幫助我們避免和當(dāng)前以及未來的 HTML 元素相沖突。
官方推薦的風(fēng)格指南中，可以查閱到關(guān)于組件名的其它建議。
當(dāng)然，我們也可以使用首字母大寫的格式，即 PascalCase，例如 MyComponentName，但是這種命名方式，在 HTML 當(dāng)中依然要使用 my-component-name 來進(jìn)行調(diào)用，因為比較違反直覺，所以我個人不是很建議。
2.2 全局注冊
全局注冊，也就是說它們在注冊之后可以用在任何新創(chuàng)建的 Vue 根實(shí)例 (new Vue) 的模板中，比如官網(wǎng)上的例子：
Vue：
VueHTML：
<在所有子組件中也是如此，也就是說這三個組件在各自內(nèi)部也都可以相互使用。
因為前面已經(jīng)講述過很多相關(guān)內(nèi)容，這部分就簡化一下，到此為止。
2.3 局部注冊
全局注冊往往是不夠理想的。比如，如果使用一個像 webpack 這樣的構(gòu)建系統(tǒng)，全局注冊所有的組件意味著即便我們已經(jīng)不再使用一個組件了，它仍然會被包含在最終的構(gòu)建結(jié)果中。這造成了用戶下載的 JavaScript 的無謂的增加。
在這些情況下，我們可以通過一個普通的 JavaScript 對象來定義組件：
let然后，在 components 選項當(dāng)中定義需要使用的組件：
letcomponents 對象中的屬性名就是自定義元素的名字，它的值就是這個組件的選項對象。
下面是個例子，還用之前那個按鈕的例子進(jìn)行修改：
<!DOCTYPE html> 就不用gif了，因為行為模式和之前的例子一樣上面的代碼聲明了一個 customComp 對象，它的內(nèi)容就和之前進(jìn)行全局注冊組件是一樣的，此時，我們在 app 這個實(shí)例當(dāng)中將該對象注冊到其內(nèi)部，并指定了一個和原先一樣的組件名，所以在 HTML 當(dāng)中無需修改即可調(diào)用了。
局部注冊和全局注冊的最大不同是，局部注冊的組件在其子組件中不可用。
例如，如果需要 ComponentA 在 ComponentB 中可用，我們要這樣寫：
let或者我們使用 ES 2015 后引入的模塊（module），可以這樣寫：
import這里要留意，在 ES 2015+ 中，在對象中放一個類似 ComponentA 的變量名其實(shí)是 ComponentA: ComponentA 的縮寫，即這個變量名同時是：
- 用在模板中的自定義元素的名稱
- 包含了這個組件選項的變量名
有關(guān)于模塊方面的相關(guān)知識，我會考慮在后面單獨(dú)成章來組織一下，今天先了解到這里就夠了。
3 向子組件傳遞數(shù)據(jù)
之前在第2節(jié)的開頭，我們提到了頁面應(yīng)用上可能存在 Wiki 組件的事情，問題是如果不能向這個組件傳遞某一篇 Wiki 的標(biāo)題或內(nèi)容之類的我們想展示的數(shù)據(jù)的話，它是沒有辦法使用的。
這就是 Vue 當(dāng)中 prop 的由來：prop 是可以在組件上注冊的一些自定義屬性，當(dāng)一個值傳遞給一個 prop 屬性的時候，它就變成了那個組件實(shí)例的一個屬性；為了給 Wiki 組件傳遞一個標(biāo)題，我們可以用一個 props 選項將其包含在該組件可接受的 prop 列表中。
比如下面的例子：
Vue一個組件默認(rèn)可以擁有任意數(shù)量的 prop，任何值都可以傳遞給任何 prop；在上述模板中，我們能夠在組件實(shí)例中訪問這個值，就像訪問 data 中的值一樣。
一個 prop 被注冊之后，就可以像這樣把數(shù)據(jù)作為一個自定義屬性傳遞進(jìn)來：
<當(dāng)然，在一個典型的應(yīng)用當(dāng)中，Wiki 是不可能僅僅有一個標(biāo)題的，那么我們可以把主體組織在 data 當(dāng)中，類似于（為了簡單就省略了主體內(nèi)容）：
// 雖然我個人不建議，但是實(shí)際上不聲明對象而是注冊實(shí)例也是可行的同時為每一篇 Wiki 渲染一個獨(dú)立組件，包括編號、標(biāo)題和內(nèi)容等：
<如上所示，我們可以使用 v-bind 來動態(tài)傳遞 prop，這在一開始不清楚要渲染的具體內(nèi)容，比如從一個 API 獲取文章列表的時候，是非常有用的，比如：
<!DOCTYPE html>上面的代碼當(dāng)中，從目標(biāo) API 地址獲取了一些文章內(nèi)容，并簡單的使用 CSS 進(jìn)行了包裝，看起來文章之間的區(qū)別比較明顯了，并通過字體區(qū)分了標(biāo)題和內(nèi)容。
今天先到這里，之后的章節(jié)繼續(xù)深入組件，預(yù)計這個部分會比較長，我盡量堅持每天一更，把這個部分通過我自己的理解講清楚它。不過再怎么樣，絕大部分內(nèi)容還是參照了官方文檔的，所以有些地方可能不夠清楚的，請留言告訴我，我再看看怎么改進(jìn)。
總結(jié)
以上是生活随笔為你收集整理的vue就地复用不是更快吗_Vue.js从零开始——组件（1）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： @cacheable 是否缓存成功_DN
- 下一篇： vuepress侧边栏配置_vuepre