render 函數(shù)的基本用法
什么是render函數(shù)
vue通過(guò) template 來(lái)創(chuàng)建你的 HTML斤蔓。但是，在特殊情況下，這種寫(xiě)死的模式無(wú)法滿(mǎn)足需求，必須需要js的編程能力潭千。此時(shí)，需要用render來(lái)創(chuàng)建HTML借尿。實(shí)際上用template來(lái)創(chuàng)建html 在 webpack 做編譯時(shí) template 會(huì)被編譯成 render 來(lái)運(yùn)行的刨晴。
語(yǔ)法
render(createElement){ return createElement() }
createElement() 有三個(gè)參數(shù):
第一個(gè)參數(shù)，必選垛玻，為 HTML 標(biāo)簽或組件或函數(shù)割捅；
第二個(gè)參數(shù)，可選帚桩，為數(shù)據(jù)對(duì)象，標(biāo)簽屬性等嘹黔；
第三個(gè)參數(shù)账嚎，可選，該標(biāo)簽內(nèi)容或子節(jié)點(diǎn)儡蔓；
看下面簡(jiǎn)單的例子：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.bg{
background:#abcdef;
}
</style>
</head>
<body>
<div id="dome">
<div>{{message}}</div>
</div>
<script>
new Vue({
el:"#dome",
data:{
message:"hello world"
},
methods:{
mouseOverLog(){
console.log(this.message)
}
},
render(createElement){
// createElement(html標(biāo)簽, 標(biāo)簽屬性, 子元素)郭蕉。
return createElement(
"span", //第1個(gè)參數(shù) - html 標(biāo)簽
{ //第2個(gè)參數(shù) - 在一個(gè)對(duì)象里設(shè)置該標(biāo)簽屬性
style: { marginLight: "8px", padding: "10px 20px", background: '#abcdef' },
on: {
click: () => {
console.log('click')
},
mouseover: () => {
console.log('mouseover');
this.mouseOverLog();
}
}
},
'我是內(nèi)容' //第3個(gè)參數(shù) - 該標(biāo)簽的子元素
)
}
});
</script>
</body>
</html>
當(dāng) createElement 的第三個(gè)元素為多個(gè)子元素時(shí)應(yīng)用數(shù)組來(lái)包裹。
new Vue({
el:"#dome",
data:{
message:"hello world"
},
render(createElement){
return createElement(
"ul",
{
class:{bg:true},
},
[
createElement("li", this.message),
createElement("li",'hello world 2'),
]
);
}
});
什么時(shí)候會(huì)用到render函數(shù)
情景1： https://juejin.im/post/5a715ec96fb9a01cad7c7958
情景2:
當(dāng)用 vue-cli 創(chuàng)建項(xiàng)目時(shí)喂江，在main.js文件能看到如下代碼
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
這里的 render: h => h(App) 是什么意思呢召锈？
轉(zhuǎn)換為es5語(yǔ)法后如下：
render: function(h) {
return h(App);
}
當(dāng)把h參數(shù)換成 createElement后
render: function(createElement) {
return createElement(App);
}
再來(lái)看一個(gè)例子
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="https://unpkg.com/vue"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app', // 提供一個(gè)在頁(yè)面上已經(jīng)存在的 DOM 元素作為 Vue 實(shí)例掛載目標(biāo)
render: function (createElement) {
return createElement('h2', 'Hello Render!');
}
});
</script>
</body>
</html>
是不是回到上面熟悉的場(chǎng)景了。
既創(chuàng)建一個(gè) 內(nèi)容為 ‘Hello Render’ 的 h2 標(biāo)簽获询，替換到id為app的容器上涨岁。
注意不管是 template 還是 render 都是掛載（替換）到 el 所指定的元素，而不是在放在該元素里面吉嚣。
參考文章：
https://juejin.im/post/5a715ec96fb9a01cad7c7958
希望這篇文章能幫助到你梢薪。
END
