Analyse des Quellcodes der Vue-Datenkontrollansicht

Dieser Artikel stellt hauptsächlich die Analyse des Quellcodes der Vue-Datenkontrollansicht vor. Er hat einen gewissen Referenzwert. Jetzt kann ich ihn mit allen teilen, die ihn benötigen.

Analyse der Implementierung von Vue Datenänderungen und -aktualisierungen anzeigen.

Vorwort

Vor drei Monaten habe ich den Vue-Quellcode gelesen, um zu analysieren, wie reaktionsfähige Daten erzielt werden können data und schließlich analysiert, dass die update()-Methode von Watcher nach den Datenänderungen aufgerufen wird. Sehen wir uns also weiterhin an, was update() nach drei Monaten bewirkt ein Projekt, aber ich habe nicht die Absicht, dies zu tun, weil es zu einfach erscheint überprüft ist 2.5.2. Ich habe eine Kopie des Quellcodes erstellt.

Zweck

Die Richtung der Untersuchung festlegen Ziel. Lassen Sie uns zunächst über das Zielverhalten sprechen: Welche Methode wird ausgeführt, um die Ansicht zu aktualisieren, nachdem sich die Daten geändert haben? Bereiten Sie sich dann darauf vor, nach Antworten in diese Richtung zu suchen und beginnen Sie mit dem Eingang des Vue-Quellcodes.

Beginnen Sie aus der vorherigen Schlussfolgerung

Lassen Sie uns zuerst die vorherige Schlussfolgerung überprüfen:

Wenn Vue erstellt wird, wird ein Observer-Objekt für Daten (und einige andere Felder) erstellt. Der Getter und Setter werden abgefangen. Der Getter löst die Abhängigkeitssammlung aus und der Setter löst eine Benachrichtigung aus.

Ein anderes Das Objekt ist ein Watcher. Beim Registrieren einer Überwachung wird das Überwachungsobjekt einmal aufgerufen, wodurch der Getter der Überwachung ausgelöst wird Objekt und sammelt die Abhängigkeiten in den Deps des aktuellen Watchers. Wenn ein Setter des Dep ausgelöst wird, wird der aktuelle Watcher benachrichtigt, die Aktualisierung der Watcher()-Methode aufzurufen.

Dann Wir beginnen mit der Registrierung des Rendering-bezogenen Watchers.

Die Datei wurde in src/core/instance/lifecycle.js gefunden.

new Watcher(vm, updateComponent, noop, null, true /* isRenderWatcher */)

mountComponent

Der Rendering-bezogene Watcher wird in der mountComponent()-Methode aufgerufen. Suchen wir also nach dem Ort, an dem diese Methode aufgerufen wird. Es gibt jeweils nur 2 Orte: src/platforms/web/runtime/index.js und src/platforms /weex/runtime/index.js. Nehmen Sie das Web als Beispiel:

Vue.prototype.$mount = function (
 el?: string | Element,
 hydrating?: boolean
): Component {
 el = el && inBrowser ? query(el) : undefined
 return mountComponent(this, el, hydrating)
}

Es stellt sich heraus, dass es die Methode $mount() ist, die mountComponent() aufruft (oder das Feld el während der Vue-Konstruktion angibt). Rufen Sie automatisch die Methode $ mount () auf), da die von Web und Weex gerenderten Objekte (was ist Weex? Ich habe es bereits in anderen Artikeln vorgestellt) unterschiedlich sind. Daher sollte dies beim Veröffentlichen der Fall sein. Nach der Einführung unterschiedlicher Dateien sind unterschiedliche Dists nicht möglich gesendet werden (dieses Problem wird später dem Studium des gesamten Vue-Prozesses überlassen).

Das Folgende ist die mountComponent-Methode:

export function mountComponent (
 vm: Component,
 el: ?Element,
 hydrating?: boolean
): Component {
 vm.$el = el // 放一份el到自己的属性里
 if (!vm.$options.render) { // render应该经过处理了, 因为我们经常都是用template或者vue文件
 // 判断是否存在render函数, 如果没有就把render函数写成空VNode来避免红错, 并报出黄错
 vm.$options.render = createEmptyVNode
 if (process.env.NODE_ENV !== 'production') {
  /* istanbul ignore if */
  if ((vm.$options.template && vm.$options.template.charAt(0) !== '#') ||
  vm.$options.el || el) {
  warn(
   'You are using the runtime-only build of Vue where the template ' +
   'compiler is not available. Either pre-compile the templates into ' +
   'render functions, or use the compiler-included build.',
   vm
  )
  } else {
  warn(
   'Failed to mount component: template or render function not defined.',
   vm
  )
  }
 }
 }
 callHook(vm, 'beforeMount')

 let updateComponent
 /* istanbul ignore if */
 if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
 // 不看这里的代码了, 直接看else里的, 行为是一样的
 updateComponent = () => {
  const name = vm._name
  const id = vm._uid
  const startTag = `vue-perf-start:${id}`
  const endTag = `vue-perf-end:${id}`

  mark(startTag)
  const vnode = vm._render()
  mark(endTag)
  measure(`vue ${name} render`, startTag, endTag)

  mark(startTag)
  vm._update(vnode, hydrating)
  mark(endTag)
  measure(`vue ${name} patch`, startTag, endTag)
 }
 } else {
 updateComponent = () => {
  vm._update(vm._render(), hydrating)
 }
 }

 // 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
 // 注册一个Watcher
 new Watcher(vm, updateComponent, noop, null, true /* isRenderWatcher */)
 hydrating = false

 // manually mounted instance, call mounted on self
 // mounted is called for render-created child components in its inserted hook
 if (vm.$vnode == null) {
 vm._isMounted = true
 callHook(vm, 'mounted')
 }
 return vm
}

Dieser Code macht eigentlich nur drei Dinge:

Call beforeMount Hook
Build Watcher
Call Mounted Hook
(Hahaha) Dann besteht der Kern tatsächlich darin, einen Watcher zu erstellen.

Sehen Sie sich die Parameter des Watchers an: vm ist das, updateComponent ist eine Funktion, noop ist leer, null ist leer, true bedeutet RenderWatcher.

IsRenderWatcher im Watcher angeschaut:

if (isRenderWatcher) {
  vm._watcher = this
 }

Ja, ich habe gerade eine Kopie erstellt, um etwas zu beurteilen, wenn der Watcher zum ersten Mal patcht (aus den Kommentaren, die ich gelesen habe, weiß ich immer noch nicht). wissen, wofür es ist).

Dann gibt es nur ein ungelöstes Problem, nämlich das, was updateComponent ist.

updateComponent

Wenn Wenn Sie die Funktion als zweiten Parameter des Watcher-Konstruktors übergeben, wird diese Funktion zum Getter des Watchers. Wenn Sie schlau sind, sollten Sie erraten haben, dass alle Daten in der Ansicht in dieser Update-Komponente aufgerufen werden müssen damit die Ansicht auf Datenänderungen reagieren kann.

updateComponent = () => {
  vm._update(vm._render(), hydrating)
 }

Dann gehen Sie zu vm._update() und vm._render().

In src/core/instance/render.js wurde das gefunden ._render()-Methode.

Vue.prototype._render = function (): VNode {
 const vm: Component = this
 const { render, _parentVnode } = vm.$options // todo: render和_parentVnode的由来

 // reset _rendered flag on slots for duplicate slot check
 if (process.env.NODE_ENV !== 'production') {
  for (const key in vm.$slots) {
  // $flow-disable-line
  vm.$slots[key]._rendered = false
  }
 }

 if (_parentVnode) {
  vm.$scopedSlots = _parentVnode.data.scopedSlots || emptyObject
 }

 // set parent vnode. this allows render functions to have access
 // to the data on the placeholder node.
 vm.$vnode = _parentVnode
 // render self
 let vnode
 try {
  vnode = render.call(vm._renderProxy, vm.$createElement)
 } catch (e) {
  // catch其实不需要看了, 都是做异常处理, _vnode是在vm._update的时候保存的, 也就是上次的状态或是null(init的时候给的)
  handleError(e, vm, `render`)
  // return error render result,
  // or previous vnode to prevent render error causing blank component
  /* istanbul ignore else */
  if (process.env.NODE_ENV !== 'production') {
  if (vm.$options.renderError) {
   try {
   vnode = vm.$options.renderError.call(vm._renderProxy, vm.$createElement, e)
   } catch (e) {
   handleError(e, vm, `renderError`)
   vnode = vm._vnode
   }
  } else {
   vnode = vm._vnode
  }
  } else {
  vnode = vm._vnode
  }
 }
 // return empty vnode in case the render function errored out
 if (!(vnode instanceof VNode)) {
  if (process.env.NODE_ENV !== 'production' && Array.isArray(vnode)) {
  warn(
   'Multiple root nodes returned from render function. Render function ' +
   'should return a single root node.',
   vm
  )
  }
  vnode = createEmptyVNode()
 }
 // set parent
 vnode.parent = _parentVnode
 return vnode
 }
}

Diese Methode führt Folgendes aus:

Generiert VNode basierend auf der Render-Methode der aktuellen VM (Render-Methode). Es kann aus der kompiliert werden Vorlage oder Vue-Datei, daher wird gefolgert, dass das direkte Schreiben der Render-Methode am effizientesten ist)
Wenn es ein Problem mit der Render-Methode gibt, rufen Sie zuerst die renderError-Methode auf und Wenn es fehlschlägt, lesen Sie es. Der vnode dieses Mals ist entweder null.
Wenn es einen übergeordneten Knoten gibt, fügen Sie ihn in sein eigenes .parent-Attribut ein.
Endlich VNode zurückgeben
Der Kern ist also dieser Satz:

vnode = render.call(vm._renderProxy, vm.$createElement)

Ich weiß nicht, was render(), vm._renderProxy, vm. $createElement sind.

Schauen Sie sich zunächst vm._renderProxy an: Es wird während initMixin() festgelegt. Es gibt VM in der Produktionsumgebung zurück und gibt den Proxy in der Entwicklungsumgebung zurück das kann debuggt werden (also vm). Wir werden uns die Details später ansehen.

Der Code von vm.$createElement befindet sich im vdom-Ordner. Nach dem Betrachten handelt es sich um eine Methode, die a zurückgibt VNode.

Rendern ist etwas kompliziert. Ist es möglich, es später zu studieren? Kurz gesagt, es besteht darin, die Vorlage oder die Vue-Einzeldatei mit der Mount-Funktion zu kombinieren.

Kleine Zusammenfassung: Der Rückgabewert von vm._render() ist VNode entsprechend der Renderfunktion der aktuellen VM

Schauen wir uns vm._update() an

Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
 const vm: Component = this
 if (vm._isMounted) {
  callHook(vm, 'beforeUpdate')
 }
 // 记录update之前的状态
 const prevEl = vm.$el
 const prevVnode = vm._vnode
 const prevActiveInstance = activeInstance
 activeInstance = vm
 vm._vnode = vnode
 // Vue.prototype.__patch__ is injected in entry points
 // based on the rendering backend used.
 if (!prevVnode) { // 初次加载, 只有_update方法更新vm._vnode, 初始化是null
  // initial render
  vm.$el = vm.__patch__( // patch创建新dom
  vm.$el, vnode, hydrating, false /* removeOnly */,
  vm.$options._parentElm,
  vm.$options._refElm
  )
  // no need for the ref nodes after initial patch
  // this prevents keeping a detached DOM tree in memory (#5851)
  vm.$options._parentElm = vm.$options._refElm = null
 } else {
  // updates
  vm.$el = vm.__patch__(prevVnode, vnode) // patch更新dom
 }
 activeInstance = prevActiveInstance
 // update __vue__ reference
 if (prevEl) {
  prevEl.__vue__ = null
 }
 if (vm.$el) {
  vm.$el.__vue__ = vm
 }
 // if parent is an HOC, update its $el as well
 if (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) {
  vm.$parent.$el = vm.$el
 }
 // updated hook is called by the scheduler to ensure that children are
 // updated in a parent's updated hook.
 }

Der Teil, den wir Worum es geht, ist eigentlich der __patch()-Teil. In _update() wird beurteilt, ob es sich um den ersten Aufruf handelt. Wenn nicht, übergeben Sie ihn alte und neue Knoten vor dem Betrieb.

Fazit

Vues View-Rendering ist eine besondere Art von Watcher. Die Render-Funktion wird während des laufenden Prozesses der Funktion aufgerufen (die Vorlage enthält einige). beobachtete Objekte). Daher lösen Änderungen in den beobachteten Daten in der Vorlage die update()-Methode des Watchers aus, um die Ansicht neu zu rendern

Wo wird die Renderfunktion kompiliert?

Wie erfolgt die Einführung verschiedener Plattformen, wenn der Vue-Quellcode veröffentlicht wird und schließlich in dist aufgenommen wird? Analyse von __patch__ und VNode
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für Sie hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Über Vues Ideen zur Lösung von domänenübergreifenden Routing-Konflikten

Über Vue zum dynamischen Festlegen von Routing-Parametern Einführung

Über die Analyse des Vue Virtual Dom Patch-Quellcodes

Das obige ist der detaillierte Inhalt vonAnalyse des Quellcodes der Vue-Datenkontrollansicht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!