Recientemente, se necesita una ventana emergente de información en el proyecto para mostrar información. Al principio, solo apareció un mensaje de texto emergente y solo un mensaje. Lo que necesito son múltiples textos e imágenes, y luego uso el componente de notificación de notificación en el elemento ui para mostrarlos. Por supuesto, la notificación básica no es suficiente, así que uso la notificación con fragmento HTML y h() la uso con la función en Vue.
A continuación se muestra el componente de Notificación dado en el elemento ui (Notificación con fragmento HTML).
1 ElNotification({
2 título: 'Cadena HTML',
3 peligrosamenteUseHTMLString: verdadero,//si se debe tratar el atributo del mensaje como un fragmento HTML
4 mensaje: '<strong>Esta es una cadena <i>HTML</i></strong >' ,//Contenido del cuerpo
5 })
Y para satisfacer mis necesidades, solo use h() la función en el contenido del cuerpo de la Notificación.
Después de usar h() la función:
1 ElNotification({
2 title: 'HTML String',//title
3 type: 'advertencia',//type
4 offset: 80,//offset relativo a la parte superior de la pantalla
5 customClass: 'temperature',//custom Nombre de clase
6 DangerlyUseHTMLString: true,//Si se debe tratar el atributo del mensaje como un fragmento HTML
7 duración: 5000,//Tiempo de visualización
8 mensaje: h('div', [
9 h('img', { src: item[ index] .images[index], style: { width: '170px', height: '160px', float: 'left' } }),//Imagen insertada 10 h ('p', { class: 'userName'
, style : { color: 'orange', display: 'flex', margin: '0 0 0 15px' } }, 'Personal name:' + item[index].userName + ''),//Texto insertado 11 ]
, )
Después de escribir el código, hablemos de la función y el (nodo DOM virtual) h() detrás de ella VNode
¿ Qué es h() una función? La documentación oficial de Vue lo explica de esta manera:
Vue proporciona una h() función para crear 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() Abreviatura de hiperíndice, que significa "JavaScript que genera HTML (lenguaje de marcado de hipertexto)". El nombre proviene de una convención que muchas implementaciones de DOM virtuales forman de forma predeterminada. Un nombre más preciso sería createVnode(), pero cuando necesite usar la función de representación varias veces, un nombre corto requeriría menos trabajo.
h() El uso de funciones es muy flexible:
1 // Además del tipo requerido, otros parámetros son opcionales
2 h('div')
3 h('div', { id: 'foo' })
4
5 // Tanto el atributo como la propiedad pueden estar en prop
6 / / Vue los asignará automáticamente a la posición correcta
7 h('div', { class: 'bar', innerHTML: 'hello' }) 8
9
// se pueden agregar modificadores de accesorios como .prop y .attr
10 // con los prefijos '.' y '^' respectivamente
11 h('div', { '.name': 'some-name', '^width': '100' }) 12 13 // la
clase
con estilos se puede escribir como in templates14
// como matrices u objetos15
h('div', { class: [foo, { bar }], style: { color: 'red' } }) 16 17
//
El detector de eventos debe escribirse en forma de onXxx
18 h('div', { onClick:() => {} })
19
20 // los niños pueden ser una cadena
23 // se pueden omitir cuando no hay accesorios
21 h('div', { id: 'foo' }, 'hola')
22
24 h('div', 'hola')
25 h('div', [h('span', 'hola')])
26
27 // La matriz de niños puede contener tanto vnodes como cadenas
28 h('div ', ['hola', h('span', 'hola')])
El vnode obtenido es el siguiente:
1 const vnode = h('div', { id: 'foo' }, [])
2
3 vnode.type // 'div'
4 vnode.props // { id: 'foo' }
5 vnode.children // []
6 vnodo.clave // nulo
(La VNode interfaz completa contiene otras propiedades internas, pero se recomienda encarecidamente evitar el uso de estas propiedades que no se enumeran aquí. Esto evitará incompatibilidades causadas por cambios de propiedades internas).
Entonces, para resumir, el método de uso (muy simple) :
h (etiqueta, {atributo}, contenido)
h (etiqueta, {atributo}, [puede continuar anidando h ()])
h() La función ya se usa, entonces, VNode ¿qué es? (Consulte el artículo de qq_2268846315. VNode solo habló sobre los puntos clave y no habló de ellos en detalle. Si es necesario, consulte el artículo de qq_2268846315 )
VNode ：
Hay una clase VNode en vue.js, que se puede usar para crear instancias de diferentes tipos de instancias de vnode, y diferentes tipos de instancias de vnode representan diferentes tipos de elementos DOM.
Por ejemplo, los elementos DOM tienen nodos de elementos, nodos de texto, nodos de comentarios, etc., y las instancias de vnode también corresponden a nodos de elementos, nodos de texto y nodos de comentarios.
VNode El rol de:
Dado que el vnode se crea primero cada vez que se representa la vista, y luego el DOM real creado por él se inserta en la página, por lo que el vnode creado cuando la vista se representó la última vez se puede almacenar en caché primero, y luego cada vez que la vista necesita volver a renderizar, compare el vnode recién creado con el último vnode almacenado en caché para ver cuáles son las diferencias entre ellos, descubra las diferencias y modifique el DOM real en función de esto.
Vue.js actualmente usa una estrategia de detección de estado de grano medio. Cuando el estado cambia, solo se notifica al nivel del componente y luego se usa el DOM virtual en el componente para representar la vista.
Cuando cambia un estado, solo se notifica a los componentes que utilizan este estado. En otras palabras, siempre que cambie uno de los muchos estados utilizados por el componente, se debe volver a renderizar todo el componente.
Si solo ha cambiado un nodo del componente, volver a renderizar todos los nodos del componente completo obviamente causará una gran pérdida de rendimiento. Por lo tanto, es muy importante activar el caché para vnode, comparar el último caché con el vnode creado actualmente y solo actualizar los nodos con diferencias. Esta es también la función más importante de vnode.
VNode tipo:
Nodo de comentario Nodo
de texto Nodo
de elemento Nodo
de componente Nodo
funcional
Nodo de clonación
Resumir:
VNode Es una clase que puede producir diferentes tipos de instancias de vnode, y diferentes tipos de instancias representan diferentes tipos de DOM real.
Dado que Vue.js usa DOM virtual para actualizar la vista, cuando la propiedad cambia, todo el componente debe volver a renderizarse, pero no todos los nodos DOM en el componente deben actualizarse, por lo que el vnode se almacenará en caché y la comparación actual el vnode recién generado con el vnode almacenado en caché, solo realizar operaciones DOM en las partes que deben actualizarse puede mejorar mucho el rendimiento.
Hay muchos tipos de Vnodes. Son esencialmente objetos instanciados por Vnodes. La única diferencia es que sus atributos son diferentes.