3-2-23-Vue.js 源码阅读-update

Vue 中的虚拟 DOM - update

通过上面的介绍知道了 vnode 的创建过程，下面分析 update 这个函数是如何将 vnode 转换成虚拟 DOM 的。

// updateComponent 的定义
// src/core/instance/lifecycle.js/mountComponent()
updateComponent = () => {
  // _render 将模板转换成虚拟DOM
  // _update 将生成的虚拟 DOM 转换成真实 DOM
  vm._update(vm._render(), hydrating)
}

vm._update

由上面的代码可以知道， vm._render() 生成的 vnode 直接作为了 vm._update 的参数传递给了 update 。下面是 vm._update() 函数的定义。

Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
  const vm: Component = this
  const prevEl = vm.$el
  // vm._vnode 存储的是之前处理过的 vnode 对象
  const prevVnode = vm._vnode
  const restoreActiveInstance = setActiveInstance(vm)
  vm._vnode = vnode
  // Vue.prototype.__patch__ is injected in entry points
  // Vue 原型上的 __patch__ 是在入口中注入的
  // based on the rendering backend used.
  if (!prevVnode) {
    // 如果不存在之前处理过的 vnode 说明是首次渲染。
    // initial render
    vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
  } else {
    // updates
    vm.$el = vm.__patch__(prevVnode, vnode)
  }
  restoreActiveInstance()
  // 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.
}

vm._update 就是判断了是否是首次渲染，通过判断结果决定调用 vm.patch 这个函数传入的参数。vm.patch 的作用就是通过 diff 算法对比虚拟 DOM 的差异，更新视图。所以，真正处理 vnode 的方法是 vm.patch 这个方法。下面分析 vm.patch 这个方法的实现过程。

vm.__patch__

• snabbdom 中的 vnode 回顾

• snabbdom 中的 patch 回顾

patch 函数是由 init 函数返回的，这里用到了函数柯里化，在 init 函数中先传入了 modules（模块处理属性事件样式等） 和 domApi（操作 DOM 的api） 这两个参数。先把这两个参数通过闭包的方式进行缓存最后返回一个 patch 函数在将来调用 patch 的时候就不需要关心模块和调用 api 的方法。

• Vue 中的 patch 方法

这个方法定义在 src/platforms/web/runtime/index…js

import { patch } from './patch'
// install platform patch function
// 把虚拟 DOM 转换成真实 DOM； noop 是一个空函数
Vue.prototype.__patch__ = inBrowser ? patch : noop

// patch.js
import { createPatchFunction } from 'core/vdom/patch'
export const patch: Function = createPatchFunction({ nodeOps, modules })

可以看出 Vue 中的 path 函数，也是一个柯里化的函数，是由一个高阶函数 createPatchFunction 生成的一个函数。

• nodeOps 这个参数就是一些 domApi
• modules 包含两部分
  • baseModules 处理指令和 ref 的模块
  • platformModules 操作属性、事件、样式、过渡动画等模块