Algunas notas principales de vue

MVVM
M: modelo modelo
V: vista vista
VM: vista modelo

Los datos del modo MVC tradicional se procesan dinámicamente, pero la actualización de la vista necesita obtener el dom para la operación, y el rendimiento no es bueno; el
modo MVVM agrega nuevamente la VM como middleware para realizar la vista basada en datos, y el desarrollador gasta más energía en la lógica y los datos de la investigación, la eficiencia del desarrollo es alta y el rendimiento es bueno.

Principio de respuesta

API principal: Object.defineProperty ()

Cuando se inicializa el objeto de datos en vue, se agregan los métodos get y set. Cuando los datos cambian, se activa la función para actualizar la vista.

Desventajas de Object.defineProperty ():

• El monitoreo en profundidad requiere recursividad hasta el final, lo que requiere una gran cantidad de cálculos únicos
• No se pueden monitorear nuevas propiedades / eliminar propiedades (Vue.set Vue.delete)
• No se puede monitorear la matriz de forma nativa, debe modificar el prototipo de la matriz

vdom
vdom es un objeto generado por js, imitando la estructura dom y generando dom real según vdom

Cómo convertir dom en un objeto js

//html
    <div id="box" style="color:red;">
      <p>段落</p>
      <ul>
        <li style="font-size:20px;">标签</li>
      </ul>
    </div>
//js对象
{
    
    
        tag: 'div',
        props: {
    
     style: 'color:red',id:'box' },
        children: [
          {
    
     tag: 'p', children: '段落' },
          {
    
    
            tag: 'ul',
            children: [
              {
    
    
                tag: 'li', props: {
    
     style: "font-size:20px" },
                children: '标签'
              }
            ]
          }
        ]
      }

algoritmo diff

Compara dom virtual y dom real

• Compare solo el mismo nivel, no entre niveles
• Si las etiquetas no son las mismas, elimínelas y reconstruya directamente, no más comparaciones en profundidad
• Etiqueta y clave, si ambas son iguales, se considera que son el mismo nodo, no una comparación en profundidad

Compilación de plantillas

withmétodo

• Cambie las reglas de búsqueda de las variables libres en {} y búsquelas como atributos obj.
• Si no se encuentra ningún atributo obj coincidente, se informará un error
• Úselo con precaución, rompe las reglas de alcance y empeora la legibilidad

La plantilla de plantilla se analiza en la función de renderización a través del método del compilador en vue. Esta función devuelve una cadena de vnodes, que es el dom virtual. A continuación, el algoritmo diff se utiliza para comparar con el dom real, y se reemplazan diferentes nodos.

//vue文件
import {
    
    compile} from '../../node_modules/vue-template-compiler'

console.log(compile('<div>{
    
    {text}}</div>'))
//with(this){return _c('div',[_v(_s(text))])}

Proceso de renderizado inicial

• Analizar la plantilla como la función de renderizado (o completada en el entorno de desarrollo, vue-loder)
• Activar el tipo de respuesta, monitorizar el captador y el configurador de atributos de datos
• Ejecute la función de renderizado para generar vnode, parche (elem, vnode)

Proceso de actualización

• Modificar datos, activador de activación
• Vuelva a ejecutar la función de renderizado para generar newVnode
• parche （vnode ， newVnode）

enrutamiento hash

• Los cambios de hash activarán saltos en la página web, es decir, el navegador avanzará y retrocederá
• Hash no actualizará la página, una característica necesaria de SPA
• El lado del servidor que nunca enviará el hash (el front-end se vale por sí mismo)

Función
window.onhashchange=(event)=>{}
JS para monitorear los cambios de hash para modificar la URL
location.href=##

enrutamiento histórico

• Utilice el enrutamiento estándar de URL, pero no actualice la página al redirigir
• Agregar ruta: el navegador history.pushState no actualizará la página

history.pushState(state,'','pageName')

• Supervise el navegador hacia adelante y hacia atrás: window.onpopstate = (event) => {}