vue渲染方式render和template的區(qū)別
render函數(shù)詳解
Vue中的Render函數(shù)中有一個(gè)參數(shù),這個(gè)參數(shù)是一個(gè)函數(shù)通常我們叫做h。其實(shí)這個(gè)h叫做createElement。Render函數(shù)將createElement的返回值放到了HTML中
createElement這個(gè)函數(shù)中有3個(gè)參數(shù)
第一個(gè)參數(shù)(必要參數(shù)):主要用于提供DOM的html內(nèi)容,類型可以是字符串、對(duì)象或函數(shù)
第二個(gè)參數(shù)(類型是對(duì)象,可選):用于設(shè)置這個(gè)DOM的一些樣式、屬性、傳的組件的參數(shù)、綁定事件之類
第三個(gè)參數(shù)(類型是數(shù)組,數(shù)組元素類型是VNode,可選):主要是指該結(jié)點(diǎn)下還有其他結(jié)點(diǎn),用于設(shè)置分發(fā)的內(nèi)容,包括新增的其他組件。注意,組件樹中的所有VNode必須是唯一的
// @return {VNode} createElement( // {String | Object | Function} // 一個(gè)HTML標(biāo)簽字符串,組件選項(xiàng)對(duì)象,或者一個(gè)返回值類型為String/Object的函數(shù)。該參數(shù)是必須的 'div', // {Object} // 一個(gè)包含模板相關(guān)屬性的數(shù)據(jù)對(duì)象,這樣我們可以在template中使用這些屬性,該參數(shù)是可選的。 { attrs: { name: headingId, href: '#'+headingId }, style: { color: 'red', fontSize: '20px' }, 'class': { foo: true, bar: false }, // DOM屬性 domProps: { innerHTML: 'baz' }, // 組件props props: { myProp: 'bar' }, // 事件監(jiān)聽基于 'on' // 所以不再支持如 'v-on:keyup.enter' 修飾語 // 需要手動(dòng)匹配 KeyCode on: { click: function(event) { event.preventDefault(); console.log(111); } } } // {String | Array} // 子節(jié)點(diǎn)(VNodes)由 createElement() 構(gòu)建而成??蛇x參數(shù) // 或簡(jiǎn)單的使用字符串來生成的 "文本節(jié)點(diǎn)"。 [ 'xxxx', createElement('h1', '一則頭條'), createElement(MyComponent, { props: { someProp: 'xxx' } }), this.$slots.default ] )
什么時(shí)候用render函數(shù)?
假設(shè)我們要封裝一套按鈕組件,按鈕有四個(gè)樣式(success、error、warning、default)。首先,你可能會(huì)想到如下實(shí)現(xiàn)
<template> <divclass="btn btn-success"v-if="type === 'success'">{{ text }}</div> <divclass="btn btn-danger"v-else-if="type === 'danger'">{{ text }}</div> <divclass="btn btn-warning"v-else-if="type === 'warning'">{{ text }}</div> </template>
雖然我們這樣實(shí)現(xiàn)沒有問題,但是如果現(xiàn)在有十幾個(gè)樣式的情況下我們就需要寫N多個(gè)判斷,如果遇到了這種情況我們就可以選擇使用render函數(shù)。
其實(shí)簡(jiǎn)單的來說就是template適合簡(jiǎn)單的組件封裝,然后render函數(shù)適合復(fù)雜的組件封裝
<script> Vue.component("A-button", { props: { type: { type: String, default: 'default' }, text: { type: String, default: '按鈕' } }, computed: { tag() { switch(this.type) { case'success': return1; case'danger': return2; case'warning': return3; default: return1; } } }, render(h) { returnh('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 } }, this.$slots.default ); }, methods: { handleClick() { console.log('-----------------------'); console.log('li'); } } }) letvm=newVue({ el: "#app" }) </script>
template與render函數(shù)對(duì)比
template----html的方式做渲染
render----js的方式做渲染
render(提供)是一種編譯方式
render里有一個(gè)函數(shù)h,這個(gè)h的作用是將單文件組件進(jìn)行虛擬DOM的創(chuàng)建,然后再通過render進(jìn)行解析。
h就是createElement()方法:createElement(標(biāo)簽名稱,屬性配置,children)
template也是一種編譯方式,但是template最終還是要通過render的方式再次進(jìn)行編譯。
區(qū)別:
1、render渲染方式可以讓我們將js發(fā)揮到極致,因?yàn)閞ender的方式其實(shí)是通過createElement()進(jìn)行虛擬DOM的創(chuàng)建。邏輯性比較強(qiáng),適合復(fù)雜的組件封裝。
2、template是類似于html一樣的模板來進(jìn)行組件的封裝。
3、render的性能比template的性能好很多
4、render函數(shù)優(yōu)先級(jí)大于template
案例一:template和render的方式渲染標(biāo)題標(biāo)簽:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <h-title level="1">標(biāo)題</h-title> <h-title level="2">標(biāo)題</h-title> <h-title level="3">標(biāo)題</h-title> </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> Vue.component("h-title",{ /* template渲染 */ // template:` // <div> // <h1 v-if="level==1"><slot></slot></h1> // <h2 v-else-if="level==2"><slot></slot></h2> // <h3 v-else-if="level==3"><slot></slot></h3> // </div> // `, /* render渲染 */ render:function(h){ // createElement(標(biāo)簽名稱,屬性配置,children) return h("h"+this.level, { attrs:{ "data-id":10 } }, // 相當(dāng)于<slot></slot>標(biāo)簽接收 this.$slots.default ) }, props:{ level:{ type:String } } }); let vm=new Vue({ el:"#app" }); </script> </body> </html>
案例二:render方式模擬button:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{margin: 0;padding: 0;} .btn{ width: 80px; line-height: 40px; text-align: center; color:#fff; border-radius: 5px; background-color: #ccc; } .success{background-color: green;} .error{background-color: red;} .info{background-color: pink;} </style> </head> <body> <div id="app"> <wql-button type="success">成功</wql-button> <wql-button type="info">提示</wql-button> <wql-button type="error">報(bào)錯(cuò)</wql-button> <wql-button>默認(rèn)</wql-button> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> Vue.component("wql-button",{ render:function(h){ return h("div",{ class:{ btn:true, success:this.type=="success", error:this.type=="error", info:this.type=="info" } },this.$slots.default); }, props:{ type:{ type:String } } }); let vm=new Vue({ el:"#app" }); </script> </body> </html>
到此這篇關(guān)于vue渲染方式render和template的區(qū)別的文章就介紹到這了,更多相關(guān)vue render template區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue獲取路由詳細(xì)內(nèi)容信息方法實(shí)例
獲取路由詳細(xì)內(nèi)容信息是我們?nèi)粘i_發(fā)中經(jīng)常會(huì)遇到的需求,下面這篇文章主要給大家介紹了關(guān)于vue獲取路由詳細(xì)內(nèi)容信息的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12vue.js 輸入框輸入值自動(dòng)過濾特殊字符替換中問標(biāo)點(diǎn)操作
這篇文章主要介紹了vue.js 輸入框輸入值自動(dòng)過濾特殊字符替換中問標(biāo)點(diǎn)操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08解決使用vue-awesome-swiper組件手動(dòng)滾動(dòng)點(diǎn)擊失效問題
這篇文章主要介紹了使用vue-awesome-swiper組件手動(dòng)滾動(dòng)點(diǎn)擊失效問題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06vue3中安裝并使用CSS預(yù)處理器Sass的方法詳解
Sass是一種CSS預(yù)處理器,它擴(kuò)展了CSS的功能,提供了更高級(jí)的語法和特性,例如變量、嵌套、混合、繼承和顏色功能等,這些特性可以幫助開發(fā)者更高效地管理和維護(hù)樣式表,本文介紹vue3中安裝并使用CSS預(yù)處理器Sass的方法,感興趣的朋友一起看看吧2024-01-01vue實(shí)現(xiàn)樹形結(jié)構(gòu)增刪改查的示例代碼
其實(shí)很多公司都會(huì)有類似于用戶權(quán)限樹的增刪改查功能,本文主要介紹了vue實(shí)現(xiàn)樹形結(jié)構(gòu)增刪改查,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09vue同一個(gè)瀏覽器登錄不同賬號(hào)數(shù)據(jù)覆蓋問題解決方案
同一個(gè)瀏覽器登錄不同賬號(hào)session一致,這就導(dǎo)致后面登錄的用戶數(shù)據(jù)會(huì)把前面登錄的用戶數(shù)據(jù)覆蓋掉,這個(gè)問題很常見,當(dāng)前我這邊解決的就是同一個(gè)瀏覽器不同窗口只能登錄一個(gè)用戶,對(duì)vue同一個(gè)瀏覽器登錄不同賬號(hào)數(shù)據(jù)覆蓋問題解決方法感興趣的朋友一起看看吧2024-01-01vue+elementUI實(shí)現(xiàn)點(diǎn)擊左右箭頭切換按鈕功能
這篇文章主要介紹了vue+elementUI實(shí)現(xiàn)點(diǎn)擊左右箭頭切換按鈕功能,樣式可以根據(jù)自己需求改動(dòng),感興趣的朋友可以參考下實(shí)現(xiàn)代碼2024-05-05vue.js學(xué)習(xí)之vue-cli定制腳手架詳解
這篇文章主要給大家介紹了vue.js學(xué)習(xí)之vue-cli定制腳手架的相關(guān)資料,文中介紹的非常詳細(xì),對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-07-07關(guān)于element-ui?select?下拉框位置錯(cuò)亂問題解決
這篇文章主要介紹了關(guān)于element-ui?select?下拉框位置錯(cuò)亂問題解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09