Analisi di $mount in Vue

// Questo articolo è principalmente per portarvi ad analizzare $mount.

// Le attività compiute da $mount, in sintesi, sono principalmente divise in 3 passaggi:

// 1. Se l'opzione non contiene una funzione render, attraverso compileToFunctions si compila il template HTML in una funzione Render che può generare VNode.

// 2. Creazione di un'istanza di Watcher, attivazione del metodo updateComponent.

// 3. Generazione di vnode, aggiornamento di vnode tramite patch, aggiornamento di vnode sul DOM. A causa della limitazione di spazio, parleremo solo dei primi due passaggi, il terzo passo sarà trattato nel prossimo articolo. Bene, parliamo specificamente. Prima di tutto, arriviamo alla funzione $mount, come nell'immagine sottostante:

　

// Possiamo vedere che il codice prima verifica se l'opzione contiene una funzione render, se non c'è, verifica se c'è un template, se non c'è, utilizza l'outerHTML dell'elemento DOM. Dopo aver ottenuto il template, cosa faremo? Vediamo nell'immagine sottostante.

　　

// Possiamo vedere che viene chiamato compileToFunctions per trasformare il template in una funzione render. Ci sono due fasi:

• // Analisi del template in un albero di sintassi AST.
• // Generazione della funzione render tramite l'albero di sintassi AST.

// Specificamente, non parleremo qui della解析template in un albero di sintassi AST. Se avremo tempo, aprirò un capitolo a parte per analizzarlo. Bene, ora che abbiamo ottenuto la funzione render, cosa faremo poi? Senza dubbio, inizieremo con mountComponent. Ecco come appare nella figura sottostante:

　　

// Possiamo vedere dall'immagine che il programma dichiara un metodo updateComponent, che verrà chiamato dal metodo Watcher per aggiornare il componente. Vedremo questo più avanti quando analizzeremo Watcher. Riguardo al motivo per cui c'è una condizione che dichiara il metodo updateComponent, in realtà, come possiamo vedere dalla performance, uno dei metodi serve a testare le prestazioni di render e update. Finalmente siamo arrivati a Watcher, vediamo prima questo pezzo di codice:

// we set this to vm._watcher inside the watcher's constructor
// since the watcher's initial patch may call $forceUpdate (e.g. inside child
// component's mounted hook), which relies on vm._watcher being already defined
new Watcher(vm, updateComponent, noop, null, true /* isRenderWatcher */);

Prima di tutto, analizziamo cosa sia _watcher secondo i commenti. In realtà, guardando il codice di forceupdate lo si può sapere:

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

Ecco chiamare il metodo update del _watcher di questo vm. Utilizzato per aggiornare forzatamente. Perché si chiama aggiornamento forzato? Vue ha una giudiazione, se il nuovo valore == vecchio valore, allora non viene attivato l'aggiornamento della vista del watcher. Quindi, se si desidera aggiornare forzatamente, è necessario chiamare forceupdate per aggiornare forzatamente. Bene, diamo un'occhiata ai parametri passati:

• vm: l'istanza corrente vm
• updateComponent, molto importante, utilizzato per aggiornare il vnode sul dom in seguito.
• Funzione senza senso
• Opzione null, se non specificata è null
• true è principalmente utilizzato per determinare quale watcher. Poiché le proprietà calcolate e se si configurano i watcher nell'opzione utilizzano anche new Watcher, più questa viene utilizzata per distinguerli. Bene, vediamo cosa fa new Watcher, come nella figura seguente.
  

　

Prima di tutto, vediamo che c'è questa condizione:

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

Si può vedere che se l'ambiente del watcher è utilizzato per rendere la vista, ossia quando viene chiamato new Watcher qui in mountComponent, allora this viene assegnato a _watcher. Poi, il watcher viene pushato in _watchers, con lo scopo di distruggere anche il watcher quando il componente viene distrutto. Poi, viene inizializzato il membro del watcher, il codice è il seguente:

this.deep = this.user = this.lazy = this.sync = false;

Quindi, è il momento di assegnare a getter, this.getter = expOrFn. Ti ricordi della funzione updateComponent passata prima? Esatto, è questa assegnazione che viene fatta al getter. Poi, siamo arrivati a:

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

Entriamo nel metodo get, vediamo cosa fa. Il codice get è come segue:

　

Possiamo vedere che esegue prima pushTarget(this), il codice di pushTarget(this) è il seguente:

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

Quindi, se esiste Dep.target, mettiamo il target in targetStack, altrimenti lo impostiamo come il target corrente, ossia questo watcher. Poi eseguiamo il getter del suo attributo, che è l'updateComponent appena passato alla funzione. updateComponent è il passo terzo che abbiamo menzionato all'inizio.

Sommario

Come ha spiegato l'editor a tutti di $mount in Vue, speriamo che sia utile a tutti. Se avete qualsiasi domanda, lasciate un commento e l'editor risponderà prontamente. Ringraziamo anche tutti per il supporto al sito di tutorial呐喊!

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, è proprietà del rispettivo autore, il contenuto è stato contribuito volontariamente dagli utenti di Internet e caricato autonomamente, questo sito non detiene i diritti di proprietà, non è stato editato manualmente e non assume responsabilità legali correlate. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una email a notice#oldtoolbag.com (sostituisci # con @) per segnalare il problema, fornendo prove pertinenti. Una volta verificata la violazione, questo sito rimuoverà immediatamente il contenuto sospetto di violazione del copyright.