Principio de aprendizaje tonto de Vue: DOM real en DOM virtual

¿Por qué utilizar DOM virtual?

• Operar el DOM en js es una cosa que consume mucho rendimiento
• Puede causar reflujo y redibujado
• Cuando los datos cambian, el DOM virtual solo opera en la página una vez
• El DOM virtual se utiliza para mejorar el rendimiento

¿Qué es el DOM virtual?

• El DOM virtual puede entenderse como una etiqueta HTML expresada en una cadena
• Por supuesto, esta cadena se almacena en el tipo de datos del objeto.

<div/>  => {
    
    tag:'div'}

<div>我是内容</div> => {
    
    tag:'div',value:'我是内容'}

<div title="1" class="c"> => {
    
    tag:'div',data:{
    
    title:'1',class:'c'}}

<div>   => {
    
    tag:'div',children:[{
    
    tag:'div'}]}
  <div><div>
</div>

Eche un vistazo al DOM virtual en Vue

Virtual DOM es una estructura de datos de árbol

<div id="root"> 
	<div>
		<p>{
    
    {
    
    name}}-{
    
    {
    
    message}}</p>
	</div>
	<p>{
    
    {
    
    name}}</p>
	<p>{
    
    {
    
    message}}</p>
</div>

¿Cómo surgió el DOM real?

La plantilla siempre existe en la memoria, porque esta plantilla es la base de la representación.
Siempre que la sintaxis de interpolación correspondiente en la plantilla se reemplace con datos, se puede representar en la página. La
combinación de las dos es el DOM real.

Conversión entre DOM virtual y DOM real

• De hecho, es casi lo mismo que una copia profunda.
• Atraviese profundamente el DOM real y conviértalo en DOM virtual cuando encuentre un nodo
• Atraviesa las etiquetas, solo copia

Convierta este conjunto de etiquetas en DOM virtual

<div id="root"> 
	<div>
		<div>hello1</div>
		<div>hello2</div>
		<div>hello3</div>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
	</div>
</div>

Crear una clase

class Vnode{
    
    
	constructor((tag,data,value,type)) {
    
    
	    this.tag = tag.toLowerCase(); // 标签名
			this.data = data;  // 值
			this.value = value; // 文本
			this.type = type;  // 元素类型
			this.children = []  // 子节点
	}
	
	// 如果有追加节点，就用这个方法
	appendChild(vnode) {
    
    
		this.children.push(vnode)
	}
}

• El comienzo del guión bajo representa privado, legible y escribible
• El signo de dólar comienza con solo lectura
• Utilice la recursividad para atravesar elementos DOM y generar DOM virtual
• La estructura de pila utilizada por el código fuente en Vue usa la pila para almacenar elementos principales para lograr una generación recursiva

function getVNode(node) {
    
      // 参数为真正的DOM
	let nodeType = node.nodeType;
	let _vnode = null;
	// 对节点进行判断
	if(nodeType === 1) {
    
     // 元素节点
		let nodeName = noew.nodeName
		let attrs = node.attributes  // 属性，返回属性组成的为数组，我们就是把这个伪数组转换为对象
		let _arrtObj = {
    
    }
		
		// 循环 attrs
		for(let i = 0; i < attrs.length; i++) {
    
    
			// attrs[i]是一个属性节点，我们要的是nodeName这个属性
			_arrtObj[attrs[i].nodeNarme] = attrs[i].nodeValue
		}
		_vnode = new Vnode(nodeName,_attrObj,undefined,nodeType)
		
		let childNodes = npde.childNodes;
		for(let i = 0; i < childNodes.length; i++) {
    
    
			_vnode.appendChild(getVNode(childNodes[i])) // 递归
		}
	} else if (nodeType === 3) {
    
    
		_Vnode = new Vnode(undefined,undefined,node.nodeValue,nodeType)
	}
	
	return _vnode
}