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)容，類型可以是字符串、對象或函數(shù)
第二個(gè)參數(shù)（類型是對象，可選）：用于設(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)對象，或者一個(gè)返回值類型為String/Object的函數(shù)。該參數(shù)是必須的 ’div’, // {Object} // 一個(gè)包含模板相關(guān)屬性的數(shù)據(jù)對象，這樣我們可以在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)建而成。可選參數(shù) // 或簡單的使用字符串來生成的 '文本節(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í)簡單的來說就是template適合簡單的組件封裝，然后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ù)對比
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)先級大于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)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. PHP擴(kuò)展之APC——Alternative PHP Cache(可選PHP緩存)2. 如何使用ASP.NET Core 配置文件3. html小技巧之td,div標(biāo)簽里內(nèi)容不換行4. Android Studio插件5. android RecycleView實(shí)現(xiàn)多級樹形列表6. VMware如何進(jìn)入BIOS方法7. 如何真正的了解python裝飾器8. Ajax報(bào)錯(cuò)400的參考解決辦法9. Python爬蟲獲取豆瓣電影并寫入excel10. Python+Kepler.gl實(shí)現(xiàn)時(shí)間輪播地圖過程解析
網(wǎng)公網(wǎng)安備