So implementieren Sie die Vue-Datenkontrollansicht (mit Code)-js-Tutorial-php.cn

Dieses Mal zeige ich Ihnen, wie Sie die Vue-Datenkontrollansicht implementieren (mit Code). Was sind die Vorsichtsmaßnahmen für die Implementierung der Vue-Datenkontrollansicht? Schauen Sie mal rein.

Vorwort

Vor drei Monaten habe ich den Vue-Quellcode gelesen, um zu analysieren, wie man reaktionsfähige Daten erhält Analyse Nachdem sich die Daten geändert haben, wird die update()-Methode von Watcher aufgerufen. Sehen wir uns also weiterhin an, was update() nach drei Monaten bewirkt (ich habe in den letzten drei Monaten ein Projekt mit React-Native durchgeführt). Ich habe nicht die Absicht, es zusammenzufassen.

Die erzählerische Methode dieses Artikels besteht darin, der Logik zu folgen, die ich überprüft habe, ist 2.5.2 eine Kopie des Quellcodes zum Aufzeichnen. Hinweis.

Zweck

Klaren Sie die Richtung der Untersuchung, um das Ziel zu erreichen: Was ist die Methode? Wird ausgeführt, um die Ansicht nach den Datenänderungen zu aktualisieren. Diese Richtung zielt darauf ab, die Antwort ab dem Eingang des Vue-Quellcodes zu finden.

Beginnen Sie mit der vorherigen Schlussfolgerung

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

Wenn Vue erstellt wird, werden Beobachterobjekte für Daten (und einige andere Felder) erstellt, Getter und Setter werden abgefangen, Getter lösen die Abhängigkeitssammlung aus und Setter lösen eine Benachrichtigung aus.

Das andere Objekt ist Watcher, und watch wird einmal aufgerufen, wenn ein Watch-Objekt registriert wird, wodurch der Getter des Watch-Objekts ausgelöst wird und die Abhängigkeiten in den Deps des aktuellen Watchers gesammelt werden, wenn ein Dep-Setter ausgelöst wird , der aktuelle Watcher wird benachrichtigt, die update()-Methode des Watchers aufzurufen.

Dann registrieren Sie hier zunächst den renderbezogenen Watcher.

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

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

Nach dem Login kopieren

mountComponent

Der Rendering-bezogene Watcher wird in der mountComponent()-Methode aufgerufen. Suchen wir also nach dem Ort, an dem diese Methode aufgerufen wird nur zwei Stellen, nämlich src/platforms/web/runtime/index.js und src/platforms/weex /runtime/index.js, am Beispiel von Web:

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

Nach dem Login kopieren

Es stellt sich heraus, dass es das $ ist Die mount()-Methode ruft mountComponent() auf (oder die Angabe des EL-Felds während der Vue-Konstruktion ruft automatisch auch die $mount()-Methode auf), da die Rendering-Objekte von Web und Weex (was ist Weex? Ich habe es in anderen eingeführt). Artikel zuvor) sind unterschiedlich, daher sollten beim Veröffentlichen unterschiedliche Dateien eingeführt werden und schließlich können unterschiedliche Dists nicht veröffentlicht werden (dieses Problem bleibt für später übrig). Studieren Sie den gesamten Prozess von vue.

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
}

Nach dem Login kopieren

Dieser Code macht eigentlich nur drei Dinge:

Anruf vor Mount Hook
Beobachter erstellen
Call Mounted Hook

(hahaha) Der Kern ist also Watcher.

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

Sehen Sie sich isRenderWatcher im Watcher an:

if (isRenderWatcher) {
  vm._watcher = this
 }

Nach dem Login kopieren

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

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

updateComponent

ist der zweite Parameter des -Konstruktors von Watcher. Wenn die Funktion übergeben wird, wird diese Funktion zum Getter des Watchers. Wenn Sie schlau sind, sollten Sie erraten haben, dass die Getter von Alle Daten in der Ansicht müssen in dieser updateComponent aufgerufen werden, damit Abhängigkeiten im Watcher hergestellt werden können, damit die Ansicht auf Datenänderungen reagieren kann.

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

Nach dem Login kopieren

Gehen Sie dann zu vm._update() und vm ._render().

Die Methode ._render() wurde 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
 }
}

Nach dem Login kopieren

Diese Methode bewirkt Folgendes:

Generieren Sie VNode basierend auf der Render-Methode der aktuellen VM (Die Render-Methode kann aus der Vorlage oder der Vue-Datei kompiliert werden, sodass die Schlussfolgerung direkt geschrieben wird. Die Render-Methode ist am effizientesten)
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 ein übergeordneter Knoten vorhanden ist , fügen Sie es in sein eigenes .parent-Attribut ein.
Endlich VNode zurückgeben

Der Kern ist also dieser Satz:

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

Nach dem Login kopieren

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

先看vm._renderProxy: 是initMixin()的时候设置的, 在生产环境返回vm, 开发环境返回代理, 那么我们认为他是一个可以debug的vm(就是vm), 细节之后再看.

vm.$createElement的代码在vdom文件夹下, 看了下是一个方法, 返回值一个VNode.

render有点复杂, 能不能以后研究, 总之就是把template或者vue单文件和mount目标parse成render函数.

小总结: vm._render()的返回值是VNode, 根据当前vm的render函数

接下来看vm._update()

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.
 }

Nach dem Login kopieren

我们关心的部分其实就是patch()的部分, patch()做了对dom的操作, 在_update()里判断了是否是初次调用, 如果是的话创建新dom, 不是的话传入新旧node进行比较再操作.

结论

vue的视图渲染是一种特殊的Watcher, watch的内容是一个函数, 函数运行的过程调用了render函数, render又是由template或者el的dom编译成的(template中含有一些被observe的数据). 所以template中被observe的数据有变化触发Watcher的update()方法就会重新渲染视图.

遗留

render函数是在哪里被编译的
vue源码发布时引入不同平台最后打成dist的流程是什么
patch和VNode的分析

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！