函數化組件
Vue供應了一個functional的布爾值選項，設置為true能夠使組件無狀況和無實例，也就是沒有data和this上下文。如許用render函數返回假造節點能夠更輕易襯着，由於函數化組件只是一個函數，襯着開支要小許多。
運用函數化組件時，Render函數供應了第二個參數context來供應暫時上下文。組件須要的data、prop、slots、children、parent都是經由過程這個上下文來通報。比方this.level要改寫為context.props.level，this.$slots.default改變成context.children。
用函數化組件展現一個依據數據智能挑選差別組件的場景：
<p data-height=”365″ data-theme-id=”0″ data-slug-hash=”mKRKGm” data-default-tab=”html,result” data-user=”whjin” data-embed-version=”2″ data-pen-title=”Vue-函數化組件-依據數據挑選組件” class=”codepen”>See the Pen Vue-函數化組件-依據數據挑選組件 by whjin (@whjin) on CodePen.</p>
<script async src=”https://static.codepen.io/ass…;></script>
函數化組件重要適用於以下兩個場景：
- 程序化地在多個組件中挑選一個。
- 在將
children、props、data通報給子組件之前操縱它們。
JSX
為了讓Render函數更好地謄寫和瀏覽，Vue供應了插件babel-plugin-transform-vue-jsx來支撐JSX語法。
運用createElement時，經常使用設置：
<p data-height=”365″ data-theme-id=”0″ data-slug-hash=”Vdpwpz” data-default-tab=”js” data-user=”whjin” data-embed-version=”2″ data-pen-title=”Vue-createElement” class=”codepen”>See the Pen Vue-createElement by whjin (@whjin) on CodePen.</p>
<script async src=”https://static.codepen.io/ass…;></script>
JSX寫法：
<p data-height=”300″ data-theme-id=”0″ data-slug-hash=”eKvYvm” data-default-tab=”js” data-user=”whjin” data-embed-version=”2″ data-pen-title=”Vue-JSX” class=”codepen”>See the Pen Vue-JSX by whjin (@whjin) on CodePen.</p>
<script async src=”https://static.codepen.io/ass…;></script>
實戰：運用Render函數開闢可排序的表格組件
表格組件的一切的內容（表頭和行數據）由兩個prop構成：columns和data。二者都是數組，columns用來形貌每列的信息，並襯着在表頭<head>內，能夠指定某一列是不是須要排序；data時每一行的數據，由columns決議每一行里各列的遞次。
為了讓排序后的columns和data不影響原始數據，給v-table組件的data選項增添兩個對應的數據，組件一切的操縱將在這兩個數據上完成，不對原始數據做任何處置懲罰。
columns的每一項是一個對象，个中title和key字段是必填的，用來標識這列的表頭題目，key的對應data中列內容的字段名。sortable是選填字段，假如值為true，申明該列須要排序。
v-talbe組件的prop:columns和data的數據已從父級通報過來，v-table不直接運用它們，而是運用data選項的currentColumns和currentData。所以在v-table初始化時，須要把columns和data賦值給currentColumns和currentData。在v-table的methods選項里定義兩個要領用來複制，並在mounted鈎子內挪用。
map()是JavaScript數組的一個要領，依據傳入的函數從新組織一個新數組。
排序分升序(asc)和降序(desc)兩種，而且同時只能對一列數據舉行排序，與其他列互斥，為了標識當前線的排序狀況，在map列增添數據時，默許給每列都增添一個_sortType的字段，而且賦值為normal，示意默許排序（也就是不排序）。
在排序后，currentData每項的遞次能夠都邑發生變化，所以給currentColumns和currentData的每一個數據都增添_index字段，代表當前數據在原始數據中的索引。
render(h) {
var ths = [],
trs = [];
return h('table', [
h('thead', [
h('tr', ths)
]),
h('tbody', trs)
])
}
這裏的h就是createElement，只是換了個稱號。
表格主題trs是一個二維數組，數據由currentColumns和currentData構成。
先遍歷一切的行，然後再每一行內再遍歷各列，終究組合出主題內容節點trs。
假如col.sortable沒有定義，或值為false，就直接把col.title襯着出來，不然除了襯着title，還加了兩個<a>元夙來完成升序和降序的操縱。
排序運用了JavaScript數組的sort()要領，這裏之所以返回1或-1，而不直接返回a[key]<b[key]，也就是true或false，是由於在部份瀏覽器對sort()的處置懲罰差別，而1和-1能夠做到兼容。
排序前，先將一切列的排序狀況都重置為normal，然後設置當前線的排序狀況（asc或desc），對用到render的<a>元素的class稱號on，背面經由過程CSS來高亮顯現當前線的排序狀況。
當襯着完表格后，父級修改了data數據，比方增添或刪除，v-table的currentData也應當更新，假如某列已存在排序狀況，更新后應當直接處置懲罰一次排序。
經由過程遍歷currentColumns來找出是不是按某一列舉行過排序，假如有，就根據當前排序狀況對更新后的數據做一次排序操縱。
<p data-height=”365″ data-theme-id=”0″ data-slug-hash=”XYMmJr” data-default-tab=”html,result” data-user=”whjin” data-embed-version=”2″ data-pen-title=”Vue-可排序表格組件” class=”codepen”>See the Pen Vue-可排序表格組件 by whjin (@whjin) on CodePen.</p>
<script async src=”https://static.codepen.io/ass…;></script>
實戰：留言列表
宣布一條留言，須要的數據有昵稱和留言內容，宣布操縱應當在根實例app內完成。留言列表的數據也是從app獵取。
數組list存儲了一切的留言內容，經由過程函數handleSend給list增添一項留言數據，增添成后把texrarea文本框置空。
Render函數內的節點運用v-model：動態綁定value，而且監聽input事宜，把輸入的內容經由過程$emit('input')派發給父組件。
列表數據list為空時，襯着一個“列表為空”的信息提醒節點；不為空時，每一個list-item贏包括昵稱、留言內容和復興按鈕3個子節點。
this.list.forEach相當於template里的v-for指令，遍歷出每條留言。句柄handleReply直接向父組件派發一個事宜reply，父組件(app)吸收后，將當前list-item的昵稱提取，並設置到v-textarea內。
<p data-height=”365″ data-theme-id=”0″ data-slug-hash=”ZRKGrR” data-default-tab=”html,result” data-user=”whjin” data-embed-version=”2″ data-pen-title=”Vue-留言列表” class=”codepen”>See the Pen Vue-留言列表 by whjin (@whjin) on CodePen.</p>
<script async src=”https://static.codepen.io/ass…;></script>
