以下內(nèi)容是我在學(xué)習(xí)和研究Vue時(shí)，對(duì)Vue的特性、重點(diǎn)和注意事項(xiàng)的提取、精練和總結(jié)，可以做為Vue特性的字典；
1. 性能優(yōu)化：
相對(duì)于計(jì)算屬性computed、方法methods、觀察watch，優(yōu)先考慮使用計(jì)算屬性實(shí)現(xiàn)，因?yàn)橛?jì)算屬性會(huì)緩存它的值，只有當(dāng)計(jì)算屬性的相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新求值；
盡可能最大化地讓Vue復(fù)用可用的元素，即，在用key管理可利用元素的地方看是否有其它更快速的替代方案；例如：對(duì)于僅展示數(shù)據(jù)不一樣的列表項(xiàng)，盡量設(shè)置相同的 key ，以便其重用；
適當(dāng)?shù)剡x擇v-if和v-show，當(dāng)元素被渲染后，需要經(jīng)常被切換時(shí)，使用v-show；否則，使用v-if；
對(duì)于不會(huì)變化的組件或元素，盡量使用v-once指令以使其路過重新渲染；
對(duì)于僅使用JavaScript鉤子進(jìn)行過渡和動(dòng)畫的元素，盡量添加
v-bind:css="false"，這樣Vue就會(huì)跳過css的檢測(cè)；從而提高性能；對(duì)于界面布局相同的路由組件，盡可能用同一個(gè)路由組件通過路由參數(shù)來(lái)實(shí)現(xiàn)與渲染多個(gè)路由組件的效果，因?yàn)檫@不需要銷毀再創(chuàng)建路由組件；
-
如果一個(gè)組件不需要生命周期鉤子函數(shù)，則優(yōu)先使用 函數(shù)式組件 ；比如下列使用場(chǎng)景：
- 程序化地在多個(gè)組件中選擇一個(gè)；
- 在將 children, props, data 傳遞給子組件之前操作它們；
-
在使用 DOM 內(nèi)模板或 JavaScript 內(nèi)的字符串模板時(shí)，模板會(huì)在運(yùn)行時(shí)被編譯為渲染函數(shù)；為了減少運(yùn)行時(shí)開銷，可以通過打包工具
webpack直接把模板編譯為渲染函數(shù)；
注意：- 當(dāng)使用單文件組件時(shí)，腳手架的相關(guān)的構(gòu)建設(shè)置會(huì)自動(dòng)把預(yù)編譯處理好，所以構(gòu)建好的代碼已經(jīng)包含了編譯出來(lái)的渲染函數(shù)而不是原始的模板字符串；
- 當(dāng)分離 JavaScript 和模板文件時(shí)，可以為 webpack 設(shè)置
vue-template-loader，它也可以在構(gòu)建過程中把模板文件轉(zhuǎn)換成為 JavaScript 渲染函數(shù)；
當(dāng)使用單文件組件時(shí)，組件內(nèi)的 CSS 會(huì)以
<style>標(biāo)簽的方式通過 JavaScript 動(dòng)態(tài)注入，這有一些小小的運(yùn)行時(shí)開銷，如果你使用服務(wù)端渲染，這也會(huì)導(dǎo)致一段“無(wú)樣式內(nèi)容閃爍 (fouc)”。將所有組件的 CSS 提取到同一個(gè)文件可以避免這個(gè)問題，也會(huì)讓 CSS 更好地進(jìn)行壓縮和緩存；在使用單文件組件時(shí)，考慮到瀏覽器渲染各種 CSS 選擇器的方式，當(dāng) p { color: red } 設(shè)置了作用域時(shí) (即與特性選擇器組合使用時(shí)) 會(huì)慢很多倍。如果你使用 class 或者 id 取而代之，比如 .example { color: red }，性能影響就會(huì)消除；
盡量給不含轉(zhuǎn)換、編譯的節(jié)點(diǎn)加上
v-pre指令，以告訴編譯器不需要編譯相應(yīng)節(jié)點(diǎn)及其子節(jié)點(diǎn)，從而提交編譯速度；對(duì)于頻繁創(chuàng)建和銷毀的組件嘗試用
<keep-alive>組件包裹；
2. v-if和v-show
v-if支持v-else和v-else-if語(yǔ)法，也支持< template>語(yǔ)法；v-show不支持這些；
v-show是通過簡(jiǎn)單地切換元素的CSS屬性display屬性來(lái)實(shí)現(xiàn)顯示隱藏效果；
v-if 是“真正的”條件渲染，因?yàn)樗鼤?huì)確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)乇讳N毀和重建；
v-if 也是惰性的：如果在初始渲染時(shí)條件為假，則什么也不做——直到條件第一次變?yōu)檎鏁r(shí)，才會(huì)開始渲染條件塊；
相比之下， v-show 就簡(jiǎn)單得多——不管初始條件是什么，元素總是會(huì)被渲染，并且只是簡(jiǎn)單地基于 CSS 進(jìn)行切換；
也可以使用key標(biāo)簽屬性來(lái)實(shí)現(xiàn)元素的切換顯示；
3. 支持< template>的指令
v-if、v-else、v-else-if、v-for，等結(jié)構(gòu)性指令；
4. 模板語(yǔ)法
- 雙大括號(hào)
{{表達(dá)式}}語(yǔ)法會(huì)將表達(dá)式的值作為純文本，而非 HTML；若要輸出真正的 HTML ，需要使用 v-html 指令； - 雙大括號(hào)
{{表達(dá)式}}語(yǔ)法不能作用在 標(biāo)簽屬性上；若要作用在標(biāo)簽屬性上，應(yīng)該使用 v-bind 指令； - 插值模板表達(dá)式只能是單個(gè)表達(dá)式；
- 插值表達(dá)式是被放在沙盒中執(zhí)行的，只能訪問全局變量的一個(gè)白名單，如 Math 和 Date 。不應(yīng)該在模板表達(dá)式中試圖訪問用戶定義的全局變量；
5. 組件
- Vue.component的主要功能是注冊(cè)組件，不是創(chuàng)建組件；
- 所有的 Vue.js 組件其實(shí)都是被擴(kuò)展的 Vue 實(shí)例；
- 使用Vue.component注冊(cè)組件時(shí)，創(chuàng)建Vue實(shí)例的代碼必須在注冊(cè)組件的代碼的后面，否則注冊(cè)的組件不會(huì)被顯示；
- Vue.component(id,[definition])的參數(shù)id是字符串類型，它用于定義組件的標(biāo)簽名，所以不能通過傳入id選擇器、類選擇器、屬性選擇器等等來(lái)定義組件；
6. Vue特性
當(dāng) v-if 與 v-for 一起使用時(shí)，v-for 具有比 v-if 更高的優(yōu)先級(jí)。
事件可以以鏈?zhǔn)降姆绞教砑佣鄠€(gè)事件修飾符，修飾符會(huì)按照修飾的順序起作用；
在vue中，雙大括號(hào){{}}語(yǔ)法不能用在標(biāo)簽屬性中；
在textarea標(biāo)簽中使用雙大括號(hào)
{{}}語(yǔ)法并不會(huì)生效，應(yīng)用v-model來(lái)實(shí)事插值；在Vue中，對(duì)于所有的數(shù)據(jù)綁定，都支持JavaScripot表達(dá)式，這些表達(dá)式會(huì)在所屬 Vue 實(shí)例的數(shù)據(jù)作用域下作為 JavaScript 被解析。有個(gè)限制就是，每個(gè)綁定都只能包含單個(gè)表達(dá)式；
當(dāng)使用DOM 作為模版時(shí) (例如，將 el 選項(xiàng)掛載到一個(gè)已存在的元素上), 會(huì)受到 HTML 的一些限制，因?yàn)?Vue 只有在瀏覽器解析和標(biāo)準(zhǔn)化 HTML 后才能獲取模版內(nèi)容，所以，如果DOM模版中包含了一些非法的標(biāo)簽，則將會(huì)被瀏覽器移除掉；
如果需要在某個(gè)組件的根元素上監(jiān)聽一個(gè)原生事件，可以使用 .native 修飾 v-on綁定的事件；
只能在字符串模板中使用自動(dòng)閉合的組件名標(biāo)簽，因?yàn)閷?duì)瀏覽器來(lái)說(shuō)，自動(dòng)閉合的自定義元素是無(wú)效的HTML標(biāo)簽；
Vue 不允許在已經(jīng)創(chuàng)建的實(shí)例上動(dòng)態(tài)添加新的根級(jí)響應(yīng)式屬性(root-level reactive property)；
當(dāng)你設(shè)置 vm.someData = 'new value' ，該組件不會(huì)立即重新渲染。當(dāng)刷新隊(duì)列時(shí)，組件會(huì)在事件循環(huán)隊(duì)列清空時(shí)的下一個(gè)“tick”更新；
如果同時(shí)設(shè)置了transitionend 和animationend ，則需要使用transition標(biāo)簽的 type 標(biāo)簽屬性并設(shè)置 animation 或 transition 來(lái)明確聲明你需要 Vue 監(jiān)聽的類型；
使用 FLIP 過渡的元素不能設(shè)置為 display: inline 。作為替代方案，可以設(shè)置為 display: inline-block 或者放置于 flex 中；
當(dāng) v-bind:style 使用需要特定前綴的 CSS 屬性時(shí)，如 transform，Vue.js 會(huì)自動(dòng)偵測(cè)并添加相應(yīng)的前綴；
7. 當(dāng)創(chuàng)建組件時(shí)，data選項(xiàng)應(yīng)是是函數(shù)類型的原因
選項(xiàng)data可以是Object類型，也可以是Function類型，當(dāng)data是Function類型時(shí)，data函數(shù)必須返回一個(gè)Object實(shí)例作為真正的data選項(xiàng)的值；
但在定義組件時(shí)，選項(xiàng)data最好應(yīng)該是函數(shù)類型，因?yàn)?，如果data是對(duì)象類型，則當(dāng)此組件需要被用來(lái)創(chuàng)建多個(gè)實(shí)例時(shí)，則所有的實(shí)例將都引用同一個(gè)data實(shí)例；然而，如果將data定義為函數(shù)類型，并在函數(shù)里面返回新創(chuàng)建的對(duì)象，則每當(dāng)此組件創(chuàng)建實(shí)例時(shí)，就會(huì)引用 data函數(shù)返回的全新的對(duì)象，從而不會(huì)使此組件的實(shí)例共享同一個(gè)data對(duì)象；
8. 指令
指令（Directives）是帶有 v- 前綴的特殊標(biāo)簽屬性。指令屬性的值預(yù)期是單一 JavaScript 表達(dá)式（除了 v-for）。指令的職責(zé)就是當(dāng)其表達(dá)式的值改變時(shí)相應(yīng)地將某些行為應(yīng)用到 DOM 上。
- 參數(shù)：一些指令能接受一個(gè)“參數(shù)”，在指令后以冒號(hào)指明；
- 修飾符：修飾符（Modifiers）是以半角句號(hào)
.指明的特殊后綴，用于指出一個(gè)指令應(yīng)該以特殊方式綁定； -
v-bind:可以簡(jiǎn)寫為: -
v-on:可以簡(jiǎn)寫為@ -
:與@對(duì)于標(biāo)簽的特性名來(lái)說(shuō)都是合法字符，在所有支持 Vue.js 的瀏覽器都能被正確地解析。而且，它們不會(huì)出現(xiàn)在最終渲染的標(biāo)記中?？s寫語(yǔ)法是完全可選的；
9. 過濾器
Vue允許你自定義過濾器，可被用作一些常見的文本格式化。過濾器可以用在兩個(gè)地方：{{}} 插值和 v-bind 表達(dá)式。過濾器應(yīng)該被添加在 JavaScript 表達(dá)式的尾部，由管道符|指示開始位置；
10. 選項(xiàng):template
- 類型：string
- 說(shuō)明：
一個(gè)字符串模板作為 Vue 實(shí)例的標(biāo)識(shí)使用。模板將會(huì) 替換 掛載的元素。掛載元素的內(nèi)容都將被忽略，除非模板的內(nèi)容有分發(fā) slot。
如果值以 # 開始，則它會(huì)被當(dāng)作ID選擇器，將使用匹配元素的 innerHTML 作為模板。
如果選項(xiàng)中不包含template，則Vue實(shí)例將使用被掛載的元素的outerHTML作為template；
如果選項(xiàng)中包含 render 函數(shù)，template 選項(xiàng)將被忽略。
11. 選項(xiàng)：data
- 類型：Object | Function
- 限制：組件的定義只接受 function。
- 說(shuō)明：
Vue 實(shí)例的數(shù)據(jù)對(duì)象。Vue 將會(huì)遞歸將 data 的屬性轉(zhuǎn)換為 getter/setter，從而讓 data 的屬性能夠響應(yīng)數(shù)據(jù)變化。對(duì)象必須是純粹的對(duì)象 (含有零個(gè)或多個(gè)的 key/value 對(duì))：瀏覽器 API 創(chuàng)建的原生對(duì)象，原型上的屬性會(huì)被忽略。大概來(lái)說(shuō)，data 應(yīng)該只能是數(shù)據(jù) - 不推薦觀察擁有狀態(tài)行為的對(duì)象。
一旦觀察過，不需要再次在數(shù)據(jù)對(duì)象上添加響應(yīng)式屬性。因此推薦在創(chuàng)建實(shí)例之前，就聲明所有的根級(jí)響應(yīng)式屬性。
實(shí)例創(chuàng)建之后，可以通過 vm.$data 訪問原始數(shù)據(jù)對(duì)象。Vue 實(shí)例也代理了 data 對(duì)象上所有的屬性，因此訪問 vm.a 等價(jià)于訪問 vm.$data.a。
以 _ 或 $ 開頭的屬性 不會(huì) 被 Vue 實(shí)例代理，因?yàn)樗鼈兛赡芎?Vue 內(nèi)置的屬性、API 方法沖突。你可以使用例如 vm.$data._property 的方式訪問這些屬性。
12. 選項(xiàng)：computed
- 類型：{ [key: string]: Function | { get: Function, set: Function } }
- 說(shuō)明：
計(jì)算屬性將被混入到 Vue 實(shí)例中。所有 getter 和 setter 的 this 上下文自動(dòng)地綁定為 Vue 實(shí)例。
計(jì)算屬性的結(jié)果會(huì)被緩存，除非依賴的響應(yīng)式屬性變化才會(huì)重新計(jì)算。注意，如果實(shí)例范疇之外的依賴 (比如非響應(yīng)式的 not reactive) 是不會(huì)觸發(fā)計(jì)算屬性更新的。
注意: 不應(yīng)該使用箭頭函數(shù)來(lái)定義計(jì)算屬性函數(shù) (例如 aDouble: () => this.a * 2)。理由是箭頭函數(shù)綁定了父級(jí)作用域的上下文，所以 this 將不會(huì)按照期望指向 Vue 實(shí)例，this.a 將是 undefined。
13. 選項(xiàng)：watch
- 類型: { [key: string]: string | Function | Object }
- 說(shuō)明:
一個(gè)對(duì)象，鍵是需要觀察的表達(dá)式，值是對(duì)應(yīng)回調(diào)函數(shù)。值也可以是方法名，或者包含選項(xiàng)的對(duì)象。Vue 實(shí)例將會(huì)在實(shí)例化時(shí)調(diào)用 $watch()，遍歷 watch 對(duì)象的每一個(gè)屬性。
14. 標(biāo)簽屬性key的理解
Vue 為了盡可能高效地渲染元素，通常會(huì)復(fù)用已有元素而不是重新創(chuàng)建元素；為了不讓vue復(fù)用已有的元素，可以給元素加個(gè)標(biāo)簽屬性key，并給該標(biāo)簽屬性賦一個(gè)字符串類型的值；我認(rèn)為這個(gè)標(biāo)簽屬性key可以理解為IOS中的重用標(biāo)識(shí)符；
15. 數(shù)組
由于 JavaScript 的限制， Vue 不能檢測(cè)以下變動(dòng)的數(shù)組：
- 當(dāng)你利用索引直接設(shè)置一個(gè)項(xiàng)時(shí)，例如：
vm.items[indexOfItem] = newValue - 當(dāng)你修改數(shù)組的長(zhǎng)度時(shí)，例如：
vm.items.length = newLength
為了解決第一類問題，以下兩種方式都可以實(shí)現(xiàn)和 vm.items[indexOfItem] = newValue 相同的效果， 同時(shí)也將觸發(fā)狀態(tài)更新：
方法1:
// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
方法2:
// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)
為了解決第二類問題，可以使用splice：
example1.items.splice(newLength)
16. 對(duì)象更改檢測(cè)注意事項(xiàng)
- 由于 JavaScript 的限制，Vue 不能檢測(cè)對(duì)象屬性的添加或刪除；
- 對(duì)于已經(jīng)創(chuàng)建的實(shí)例，Vue 不能動(dòng)態(tài)添加根級(jí)別的響應(yīng)式屬性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套對(duì)象添加響應(yīng)式屬性；
17. 事件
所有的 Vue.js 事件處理方法和表達(dá)式都嚴(yán)格綁定在當(dāng)前視圖的ViewModel上;當(dāng)一個(gè) ViewModel 被銷毀時(shí)，所有的事件處理器都會(huì)自動(dòng)被刪除;
可以通過Vue.config.keyCodes對(duì)象自定義鍵值修飾符別名，格式如下：
// 可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112
或者：
Vue.config.keyCodes = {
v: 86,
f1: 112,
// camelCase 不可用
mediaPlayPause: 179,
// 取而代之的是 kebab-case 且用雙引號(hào)括起來(lái)
"media-play-pause": 179,
up: [38, 87]
}
18. 雙向綁定v-model指令
- v-model 會(huì)忽略所有表單元素的 value、checked、selected 特性的初始值。因?yàn)樗鼤?huì)選擇 Vue 實(shí)例數(shù)據(jù)來(lái)作為具體的值。所以應(yīng)該通過 JavaScript 在組件的 data 選項(xiàng)中聲明初始值。
- 當(dāng)在select元素中使用v-model時(shí)，如果 v-model 表達(dá)初始的值不匹配任何的選項(xiàng)，select 元素就會(huì)以”未選中”的狀態(tài)渲染。
19. props
- 在使用組件時(shí)，若需要通過標(biāo)簽屬性給子組件傳數(shù)據(jù)，則需要先顯式地在 props 選項(xiàng)聲明；
- prop 是單向綁定的：當(dāng)父組件的屬性變化時(shí)，將傳導(dǎo)給子組件，但是不會(huì)反過來(lái)。
- 在JavaScript 中對(duì)象是引用類型，如果 prop 是一個(gè)對(duì)象，在子組件內(nèi)部改變它的屬性值會(huì)影響父組件的狀態(tài)；
- props 會(huì)在組件實(shí)例創(chuàng)建之前進(jìn)行校驗(yàn)，所以在 default 或 validator 函數(shù)里，諸如 data、computed 或 methods 等實(shí)例屬性還無(wú)法使用。
20. Vue中實(shí)現(xiàn)雙向綁定的指令
Vue中實(shí)現(xiàn)雙向綁定的所有方式都是一個(gè)語(yǔ)法糖，本質(zhì)都是通過v-bind指令 和 v-on指令實(shí)現(xiàn)的；
它們的具體實(shí)現(xiàn)方式如下：
-
修飾符
.sync
示例：< comp v-bind:foo.sync="bar"></comp>等效語(yǔ)法：
< comp :foo="bar" @update:foo="val => bar = val"></comp>當(dāng)子組件需要更新 foo 的值時(shí)，它需要顯式地觸發(fā)一個(gè)更新事件：
this.$emit('update:foo', newValue) -
指令
v-model- 當(dāng)
v-model用于原生input元素時(shí)，有如下等效：
示例：
< input v-model="something">等效語(yǔ)法：
< input v-bind:value="something" v-on:input="something = $event.target.value">- 當(dāng)
v-model用于自定義組件時(shí)，有如下等效：
示例：
< my-component v-model="something">等效語(yǔ)法：
< my-component v-bind:value="something" v-on:input="something = arguments[0]">< /my-component>所以，如果要在組件上使用v-model，則組件應(yīng)該具備以下條件：
- 有一個(gè)名字是value的prop；
- 當(dāng)需要向父組件更新新值時(shí)，需要通過觸發(fā)名字為input的事件傳值;
- 更改組件中
v-model默認(rèn)綁定的prop和事件
默認(rèn)情況下，一個(gè)組件的 v-model 會(huì)使用 value 屬性和 input 事件，不過，可以通過選項(xiàng)model更改v-model默認(rèn)綁定的prop和事件；
示例如下：
Vue.my-component('my-component', { props: { checked: Boolean }, model: { prop: 'checked', event: 'change' } })然后，可以如下使用v-model:
< my-component v-model="foo" value="some value">< /my-component>等效語(yǔ)法：
< my-component :checked="foo" @change="val => { foo = val }">< /my-component> - 當(dāng)
21. 內(nèi)容分發(fā)
- 如果組件模板中沒有包含slot插口，則在使用組件時(shí)，組件標(biāo)簽內(nèi)的內(nèi)容將被丟棄；
- 如果組件模板只有一個(gè)沒有屬性的slot，則在使用組件時(shí)，組件標(biāo)簽內(nèi)的內(nèi)容都將插入slot所在的DOM位置，并替換掉slot標(biāo)簽本身；
- 組件模版中slot標(biāo)簽中的任何內(nèi)容都被視為備用內(nèi)容；備用內(nèi)容在子組件的作用域內(nèi)編譯；并有只有沒有要插入的內(nèi)容時(shí)，才會(huì)顯示備用內(nèi)容；
- 可以通過配置slot的name標(biāo)簽屬性來(lái)分發(fā)內(nèi)容；仍然可以有一個(gè)匿名 slot，它是默認(rèn) slot，作為找不到匹配的內(nèi)容片段的備用插槽。如果沒有默認(rèn)的 slot，這些找不到匹配的內(nèi)容片段將被拋棄;
22. 作用域插槽
作用域插槽是一種特殊類型的插槽，用作使用一個(gè) (能夠傳遞數(shù)據(jù)到) 可重用模板替換已渲染元素；
使用方式如下：
在組件模板中給slot標(biāo)簽設(shè)置的標(biāo)簽屬性，可以在使用組件時(shí)，通過該組件標(biāo)簽內(nèi)部的template元素的scope標(biāo)簽屬性訪問；
具體示例如下：
子組件的模板：
< div class="child">
< slot text="hello from child">< /slot>
< /div>
使用子組件：
< div class="parent">
< child>
< template scope="props">
< span>hello from parent< /span>
< span>{{ props.text }}< /span>
< /template>
< /child>
< /div>
標(biāo)簽屬性scope是被用來(lái)定義臨時(shí)變量的，被定義的臨時(shí)變量就是scope的值，也就是說(shuō)：此例中的props是被定義臨時(shí)變量；這個(gè)臨時(shí)變量保存的是從子組件中傳遞出來(lái)的props對(duì)象；
如果我們渲染以上結(jié)果，得到的輸出會(huì)是：
< div class="parent">
< div class="child">
< span>hello from parent< /span>
< span>hello from child< /span>
< /div>
< /div>
注意:
- slot-scope 的值實(shí)際上是一個(gè)可以出現(xiàn)在函數(shù)簽名參數(shù)位置的合法的 JavaScript 表達(dá)式；也就是說(shuō)，slot-scope 的值在解析后會(huì)成為函數(shù)的參數(shù)，所以，一切合法的 函數(shù)參數(shù) 表達(dá)式 都可作為 slot-scope 的值。這也意味著在受支持的環(huán)境 (單文件組件或現(xiàn)代瀏覽器) 中，您還可以在表達(dá)式中使用 ES2015 解構(gòu)：
slot-scope="{ text }"； - 在 版本2.5.0+的Vue中，slot-scope 能被用在任意元素或組件中而不再局限于
<template>；
23. 動(dòng)態(tài)定義組件的模板的方式
- 內(nèi)容分發(fā):用slot標(biāo)簽；
- 作用域插槽:用template和slot標(biāo)簽；
- 動(dòng)態(tài)組件：用預(yù)定義的component標(biāo)簽；
- 內(nèi)聯(lián)模版：用標(biāo)簽屬性inline-template；
- 路由；
24. 路由
- 同一個(gè)路徑可以匹配多個(gè)路由，此時(shí)，匹配的優(yōu)先級(jí)就按照路由的定義順序：誰(shuí)先定義的，誰(shuí)的優(yōu)先級(jí)就最高；
25. 子組件實(shí)例的引用
通過如下方式，可以在JavaScript中獲取子組件實(shí)例的引用：
-
在子組件上設(shè)置 ref 標(biāo)簽屬性；
<child-component ref="引用名字" > -
通過當(dāng)前組件實(shí)例的 $refs 屬性
當(dāng)前組件實(shí)例.$refs.引用名字獲取子組件實(shí)例的引用，如：this.$refs.引用名字
注意：
- 當(dāng) ref 和 v-for 一起使用時(shí)，獲取到的引用會(huì)是一個(gè)數(shù)組，包含和循環(huán)數(shù)據(jù)源對(duì)應(yīng)的子組件；
- $refs 只在組件渲染完成后才填充，并且它是非響應(yīng)式的。它僅僅是一個(gè)直接操作子組件的應(yīng)急方案——應(yīng)當(dāng)避免在模板或計(jì)算屬性中使用 $refs ；
26. 內(nèi)聯(lián)模板
如果子組件有 inline-template 特性，組件將把它的內(nèi)容當(dāng)作它的模板，而不是把它當(dāng)作分發(fā)內(nèi)容。這讓模板編寫起來(lái)更靈活。
<my-component inline-template>
<div>
<p>這些將作為組件自身的模板。</p>
<p>而非父組件透?jìng)鬟M(jìn)來(lái)的內(nèi)容。</p>
</div>
</my-component>
但是 inline-template 讓模板的作用域難以理解。使用 template 選項(xiàng)在組件內(nèi)定義模板或者在 .vue 文件中使用 template 元素才是最佳實(shí)踐。
27. X-Template
另一種定義模板的方式是在 JavaScript 標(biāo)簽里使用 text/x-template 類型，并且指定一個(gè) id。例如：
<script type="text/x-template" id="hello-world-template">
<p>Hello hello hello</p>
</script>
Vue.component('hello-world', {
template: '#hello-world-template'
})
這在有很多大模板的演示應(yīng)用或者特別小的應(yīng)用中可能有用，其它場(chǎng)合應(yīng)該避免使用，因?yàn)檫@將模板和組件的其它定義分離了。
