认识

2023年07月12日

柏拉文

越努力，越幸运

一、认识

vm._update(vnode, hydrating) 负责更新页面，是页面渲染的入口，其内部根据是否存在 prevVnode 来决定是首次渲染，还是页面更新，从而在调用 __patch__ 函数时传递不同的参数。

vm._update 的上下文如下:

定义 Vue.prototype._update 函数

Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
  vm._vnode = vnode
  if (!prevVnode) {
    vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
  } else {
    vm.$el = vm.__patch__(prevVnode, vnode)
  }
}

定义 updateComponent 函数, 包裹 vm._update()

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

实例化渲染Watcher时，传入 updateComponent

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

渲染 Watcher 中, 将 updateComponent 赋值给 getter

if (isFunction(expOrFn)) {
    this.getter = expOrFn
  } else {
    this.getter = parsePath(expOrFn)
    if (!this.getter) {
      this.getter = noop
      __DEV__ &&
        warn(
          `Failed watching path: "${expOrFn}" ` +
            'Watcher only accepts simple dot-delimited paths. ' +
            'For full control, use a function instead.',
          vm
        )
    }
}

一、认识​

一、认识