Comment implémenter la vue de contrôle des données Vue (avec code)

Cette fois, je vais vous montrer comment implémenter la vue de contrôle des données vue (avec du code). Quelles sont les précautions pour l'implémentation de la vue de contrôle des données vue. Ce qui suit est un cas pratique, voyons. jetez un oeil.

Préface

Il y a trois mois, j'ai lu le code source de vue pour analyser comment obtenir des données réactives. L'article s'appelle Code source de vue pour les données réactives. les données changent, la méthode update() de Watcher sera appelée. Continuons donc à voir ce que fait update() après trois mois (j'ai réalisé un projet avec React-Native au cours des trois derniers mois, et je n'ai aucune intention. de le résumer. Parce que cela semble trop simple).

La méthode narrative de cet article est de suivre la logique de regarder le code source. La version de vue que j'ai vérifiée est la 2.5.2. du code source pour l'enregistrement Note.

Objectif

Dégagez la direction de l'enquête pour atteindre l'objectif Parlons d'abord du comportement cible : quelle méthode est exécutée pour. mettez à jour la vue après les modifications des données. Préparez-vous ensuite à commencer par Cette direction vise à trouver la réponse à partir de l'entrée du code source de la vue.

Commençons par la conclusion précédente

Commençons d'abord. passez en revue la conclusion précédente :

Lorsque Vue est construite, les objets Observer sont créés sur les données (et certains autres champs), les getters et les setters sont interceptés, les getters déclenchent la collecte de dépendances et les setters déclenchent la notification.

L'autre objet est Watcher, et watch sera appelé une fois lors de l'enregistrement de l'objet watch, déclenchant ainsi le getter de l'objet watch et collectant les dépendances dans les dépôts du Watcher actuel. Lorsqu'un setter de dep est déclenché, le. Le Watcher actuel sera informé d'appeler la méthode update() du Watcher

Ensuite, ici, commencez par enregistrer le Watcher lié au rendu

J'ai trouvé le fichier dans src/core/instance/lifecycle. .js.

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

mountComponent

Le Watcher lié au rendu est appelé dans la méthode mountComponent(), cherchons donc où cette méthode est appelée. seulement deux endroits, à savoir src/platforms/web/runtime/index.js et src/platforms /weex/runtime/index.js, en prenant le web comme exemple :

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

Il s'avère que c'est la méthode $mount() qui appelle mountComponent(), (ou le champ el sera automatiquement spécifié lors de la construction de vue. Appelez la méthode $mount()), car les objets de rendu de web et weex (qu'est-ce que weex ? J'ai introduit dans d'autres articles auparavant) sont différents, donc lors de la publication, différents fichiers doivent être introduits et finalement différentes listes ne peuvent pas être publiées (ce problème laissez-le étudier l'ensemble du processus de vue plus tard).

Ce qui suit est le Méthode mountComponent :

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
}

Ce code ne fait en réalité que 3 choses :

• Appeler avant le crochet de montage

• Créer un observateur

• Crochet monté sur appel

(ha Haha) En fait, l'essentiel est d'établir un observateur

Regardez le. paramètres du Watcher : vm c'est ça, updateComponent est une fonction, noop est vide, null est vide et true signifie RenderWatcher.

J'ai regardé isRenderWatcher dans Watcher :

if (isRenderWatcher) {
  vm._watcher = this
 }

Oui , je viens d'en faire une copie pour juger de quelque chose lorsque l'observateur corrige pour la première fois (d'après les commentaires, je ne sais pas encore)).

Ensuite, il n'y a qu'un seul problème qui reste non résolu, qui est qu'est-ce que updateComponent.

updateComponent

est dans le constructeur de Watcher Le deuxième paramètre de est passé à la fonction, puis cette fonction devient le getter de l'observateur . Si vous êtes intelligent, vous auriez dû deviner que les getters de toutes les données de la vue doivent être appelés dans ce updateComponent avant de pouvoir être établis dans l'observateur. La dépendance permet à la vue de répondre aux modifications des données.

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

Ensuite, allez dans vm._update() et vm._render().

Dans src/core/instance/render.js J'ai trouvé la méthode ._render()

<.>Cette méthode fait :

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

Génère un VNode basé sur la méthode de rendu de la machine virtuelle actuelle. (La méthode de rendu peut être basée sur Elle est compilée à partir d'un modèle ou d'un fichier vue, elle est donc déduit que l'écriture directe de la méthode de rendu est la plus efficace)
S'il y a un problème avec la méthode de rendu, appelez d'abord la méthode renderError, et si elle échoue, lisez le dernier vnode Ou null.
S'il existe un nœud parent, placez-le dans son propre attribut .parent.
Enfin, renvoyez VNode
Le noyau est donc cette phrase :

Je ne sais pas ce que sont render(), vm._renderProxy, vm.$createElement.

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

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

我们关心的部分其实就是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中文网其它相关文章！

推荐阅读：

el表达式怎样判断非空

ElTableColumn扩展方法详解

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!