Recently, an information pop-up window is needed on the project to display information. Only had it pop up text at first, and only one message. What I need is multiple texts and pictures, and then I use the Notification notification component in element ui to display them. Of course, basic Notification is not enough, so I use Notification with HTML fragment, and h() use it with function in Vue.
Below is the Notification component given in element ui (Notification with HTML fragment).
1 ElNotification({
2 title: 'HTML String',
3 dangerouslyUseHTMLString: true,//whether to treat the message attribute as an HTML fragment
4 message: '<strong>This is <i>HTML</i> string</strong>' ,//Body content
5 })
And to accomplish my needs, just use h() the function in the body content of the Notification.
After I use h() the function:
1 ElNotification({
2 title: 'HTML String',//title
3 type: 'warning',//type
4 offset: 80,//offset relative to the top of the screen
5 customClass: 'temperature',//custom Class name
6 dangerouslyUseHTMLString: true,//Whether to treat the message attribute as an HTML fragment
7 duration: 5000,//Display time
8 message: h('div', [
9 h('img', { src: item[index] .images[index], style: { width: '170px', height: '160px', float: 'left' } }),//Inserted picture 10 h
('p', { class: 'userName', style : { color: 'orange', display: 'flex', margin: '0 0 0 15px' } }, 'Personnel name:' + item[index].userName + ''),//Inserted text 11 ]
, )
After the code is written, let’s talk about the function and the (virtual DOM node) h() behind it VNode
What is h() a function? The official Vue documentation explains it this way:
Vue provides a h() function for creating vnodes.
1 import { h } from 'vue'
2
3 const vnode = h(
4 'div', // type
5 { id: 'foo', class: 'bar' }, // props
6 [
7 /* children */
8 ]
9 )
h() Short for hyperscript - meaning "JavaScript that generates HTML (Hypertext Markup Language)". The name comes from a convention that many virtual DOM implementations form by default. A more accurate name would be createVnode(), but when you need to use the render function multiple times, a short name would be less labor intensive.
h() The usage of functions is very flexible:
1 // In addition to the required type, other parameters are optional
2 h('div')
3 h('div', { id: 'foo' })
4
5 // Both attribute and property can be in prop
6 // Vue will automatically assign them to the correct position
7 h('div', { class: 'bar', innerHTML: 'hello' }) 8
9
// props modifiers such as .prop and .attr can be added
10 // with '.' and `^' prefixes respectively
11 h('div', { '.name': 'some-name', '^width': '100' })
12
13 // class with Styles can be written as in templates14
// as arrays or objects15
h('div', { class: [foo, { bar }], style: { color: 'red' } })
16
17 // The event listener should be written in the form of onXxx
18 h('div', { onClick:() => {} })
19
20 // children can be a string
23 // can be omitted when there are no props
21 h('div', { id: 'foo' }, 'hello')
22
24 h('div', 'hello')
25 h('div', [h('span', 'hello')])
26
27 // The children array can contain both vnodes and strings
28 h('div' , ['hello', h('span', 'hello')])
The obtained vnode is as follows:
1 const vnode = h('div', { id: 'foo' }, [])
2
3 vnode.type // 'div'
4 vnode.props // { id: 'foo' }
5 vnode.children // []
6 vnode.key // null
(The complete VNode interface contains other internal properties, but it is strongly recommended to avoid using these properties not listed here. This will avoid incompatibilities caused by internal property changes.)
So to sum up, the method of use (very simple) :
h(label, {attribute}, content)
h(label, {attribute}, [you can continue to nest h()])
h() The function is already used, so VNode what is it? (Refer to the article from qq_2268846315. VNode just talked about the key points, and did not talk about it in super detail. If necessary, please refer to the article of qq_2268846315 )
VNode ：
There is a VNode class in vue.js, which can be used to instantiate different types of vnode instances, and different types of vnode instances represent different types of DOM elements.
For example, DOM elements have element nodes, text nodes, comment nodes, etc., and vnode instances also correspond to element nodes, text nodes, and comment nodes.
VNode The role of:
Since the vnode is created first every time the view is rendered, and then the real DOM created by it is inserted into the page, so the vnode created when the view was rendered last time can be cached first, and then whenever the view needs to be re-rendered, Compare the newly created vnode with the last cached vnode to see what are the differences between them, find out the differences and modify the real DOM based on this.
Vue.js currently uses a medium-grained state detection strategy. When the state changes, it is only notified to the component level, and then the virtual DOM is used in the component to render the view.
When a state changes, only the components that use this state are notified. In other words, as long as one of the many states used by the component changes, the entire component must be re-rendered.
If only one node of the component has changed, re-rendering all the nodes of the entire component will obviously cause a lot of performance waste. Therefore, it is very important to wake up the cache for vnode, compare the last cache with the currently created vnode, and only update the nodes with differences. This is also the most important role of vnode.
VNode type:
Comment node
Text node
Element node
Component node
Functional node
Clone node
Summarize:
VNode It is a class that can produce different types of vnode instances, and different types of instances represent different types of real DOM.
Since Vue.js uses virtual DOM to update the view, when the property changes, the entire component needs to be re-rendered, but not all DOM nodes in the component need to be updated, so the vnode will be cached and the current Comparing the newly generated vnode with the cached vnode, only performing DOM operations on the parts that need to be updated can improve a lot of performance.
There are many types of vnodes. They are essentially objects instantiated by Vnodes. The only difference is that their attributes are different.