VUE render函數(shù)使用和詳解
前言
在平時(shí)編程時(shí),大部分是通過(guò)template來(lái)創(chuàng)建html。但是在一些特殊的情況下,使用template方式時(shí),就無(wú)法很好的滿足需求,在這個(gè)時(shí)候就需要 通過(guò)JavaScript 的編程能力來(lái)進(jìn)行操作。此時(shí),就到了render函數(shù)展示拳腳去時(shí)候了。
render的作用
在官網(wǎng)的這里示例中,使用組件,將相同的內(nèi)容通過(guò)solt放進(jìn)h1-h6的標(biāo)簽中,在使用傳統(tǒng)方式時(shí),代碼不僅冗長(zhǎng),而且在每一個(gè)級(jí)別的標(biāo)題中重復(fù)書寫了?<slot></slot>
,在要插入錨點(diǎn)元素時(shí)還要再次重復(fù)。而使用render函數(shù)后,代碼就精簡(jiǎn)了很多。
Vue.component('anchored-heading', { render: function (createElement) { return createElement( 'h' + this.level, // 標(biāo)簽名稱 this.$slots.default // 子節(jié)點(diǎn)數(shù)組 ) }, props: { level: { type: Number, required: true } } })
render函數(shù)的作用是,當(dāng)場(chǎng)景中用 template 實(shí)現(xiàn)起來(lái)代碼冗長(zhǎng)繁瑣而且有大量重復(fù),這個(gè)時(shí)候使用就可以極大的簡(jiǎn)化代碼。
render函數(shù)講解
在使用render函數(shù)中,會(huì)使用到一個(gè)參數(shù)createElement,而這個(gè)createElement參數(shù),本質(zhì)上,也是一個(gè)函數(shù),是vue中構(gòu)建虛擬dom所使用的工具。下面就圍繞著這個(gè)createElement來(lái)看一下。
在createelement方法,有三個(gè)參數(shù):
return createEement(, {}, [])
1.第一個(gè)參數(shù)(必要參數(shù)):主要是用于提供dom中的html內(nèi)容,類型可以是字符串、對(duì)象或函數(shù)。
2.第二個(gè)參數(shù)(對(duì)象類型,可選):用于設(shè)置這個(gè)dom中的一些樣式、屬性、傳的組件的參數(shù)、綁定事件之類的。
3.第三個(gè)參數(shù)(類型是數(shù)組,數(shù)組元素類型是VNode,可選):主要用于設(shè)置分發(fā)的內(nèi)容,如新增的其他組件。
注意:組件樹中的所有vnode必須是唯一的
通過(guò)傳入createElement參數(shù),創(chuàng)建虛擬節(jié)點(diǎn),然后再將節(jié)點(diǎn)返回給render返回出去。
總的來(lái)說(shuō),render函數(shù)的本質(zhì)就是創(chuàng)建一個(gè)虛擬節(jié)點(diǎn)。
render和template的區(qū)別
相同之處:
render
函數(shù)?跟?template
?一樣都是創(chuàng)建 html 模板
不同之處:
Template
適合邏輯簡(jiǎn)單,render適合復(fù)雜邏輯。- 使用者
template
理解起來(lái)相對(duì)容易,但靈活性不足;自定義render函數(shù)靈活性高,但對(duì)使用者要求較高。 render
的性能較高,template性能較低。- 使用render函數(shù)渲染沒有編譯過(guò)程,相當(dāng)于使用者直接將代碼給程序。所以,使用它對(duì)使用者要求高,且易出現(xiàn)錯(cuò)誤
Render
函數(shù)的優(yōu)先級(jí)要比template的級(jí)別要高,但是要注意的是Mustache(雙花括號(hào))語(yǔ)法就不能再次使用
注意:template和render不能一起使用,否則無(wú)效
render舉例
如一次封裝一套通用按鈕組件,按鈕有四個(gè)樣式(success、error、warning、default)。
template方式是如下:
<div class="btn btn-success" v-if="type === 'success'">{{ text }}</div> <div class="btn btn-danger" v-else-if="type === 'danger'">{{ text }}</div> <div class="btn btn-warning" v-else-if="type === 'warning'">{{ text }}</div>
這樣寫在按鈕少的時(shí)候沒有問(wèn)題,但是一旦按鈕數(shù)量變多,這樣寫就會(huì)顯得特別冗長(zhǎng),在這個(gè)時(shí)候,就需要render函數(shù)。
根據(jù)情況生成按鈕DOM
在使用render函數(shù)前,需要先把template標(biāo)簽去掉,只保留邏輯層。
通過(guò)傳入的type動(dòng)態(tài)填入class,通過(guò)inderText將內(nèi)容添加入DOM中。
render(h) { return h('div', { class: { btn: true, 'btn-success': this.type === 'success', 'btn-danger': this.type === 'danger', 'btn-warning': this.type === 'warning' }, domProps: { innerText: this.text }, on: { click: this.handleClick } }); },
總結(jié)
本篇文章就到這里了,希望能夠給你帶來(lái)幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
vue的簡(jiǎn)介及@vue/cli?腳手架的使用示例
vue 是一個(gè) 漸進(jìn)式的javascript框架,腳手架是一個(gè)通用概念,幫助搭建項(xiàng)目的工具,本文以vue2為例結(jié)合實(shí)例代碼給大家詳細(xì)講解,感興趣的朋友跟隨小編一起看看吧2022-12-12vue+echarts實(shí)現(xiàn)條紋柱狀橫向圖
這篇文章主要為大家詳細(xì)介紹了vue+echarts實(shí)現(xiàn)條紋柱狀橫向圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04基于Vue3實(shí)現(xiàn)旋轉(zhuǎn)木馬動(dòng)畫效果
這篇文章主要為大家介紹了如何利用Vue3實(shí)現(xiàn)旋轉(zhuǎn)木馬的動(dòng)畫效果,文中的示例代碼講解詳細(xì),對(duì)我們學(xué)習(xí)Vue有一定的幫助,需要的可以參考一下2022-05-05Vue3 reactive響應(yīng)式賦值頁(yè)面不渲染的解決
這篇文章主要介紹了Vue3 reactive響應(yīng)式賦值頁(yè)面不渲染的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08使用keep-alive時(shí),數(shù)據(jù)無(wú)法刷新的問(wèn)題及解決
這篇文章主要介紹了使用keep-alive時(shí),數(shù)據(jù)無(wú)法刷新的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-07-07