Detailed explanation of render function
There is a parameter in the Render function in Vue, which is a function that we usually call h. In fact, this h is called createElement. The Render function puts the return value of createElement into HTML
There are 3 parameters in the createElement function
The first parameter (necessary parameter): It is mainly used to provide DOM's html content, and the type can be a string, object or function
The second parameter (type is an object, optional): used to set some styles, properties, parameters of passed components, binding events, etc. of this DOM
The third parameter (type is an array, array element type is VNode, optional): mainly refers to the fact that there are other nodes under this node, which are used to set the distribution content, including other newly added components. Note that all VNodes in the component tree must be unique
// @return {VNode}
createElement(
// {String | Object | Function}
// An HTML tag string, component option object, or a function with return value type String/Object. This parameter is required 'div',
// {Object}
// A data object containing the template-related properties, so we can use these properties in template, and this parameter is optional.{
attrs: {
name: headingId,
href: '#'+headingId
},
style: {
color: 'red',
fontSize: '20px'
},
'class': {
foo: true,
bar: false
},
// DOM properties domProps: {
innerHTML: 'baz'
},
// Component props props: {
myProp: 'bar'
},
// Event listening is based on 'on' // So no longer supports modifiers like 'v-on:' // Need to manually match KeyCode on: {
click: function(event) {
();
(111);
}
}
}
// {String | Array}
// Children nodes (VNodes) are constructed by createElement(). Optional parameters // Or simply use strings to generate "text nodes".[
'xxxx',
createElement('h1', 'A headline'),
createElement(MyComponent, {
props: {
someProp: 'xxx'
}
}),
this.$
]
)
When to use the render function?
Suppose we want to encapsulate a set of button components, and the button has four styles (success, error, warning, and default). First of all, you may think of the following implementation
<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>
Although there is no problem with our implementation like this, if there are more than a dozen styles now, we need to write more than N judgments. If we encounter this situation, we can choose to use the render function.
In fact, in simple terms, template is suitable for simple component packaging, and then render function is suitable for complex component packaging.
<script>
("A-button", {
props: {
type: {
type: String,
default: 'default'
},
text: {
type: String,
default: 'Button'
}
},
computed: {
tag() {
switch() {
case'success':
return1;
case'danger':
return2;
case'warning':
return3;
default:
return1;
}
}
},
render(h) {
returnh('div', {
class: {
btn: true,
'btn-success': ==='success',
'btn-danger': ==='danger',
'btn-warning': ==='warning'
},
domProps: {
//innerText: ,
},
on: {
click:
}
},
this.$
);
},
methods: {
handleClick() {
('-----------------------');
('li');
}
}
})
letvm=newVue({
el: "#app"
})
</script>
Comparison of template and render function
template------------------------------------------------------------------------------------------------------------------------------
render----JS
render (provided) is a way of compilation
There is a function h in the render. The function of this h is to create a single file component in a virtual DOM, and then parse it through render.
h is the createElement() method: createElement(label name, attribute configuration, children)
template is also a way of compilation, but template must eventually be compiled through render.
the difference:
1. The render rendering method allows us to maximize js, because the render method is actually to create virtual DOM through createElement(). It is relatively logical and suitable for complex component packaging.
2. template is a template similar to html to encapsulate components.
3. The performance of render is much better than that of template
4. The priority of render function is greater than template
Case 1: Render the title tag in template and render:
<!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 >
<h-title level="1">title</h-title>
<h-title level="2">title</h-title>
<h-title level="3">title</h-title>
</div>
<script src="/vue/dist/"></script>
<script>
("h-title",{
/* template rendering */
// 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 */
render:function(h){
// createElement(label name, attribute configuration, children) return h("h"+,
{
attrs:{
"data-id":10
}
},
// Equivalent to <slot></slot> tag reception this.$
)
},
props:{
level:{
type:String
}
}
});
let vm=new Vue({
el:"#app"
});
</script>
</body>
</html>
Case 2: render mode simulation 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 >
<wql-button type="success">success</wql-button>
<wql-button type="info">hint</wql-button>
<wql-button type="error">Report an error</wql-button>
<wql-button>default</wql-button>
</div>
<script src="/npm/vue/dist/"></script>
<script>
("wql-button",{
render:function(h){
return h("div",{
class:{
btn:true,
success:=="success",
error:=="error",
info:=="info"
}
},this.$);
},
props:{
type:{
type:String
}
}
});
let vm=new Vue({
el:"#app"
});
</script>
</body>
</html>
This is the end of this article about the difference between render and template in vue render. For more information about the differences between vue render template, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!