感覺(jué)render是為補(bǔ)救template缺點(diǎn)而誕生的
- template是有標(biāo)簽航徙，根據(jù)標(biāo)簽插值內(nèi)容
- render厲害一點(diǎn)，可以渲染標(biāo)簽陷虎，并添加到虛擬DOM中
注意下：
1捉偏，template是模板語(yǔ)法，而render是js語(yǔ)法泻红，render其實(shí)是用來(lái)生成模板；
2霞掺，render用多了谊路，發(fā)現(xiàn)挺麻煩，有一個(gè)插件jsx可以讓render代碼寫(xiě)得更自在
虛擬DOM
Vue通過(guò)建立一個(gè)虛擬DOM對(duì)真實(shí)DOM發(fā)生的變化保持追蹤菩彬。
return createElement('h1', 'Hello World!')
createElement 到底會(huì)返回什么呢缠劝？其實(shí)不是一個(gè)實(shí)際的 DOM 元素。它更準(zhǔn)確的名字是createNodeDescription骗灶，因?yàn)樗男畔?huì)告訴 Vue 頁(yè)面上需要渲染什么樣的節(jié)點(diǎn)惨恭，及其子節(jié)點(diǎn)。我們把這樣的節(jié)點(diǎn)描述為“虛擬節(jié)點(diǎn) (Virtual Node)”耙旦，也常簡(jiǎn)寫(xiě)它為“VNode”脱羡。“虛擬 DOM”是我們對(duì)由 Vue 組件樹(shù)建立起來(lái)的整個(gè) VNode 樹(shù)的稱呼免都。
render方法會(huì)傳入一個(gè)createElement函數(shù)锉罐，它是一個(gè)用于創(chuàng)建DOM元素或者用于實(shí)例化其他組件的構(gòu)造方法椭岩。render方法必須返回一個(gè)createElement函數(shù)的調(diào)用結(jié)果晒喷，也就是模版內(nèi)的頂層元素（這個(gè)方法在vue2的習(xí)慣性使用中經(jīng)常用h來(lái)命名）。
render 實(shí)例：
export default {
render: function(createElement) {
const menu_items = ["首頁(yè)","搜索","分類(lèi)","系統(tǒng)"]
return createElement('ul',
menu_items.map(item => {
return createElement('li', {
class: {
'uk-nav': true
},
domProps: {
innerHTML: item
}
})
})
)
},
}
相當(dāng)于模板語(yǔ)法：
<ul>
<li v-for="item in menu_items" :class="{'uk-nav': true}">
{{ item }}
</li>
</ul>
渲染結(jié)果：
createElement的定義
createElement(tag,data,children)
返回值vNode（虛擬節(jié)點(diǎn)）
參數(shù)說(shuō)明:
tag 類(lèi)型：String/Object/Function 說(shuō)明：一個(gè)HTML標(biāo)簽饿幅，組件類(lèi)型,或一個(gè)函數(shù)
Data 類(lèi)型：Object 說(shuō)明：一個(gè)對(duì)應(yīng)屬性的數(shù)據(jù)對(duì)象,用于向創(chuàng)建的節(jié)點(diǎn)對(duì)象設(shè)置屬性值
Children 類(lèi)型：String/Array 說(shuō)明：子節(jié)點(diǎn)
向構(gòu)造的VNode對(duì)象設(shè)置文本時(shí)可以直接傳入字符串险领，例如：
createElement('div','這是行內(nèi)文本')
輸出結(jié)果就是：
<div>這是行內(nèi)文本</div>
參考：https://www.cnblogs.com/qdcnbj/p/8313061.html
以下是我的代碼侨舆，如果有問(wèn)題，請(qǐng)指出一二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Render</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="container">
<tb-heading></tb-heading>
</div>
<script>
Vue.component('tb-heading', {
render: function(createElement) {
const menu_items = ["首頁(yè)","搜索","分類(lèi)","系統(tǒng)"]
return createElement('ul',
menu_items.map(item => {
return createElement('li', {
class: {
'uk-nav': true
},
domProps: {
innerHTML: item
}
})
})
)
},
});
new Vue({
el: '#container',
methods: {
}
});
</script>
</body>
</html>
