Análisis de $mount en Vue

Este artículo tiene como objetivo llevar a cabo un análisis de $mount.

El trabajo realizado por $mount, en términos generales, se divide en3Paso:

1.Si la opción no contiene una función render, entonces, a través de compileToFunctions, se compila el HTML del template en una función Render que puede generar VNode.

2.Crear una instancia de Watcher, que desencadena el método updateComponent.

3.Generar vnode, actualizarlo a través de patch y actualizarlo en el DOM. Debido a la limitación de espacio, aquí se mencionan solo los primeros dos pasos, el tercer paso se analizará en la próxima entrega. Bueno, hablemos específicamente. Primero, nos dirigimos a la función $mount, como se muestra en la imagen siguiente:

　

Podemos ver que el código primero verifica si la opción contiene una función render, y si no la tiene, luego verifica si hay un template, y si no lo tiene, utiliza el outerHTML del elemento DOM. Después de obtener el template, ¿qué se hace a continuación? Como se muestra en la imagen siguiente.

　　

Podemos ver que se llama a compileToFunctions para convertir el template en una función render. Aquí hay dos procesos:

• Convertir el template en un AST (Abstract Syntax Tree)
• Generar la función render a través del AST (Abstract Syntax Tree)

En específico, no se mencionará aquí la conversión de template a AST (Abstract Syntax Tree), ya que se analizará en un capítulo separado si hay tiempo. Bueno, ahora que hemos obtenido la función render, ¿qué haremos a continuación? Sin duda, comenzamos con mountComponent. Como se muestra en la imagen siguiente:

　　

Se puede ver en la imagen superior que el programa declara un método updateComponent, que es el método que será llamado por la instancia del observador. A continuación, cuando analicemos el observador, veremos. Respecto a por qué hay una declaración condicional para declarar el método updateComponent según las condiciones, realmente desde el rendimiento se puede ver que uno de los métodos se utiliza para probar el rendimiento de render y update. Bueno, finalmente estamos en el observador, primero veamos esta línea de código:

// establecemos esto en vm._watcher dentro del constructor del observador
// ya que la pestaña inicial del observador puede llamar a $forceUpdate (por ejemplo, dentro del hijo
// el gancho de montaje del componente), que depende de que vm._watcher ya esté definido
new Watcher(vm, updateComponent, noop, null, true) /* isRenderWatcher */);

Vamos a analizar primero lo que dice el comentario sobre qué es _watcher. En realidad, puedes verlo en el código de forceupdate:

Vue.prototype.$forceUpdate = function () {
 var vm = this;
 if (vm._watcher) {
  vm._watcher.update();
 }
 };

es llamar al método update de _watcher de este vm. Se utiliza para actualizar forzadamente. ¿Por qué se llama actualización forzada? Vue tiene una condición, si el nuevo valor == el valor antiguo, entonces no se activa la actualización de la vista del watcher. Así que, si se necesita actualizar forzadamente, se debe llamar a forceupdate para actualizar forzadamente. Bueno, veamos los parámetros pasados:

• vm: la instancia actual de vm
• updateComponent, que es muy importante, se utiliza para actualizar el vnode al DOM más adelante.
• noop función sin sentido
• null opción de opción, no hay则为null
• true se utiliza principalmente para determinar qué watcher es. Porque las propiedades computadas y si configuraste watchers en options también utilizan new Watcher, más esta condición se utiliza para diferenciar estos tres. Bueno, veamos qué hace new Watcher, como se muestra en la siguiente imagen.
  

　

Primero, vemos que el código tiene esta condición:

if (isRenderWatcher) {
 vm._watcher = this;
}

Se puede ver que si se declara el contexto del watcher para renderizar la vista, es decir, cuando se llama new Watcher aquí en mountComponent, se asigna this a _watcher. Luego se empuja watcher a _watchers, con el propósito de destruir el watcher junto con el componente cuando se destruya. Luego se inicializan los miembros del watcher, el código es el siguiente:

this.deep = this.user = this.lazy = this.sync = false;<br />

Siguiente, es asignar a getter, this.getter = expOrFn. ¿Recuerdas la función updateComponent que se envió recientemente? Sí, es esta asignación lo que le da getter a . Luego, llegamos a:

this.value = this.lazy
 ? undefined
 : this.get();

Entramos al método get, veamos qué hace. El código de get se muestra en la imagen siguiente:

　

Podemos ver que primero ejecuta pushTarget(this), el código de pushTarget(this) es el siguiente:

function pushTarget (_target) {
 if (Dep.target) { targetStack.push(Dep.target); }
 Dep.target = _target;
}

Es decir, si hay un Dep.target, coloca el target en targetStack, si no, configura como el target actual, es decir, este watcher. Luego, se ejecuta su propiedad getter, es decir, lo que se introdujo en la función updateComponent. Y updateComponent es el tercer paso mencionado al principio.

Resumen

Resumen: Lo que se mencionó anteriormente es lo que el editor les ha presentado sobre $mount en Vue, esperamos que les haya sido útil. Si tienen alguna pregunta, déjenos un mensaje y el editor les responderá a tiempo. También les agradecemos mucho por su apoyo al sitio web de tutorial de clamor!

Declaración: El contenido de este artículo se obtiene de la red, es propiedad del autor original, el contenido se contribuye y carga de manera autónoma por los usuarios de Internet, este sitio web no posee derechos de propiedad, no se ha realizado una edición humana y no asume responsabilidades legales relacionadas. Si encuentra contenido sospechoso de infracción de derechos de autor, por favor envíe un correo electrónico a: notice#w para informar, y proporcione la evidencia relevante.3Declaración: El contenido de este artículo se obtiene de la red, es propiedad del autor original, el contenido se contribuye y carga de manera autónoma por los usuarios de Internet, este sitio web no posee derechos de propiedad, no se ha realizado una edición humana y no asume responsabilidades legales relacionadas. Si encuentra contenido sospechoso de infracción de derechos de autor, por favor envíe un correo electrónico a: notice#w para informar, y proporcione la evidencia relevante. Una vez confirmado, este sitio eliminará inmediatamente el contenido sospechoso de infracción.