render 函數(shù)的作用
簡(jiǎn)單的說，在vue中使用模板HTML語(yǔ)法組建頁(yè)面，使用render函數(shù)可以用js語(yǔ)言來構(gòu)建DOM
因?yàn)関ue是虛擬DOM，所以在拿到template模板時(shí)也要轉(zhuǎn)譯成VNode的函數(shù)，而用render函數(shù)構(gòu)建DOM，vue就免去了轉(zhuǎn)譯的過程。
當(dāng)使用render函數(shù)描述虛擬DOM時(shí)，vue提供一個(gè)函數(shù)，這個(gè)函數(shù)是就構(gòu)建虛擬DOM所需要的工具。官網(wǎng)上給他起了個(gè)名字叫createElement。還有約定的簡(jiǎn)寫叫h,
栗子：根據(jù) data 中 level 的值，用不同標(biāo)題標(biāo)簽顯示文本：
<div id="app">
<child-component :level="level">
哆啦A夢(mèng)
</child-component>
</div>
Vue.component('child-component', {
props: ['level'],
template: `<div>
<h1 v-if="level === 1"><slot></slot></h1>
<h2 v-if="level === 2"><slot></slot></h2>
<h3 v-if="level === 3"><slot></slot></h3>
</div>`
})
var app = new Vue({
el: '#app',
data: {
level: 1
}
})
將 level 的值改成 1，會(huì)渲染 template 中的 h1 標(biāo)簽。
實(shí)際開發(fā)中可能會(huì)把 template 寫得巨長(zhǎng);使用 render 函數(shù)來實(shí)現(xiàn)上面的 demo：
<div id="app">
<child :level="level">
哆啦A夢(mèng)
</child>
</div>
<script>
// 使用render函數(shù)進(jìn)行定義組件
Vue.component('child', {
render: function (createElement) {
return createElement('h' + this.level,
this.$slots.default);
},
props: ['level']
})
var app = new Vue({
el: '#app',
data: {
level: 1
}
})
</script>
渲染效果與上面使用 template 一致。
使用 render函數(shù) 比 template 要簡(jiǎn)潔很多。
render函數(shù)用法
- render函數(shù)可以接收 createElement 作為參數(shù)，并且必須是 createElement；
- createElement 也是一個(gè)函數(shù)；
- createElement 可以傳三個(gè)參數(shù)（上面只傳了兩個(gè)）；
第一個(gè)參數(shù)必需，可以是 String / Object / Function 類型；
第二個(gè)參數(shù)可選，只能是 Object 類型；
第三個(gè)參數(shù)可選，可以是 String / Array 類型。
createElement 的第一個(gè)參數(shù)
- 第一個(gè)參數(shù)必選
- 可以是string - html標(biāo)簽
- 可以是object -- 一個(gè)含有數(shù)據(jù)選項(xiàng)的對(duì)象
- 可以是function ---方法返回含有數(shù)據(jù)選項(xiàng)的對(duì)象
<body>
<div id="app">
<child></child>
</div>
<script>
Vue.component('child', {
render: function (createElement) {
// 1. 傳 String
return createElement('h1') // 創(chuàng)建一個(gè) HTML 標(biāo)簽
// 2. 傳 Object
return createElement({ // 創(chuàng)建一個(gè)含有數(shù)據(jù)選項(xiàng)的對(duì)象
template: '<h1>你好</h1>'
})
// 3. 傳 Function（函數(shù)最終要 return 對(duì)象，所以本質(zhì)上還是傳的對(duì)象）
return createElement(function () {
return {
template: '<h1>你好</h1>'
}
}()) // 函數(shù)要調(diào)用一下，否則不起效果
}
})
var app = new Vue({
el: '#app',
data: {
}
})
</script>
createElement 的第二個(gè)參數(shù)
- 第二個(gè)參數(shù)可選,只能是 Object 類型，Object 中可以設(shè)置元素的一些屬性。
<div id="app">
<child></child>
</div>
<script>
Vue.component('child', {
//第二個(gè)參數(shù)可選,第二個(gè)參數(shù)是數(shù)據(jù)對(duì)象
render: function (createElement) {
return createElement({
template: '<div>花間提壺方大廚</div>'
}, {
class: {
foo: true,
baz: false
},
style: {
color: 'red',
fontSize: '16px'
},
//正常的 html 特性
attrs: {
id: "foo",
src: 'http://www.baidu.com'
}
})
}
})
var app = new Vue({
el: '#app',
})
</script>
createElement 的第三個(gè)參數(shù)
- 第三個(gè)參數(shù)可選, 可以是 String | Array ---代表子節(jié)點(diǎn)
<div id="app">
<child></child>
</div>
<script>
Vue.component('child', {
//第三個(gè)參數(shù)可選, 可以是 String | Array ---代表子節(jié)點(diǎn)
render: function (createElement) {
return createElement('div', [
createElement('h2', '我是h2標(biāo)題'),
createElement('h5', '我是h5標(biāo)題')
])
}
})
var app = new Vue({
el: '#app',
})
</script>
