从源码的角度分析Vue面试题[二]

如何在子组件中访问父组件的实例？

答案：通过$parent 就可以访问到父组件的实例了，除了$parent，我们还可以通过$children 访问子组件的实例。相信这个答案各位小伙伴都知道，但是这个$parent 和$children 是通过什么方式实现的呢，或者说，Vue 内部是如何建立这种父子组件关系的？

源码解析： 如果我们写一个组件 A，初始化组件的时候都会执行 A.$mount方法，将组件进行挂载，$mount 方法实际上会执行 mountComponent

export function mountComponent(
  vm: Component,
  el: ?Element,
  hydrating?: boolean
): Component {
  //...省略其他逻辑
  // 创建一个组件的渲染Watcher
  updateComponent = () => {
    vm._update(vm._render(), hydrating)
  }
  //...
  new Watcher(vm, updateComponent, noop, null, true /* isRenderWatcher */)
  //...省略其他逻辑
}

这个函数最关键的地方是创建了一个渲染 Watcher，其内部是执行了 vm._update(vm._render(), hydrating)，_render 主要就是返回一个 vnode，就是虚拟节点，然后_update 通过这个 vnode 去 patch 组件，那么我们看一下_update 做了什么事情

export let activeInstance: any = null
//...
Vue.prototype._update = function(vnode: VNode, hydrating?: boolean) {
  const vm: Component = this
  if (vm._isMounted) {
    callHook(vm, 'beforeUpdate')
  }
  const prevEl = vm.$el
  const prevVnode = vm._vnode
  const prevActiveInstance = activeInstance
  activeInstance = vm
  //...省略其他逻辑
  vm.$el = vm.__patch__(
    vm.$el,
    vnode,
    hydrating,
    false /* removeOnly */,
    vm.$options._parentElm,
    vm.$options._refElm
  )
  //...省略其他逻辑
  activeInstance = prevActiveInstance
}

这个函数外部定义了一个 activeInstance 变量，在执行_update 的时候通过const prevActiveInstance = activeInstance将 activeInstance 保存了起来，又通过activeInstance = vm把当前组件实例赋值给了 activeInstance，这个 activeInstance 是在函数外部定义的一个变量，其他文件也可以 import 这个变量，activeInstance 的作用稍后会讲到。我们先看下 patch，patch 过程比较复杂，我只讲和本题相关的一些逻辑，假设我们的组件 A 有一个子组件 A1，在 patch 的时候，将会执行到 A1 组件的 hook.init 函数

init(
    vnode: VNodeWithData,
    hydrating: boolean,
    parentElm: ?Node,
    refElm: ?Node
  ): ?boolean {
    if (
      vnode.componentInstance &&
      !vnode.componentInstance._isDestroyed &&
      vnode.data.keepAlive
    ) {
      // kept-alive components, treat as a patch
      const mountedNode: any = vnode // work around flow
      componentVNodeHooks.prepatch(mountedNode, mountedNode)
    } else {
      const child = vnode.componentInstance = createComponentInstanceForVnode(
        vnode,
        activeInstance,
        parentElm,
        refElm
      )
      child.$mount(hydrating ? vnode.elm : undefined, hydrating)
    }
  },

这里执行了 createComponentInstanceForVnode 这个函数，注意传入的第二个参数是 activeInstance，这个 activeInstance 是从 mountComponent 那引入的，在 mountComponent 的时候已经把这个变量设置成了 A，注意由于这个 init 函数初始化的是 A1 组件，那么对于 A1 组件来说，activeInstance 就是它的父组件。看下 createComponentInstanceForVnode 函数

export function createComponentInstanceForVnode(
  vnode: any, // we know it's MountedComponentVNode but flow doesn't
  parent: any, // activeInstance in lifecycle state
  parentElm?: ?Node,
  refElm?: ?Node
): Component {
  const options: InternalComponentOptions = {
    _isComponent: true,
    parent,
    _parentVnode: vnode,
    _parentElm: parentElm || null,
    _refElm: refElm || null
  }
  // check inline-template render functions
  const inlineTemplate = vnode.data.inlineTemplate
  if (isDef(inlineTemplate)) {
    options.render = inlineTemplate.render
    options.staticRenderFns = inlineTemplate.staticRenderFns
  }
  return new vnode.componentOptions.Ctor(options)
}

刚才那个 activeInstance 就是这个 parent 参数，然后又放在了 options 中，执行了 new vnode.componentOptions.Ctor(options)函数，这个 vnode.componentOptions.Ctor 是组件的构造函数，是在创建 vnode 时通过 Vue.extend 创建的，关于 Vue.extend 做的事情，可查看我上一篇文章，这个 Ctor 执行了这一段函数

function VueComponent(options) {
  this._init(options)
}

这里又回到了_init

Vue.prototype._init = function(options?: Object) {
  //...省略其他逻辑
  if (options && options._isComponent) {
    initInternalComponent(vm, options)
  } else {
    vm.$options = mergeOptions(
      resolveConstructorOptions(vm.constructor),
      options || {},
      vm
    )
  }
  //...省略其他逻辑
  initLifecycle(vm)
  //...省略其他逻辑
}

组件会执行到 initInternalComponent 函数

export function initInternalComponent(
  vm: Component,
  options: InternalComponentOptions
) {
  const opts = (vm.$options = Object.create(vm.constructor.options))
  // doing this because it's faster than dynamic enumeration.
  const parentVnode = options._parentVnode
  opts.parent = options.parent // 父Vnode,activeInstance
  opts._parentVnode = parentVnode // 占位符Vnode
  opts._parentElm = options._parentElm
  opts._refElm = options._refElm

  const vnodeComponentOptions = parentVnode.componentOptions // componentOptions是createComponent时候传入new Vnode()的
  opts.propsData = vnodeComponentOptions.propsData
  opts._parentListeners = vnodeComponentOptions.listeners
  opts._renderChildren = vnodeComponentOptions.children
  opts._componentTag = vnodeComponentOptions.tag

  if (options.render) {
    opts.render = options.render
    opts.staticRenderFns = options.staticRenderFns
  }
}

这里面有一段逻辑是 opts.parent = options.parent，就是把 options.parent 这个属性赋值给了 vm.$options，这里options.parent就是createComponentInstanceForVnode中的parent，也就是activeInstance，那么现在vm.$options.parent 就是 activeInstance。 执行完这些后再回到_init 中，我们看到下面还有一段函数 initLifecycle(vm)

export function initLifecycle(vm: Component) {
  const options = vm.$options

  // locate first non-abstract parent
  let parent = options.parent
  if (parent && !options.abstract) {
    while (parent.$options.abstract && parent.$parent) {
      parent = parent.$parent
    }
    parent.$children.push(vm)
  }

  vm.$parent = parent
  vm.$root = parent ? parent.$root : vm

  vm.$children = []
  vm.$refs = {}

  vm._watcher = null
  vm._inactive = null
  vm._directInactive = false
  vm._isMounted = false
  vm._isDestroyed = false
  vm._isBeingDestroyed = false
}

这里拿到了 vm.$options.parent，通过刚才的 initInternalComponent 我们可以知道，这个 parent 其实就是 activeInstance，然后又通过 parent.$children.push(vm)往parent的$children 中添加自己，又通过 vm.$parent = parent将parent赋值给$parent，所以这个时候，A1 的$parent就是A，A的$children 里面也会有 A1，执行完这些后，再回到最开始的 init 方法

init(
    vnode: VNodeWithData,
    hydrating: boolean,
    parentElm: ?Node,
    refElm: ?Node
  ): ?boolean {
    if (
      vnode.componentInstance &&
      !vnode.componentInstance._isDestroyed &&
      vnode.data.keepAlive
    ) {
      // kept-alive components, treat as a patch
      const mountedNode: any = vnode // work around flow
      componentVNodeHooks.prepatch(mountedNode, mountedNode)
    } else {
      const child = vnode.componentInstance = createComponentInstanceForVnode(
        vnode,
        activeInstance,
        parentElm,
        refElm
      )
      child.$mount(hydrating ? vnode.elm : undefined, hydrating)
    }
  },

这个 init 方法又执行了$mount 方法，接着又是 mountComponent > _update

Vue.prototype._update = function(vnode: VNode, hydrating?: boolean) {
  const vm: Component = this
  if (vm._isMounted) {
    callHook(vm, 'beforeUpdate')
  }
  const prevEl = vm.$el
  const prevVnode = vm._vnode
  const prevActiveInstance = activeInstance
  activeInstance = vm
  //...省略其他逻辑
  vm.$el = vm.__patch__(
    vm.$el,
    vnode,
    hydrating,
    false /* removeOnly */,
    vm.$options._parentElm,
    vm.$options._refElm
  )
  //...省略其他逻辑
  activeInstance = prevActiveInstance
}

注意这里仍然是在 A 的子组件 A1 中，_update 会执行 A1 的 patch，如果 A1 有子组件的话，就又会重复上面的操作，整个过程其实是一个递归的过程，每次递归都会对 activeInstance 赋值，最终在 patch 完成之后，会通过activeInstance = prevActiveInstance将 activeInstance 恢复，这样就可以确保 patch 过程中的 activeInstance 是父组件实例，patch 完成之后也不会影响其他逻辑，这样 Vue 就建立了层层的父子级关系。

vue 怎么实现强制刷新组件？

答案：Vue 提供了一个 API：$forceUpdate，可以强制渲染组件。

源码解析：Vue 内部会监听组件 data，并自动收集依赖，在属性发生变化时自动通知更新，触发组件的重新渲染。一般情况下，我们是不需要关心这个过程的，但有时我们想强制刷新视图，就要使用$forceUpdate 这个函数了，那这个函数做了什么事情呢，我们先来看下组件挂载过程的 mountComponent 函数

export function mountComponent(
  vm: Component,
  el: ?Element,
  hydrating?: boolean
): Component {
  //省略其他逻辑...
  updateComponent = () => {
    vm._update(vm._render(), hydrating)
  }
  //省略其他逻辑...
  new Watcher(vm, updateComponent, noop, null, true /* isRenderWatcher */)
  //省略其他逻辑...
}

我们只看和本题相关的逻辑，这里创建了一个 updateComponent 函数，然后又将 updateComponent 参数实例化了一个 Watcher，这个 updateComponent 函数的细节我就不展开讲了，总之我们在更新组件属性的后，Vue 内部也会执行到这个函数，使视图重新渲染。还有这个 Watcher 类比较多，我就不贴出来占地方了，与本题相关的关键的一个地方是下面这个

// class Watcher
if (isRenderWatcher) {
  vm._watcher = this
}

将组件实例的_watcher 属性指向了 watcher 本身。这样我们就可以通过 vm._watcher 访问到 watcher 了。除了上面这些操作之外，Vue 原型上还定义了$forceUpdate 方法

Vue.prototype.$forceUpdate = function() {
  const vm: Component = this
  if (vm._watcher) {
    vm._watcher.update()
  }
}

可以看到这个 forceUpdate 其实就是执行了 watcher 的 update，watcher.update()最终会执行到 updateComponent 函数，从而触发一次更新。

可以看到，$forceUpdate 其实就是主动触发一次更新操作，达到强制更新的目的。