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