Render function, most of the division of veteran, should be more understanding, but may be some young novice, not very understanding, and Yan Laoshi also went online to look up some relevant articles, summed up, not enough system, so today a simple chat, cycle gradual
What is the render function
Since vUE uses the virtual DOM, we need to translate the template into a VNode function
Thrust a mouthVirtual DOM 与 Real DOMThe difference between
The virtual DOM does not carry out typesetting and redrawing operations. The virtual DOM converts the real DOM into Javascript code, and the efficiency of frequent typesetting and redrawing operations of the real DOM is much lower than that of the virtual DOM. For example, the native operation of the real DOM browser will execute the process from beginning to end from the DOM tree construction. The virtual DOM uses Object to represent a node, which is called a VNode. Then two VNodes are used to compare, and the real DOM is modified according to the result of comparison.
Browser rendering engine workflow
Virtual DOM and VNode also involve diff algorithm, so we first pause here, start our text, of course, interested partners can go to the relevant information
Use of the render function
Let’s take a look at our usual vUE notation
<template>
<div>
<h1>Yan old wet</h1>
</div>
</template>
Copy the codeWhat if we use the render function?
<script>
export default {
render(createElement){
/ / the createElement method:
// The first argument is that the label name type must be String
// The second is the property value, which we will come to later. The type is Object
/ / (VNodes) is the third child virtual node can be a String | Array
return createElement('h1', {},"Yan Lao Shi")
}
}
</script>
Copy the codeSo we can implement elements in the template as well
Dynamic receiving parameter
Modify the above code below, let’s try again
<script>
export default {
props: {
tag: {
type:String.
required: true
}
},
render(createElement){
return createElement(this.tag,{},"Yan Lao Shi")
}
}
</script>
Copy the codeDynamically toggle labels by passing values to children in the parent component
<sub-components tag="button"></sub-components>
Copy the code
We can do it this way, so let’s do something else
<script>
export default {
props: {
tag: {
type: String.
required: true.
},
data: {
type: Array.
required:true
},
},
render(createElement) {
return createElement(this.tag, {},
// nested on the this.tag element
this.data.map(item= >
createElement('li',{},item.toString())
)
);
},
};
</script>
Copy the codeThe parent component passes values
<sub-components tag="ul" :data="data"></sub-components>
Data :[" Novel Coronavirus inactivated vaccine debut "," Liaoning Vice Governor Lu Ke wins science prize "," Kan Qingzi says Zhu Yilong is mysterious "]
Copy the codeSee the effect
The createElement method attribute
We just used the first and third parameters of createElement
Now let’s look at the second parameter, why did I put it in the back, because there’s a lot of stuff in it
Huh? The highlight?
Check it out next
class
<script>
export default {
props: {
tag: {
type: String.
required: true.
},
data: {
type: Array.
required:true
},
},
render(createElement) {
return createElement(this.tag, {},
this.data.map(item= >
createElement('li', {
// Start with class
class: 'child-element'
// or
// domProps: {className: "child-element"},
},item.toString())
)
);
},
};
</script>
Copy the code
When we add class to the li tag, we can see the child-element directly on the element, and we want to modify the style directly through the selector.
on
Now look at the events series
<script>
export default {
props: {
tag: {
type: String.
required: true.
},
data: {
type: Array.
required:true
},
},
render(createElement) {
return createElement(this.tag, {},
this.data.map(item= >
createElement('li', {
domProps: {
className: "child-element"
},
// In on we can write the desired events
on:{
Click print Pointer Event
click:(e) = >{
console.log(e)
},
// mouseover
// mouseout
}
},item.toString())
)
);
},
};
</script>
Copy the codePrint result:
There are a lot of fun things to check out the official vue2.0 documentation
https://cn.vuejs.org/v2/guide/render-function.html#createElement-%E5%8F%82%E6%95%B0
Such as style, ATTRs, directives and so on….
Vue components
Those of you who have seen the Render source code should know that the first argument we just mentioned, tag, can be more than just a standard HTML tag. The tag can be divided into normal HTML tags | vue components. Now that you’ve learned about HTML tags, let’s take a look at vUE components
First we create a new VUE component
<template>
<div>
{{content}}
</div>
</template>
<script>
export default {
props: {
content: {
type:String
}
}
}
</script>
Copy the codeIntroduced in the Render function page
<script>
// Import components
import Widget from './Widget'
export default {
render(createElement) {
// Pass in the component
return createElement(Widget, {
/ / the value of the content
props:{
content:"hello CrazyYan"
}
});
},
};
</script>
Copy the codeOk to return to the page, we have seen the component
We should know that from where we are
- What the render function does
- It’s easy to use
- The effect of several parameters
– END –
