Analyse des Quellcodes der Vue-Datenkontrollansicht

Dieser Artikel bietet Ihnen eine detaillierte Analyse des Quellcodes der Vue-Datenkontrollansicht und kommentierte Schlüsselpunkte, die Sie als Referenz verwenden können.

Analysieren Sie, wie Vue Datenänderungen implementiert und Ansichten aktualisiert.

Vorwort

Ich habe den Vue-Quellcode vor drei Monaten gelesen und ihn analysiert Wie erreicht man reaktionsfähige Daten? Der Name des Artikels lautet Responsive Data im Vue-Quellcode. Lassen Sie uns abschließend analysieren, dass die update()-Methode von Watcher aufgerufen wird nach drei Monaten. (Ich habe in den letzten drei Monaten ein Projekt mit React-Native durchgeführt, aber ich habe nicht die Absicht, es zusammenzufassen, weil es zu einfach erscheint.) Folgen Sie der Logik des Betrachtens des Quellcodes. Die angezeigte Version von vue ist 2.5.2. Ich habe einen Quellcode erstellt, um Kommentare aufzuzeichnen 🎜>Legen Sie die Richtung der Untersuchung fest, um das Ziel zu erreichen. 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? Dann bereiten Sie sich darauf vor, mit dieser Richtung als Ziel zu beginnen und nach Antworten zu suchen Eingang des Vue-Quellcodes.

Beginnen Sie mit der vorherigen Schlussfolgerung

Lassen Sie uns zunächst die vorherigen Schlussfolgerungen überprüfen:
Wenn Vue erstellt wird, wird ein Observer-Objekt erstellt Auf Daten (und einigen anderen Feldern) erstellt, werden Getter und Setter abgefangen, und Getter löst Abhängigkeiten aus Sammlung, Setter löst Benachrichtigung aus.

Das andere Objekt ist Watcher, das Überwachungsobjekt Wird einmal aufgerufen, was den Getter des Watch-Objekts auslöst und die Abhängigkeiten in den Deps des aktuellen Watchers sammelt. Wenn der Setter eines Dep ausgelöst wird, wird der aktuelle Watcher benachrichtigt, die update()-Methode des Watchers aufzurufen >

Dann beginnen wir hier mit der Registrierung des Rendering-bezogenen Watchers.

Die Datei befindet sich in src/core/instance/lifecycle.js.

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

mountComponent

Der Rendering-bezogene Watcher wird in der mountComponent()-Methode aufgerufen. Suchen wir also, wo diese Methode aufgerufen wird. Es gibt nämlich nur zwei Stellen src/platforms/web/runtime/index.js und src/platforms/weex/runtime/ index.js, am Beispiel des Webs:

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

It Es stellt sich heraus, dass die $mount()-Methode mountComponent() aufruft (oder während der Vue-Konstruktion angegeben wird. Das EL-Feld ruft auch automatisch die $mount()-Methode auf), da die Rendering-Objekte von Web und Weex (was ist Weex? Ich habe Ich habe es bereits in anderen Artikeln vorgestellt. Daher sollten beim Veröffentlichen unterschiedliche Dateien eingeführt werden, und die endgültige Veröffentlichung wird nicht unterschiedlich sein (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 hat eigentlich nur drei Dinge getan:

BeforeMount aufrufen Haken

Beobachter erstellen

Anruf montierten Haken

• (hahaha) Dann ist der Kern tatsächlich um einen Watcher zu erstellen.
  Sehen Sie sich die Parameter des Watchers an: vm ist dies, updateComponent ist eine Funktion, noop ist leer, null bedeutet leer, true bedeutet RenderWatcher
• Ich habe mir isRenderWatcher angesehen im Watcher:

if (isRenderWatcher) {
  vm._watcher = this
 }

• Ja, ich habe es einfach kopiert und verwendet. Lasst uns etwas beurteilen, wenn der Watcher zum ersten Mal patcht (anhand der Kommentare habe ich immer noch Ich weiß nicht, was es tut). Wird im zweiten Parameter des Watcher-Konstruktors übergeben, wird diese Funktion zum Getter von Watcher. Wenn Sie schlau sind, sollten Sie es erraten haben. Ja, die Getter aller Daten in der Ansicht müssen in dieser updateComponent aufgerufen werden, damit Abhängigkeiten möglich sind im Watcher eingerichtet werden, damit die Ansicht auf Datenänderungen reagieren kann.

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

Suchen Sie dann nach vm._update() und vm._render().

Methode ._render() in src/core/instance/render.js gefunden.

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 macht:

Generieren Sie VNode basierend auf der Render-Methode der aktuellen VM (Die Render-Methode kann aus der Vorlage oder der Vue-Datei kompiliert werden. Daraus wird geschlossen, 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. Wenn dies fehlschlägt, lesen Sie den letzten Vnode oder Null.

Wenn es einen übergeordneten Knoten gibt, fügen Sie ihn in sein eigenes .parent-Attribut ein.

VNode schließlich zurückgeben

Der Kern ist also Folgendes Satz:

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

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

Schauen wir uns das an vm._renderProxy zuerst: Es wird während initMixin() festgelegt und gibt den Proxy in der Entwicklungsumgebung zurück. Dann denken wir, dass es sich um eine vm handelt, die debuggt werden kann (d. h. vm). Auf die Details später.

• Der Code von vm.$createElement befindet sich im vdom-Ordner. Nach dem Betrachten handelt es sich um eine Methode, die einen VNode zurückgibt. Das Mount-Ziel wird in die Renderfunktion analysiert.

Kleine Zusammenfassung: Der Rückgabewert von vm._render() ist VNode, basierend auf 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, der uns wichtig ist, ist eigentlich der __patch()-Teil, der die Operation am Dom ausführt und bestimmt, ob es sich um den ersten _update()-Aufruf handelt, falls ja , erstellen Sie einen neuen Dom. Wenn nicht, übergeben Sie den alten und den neuen Knoten zum Vergleich und führen Sie dann den Vorgang aus

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 gelangt?
Das Obige habe ich für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:



Ajax-domänenübergreifende Formularübermittlungsmethode (gleicher Basisdomänenname)

Implementierung von Ajax-Bildern auf Firefox-Upload




Ajax-Implementierungsmethode für den Popup-Ebeneneffekt beim Laden externer Seiten

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!