element plus 虚拟触发

初次探索

什么是虚拟dom

Vue 通过建立一个虚拟 DOM 对真实 DOM 发生的变化保持追踪。请仔细看这行代码：

return createElement('h1', this.blogTitle)
复制代码

createElement 到底会返回什么呢？其实不是一个实际的 DOM 元素。它更准确的名字可能是 createNodeDescription，因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点，及其子节点。我们把这样的节点描述为“虚拟节点 (Virtual Node)”，也常简写它为“VNode”。“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼。

以上这段对虚拟Dom的简短介绍来自Vue的官网

第一个断点

我们一开始的断点先打在app.vue的两个hook上：

export default {
    name: 'app',
    created () {
        debugger
    },
    mounted () {
        debugger
    }
}
复制代码

刷新页面，此时调用栈中显示的函数跟预想中的不太一样：

在created这个hook执行之前，多出了一些比较奇怪的函数：

• createComponentInstanceForVnode
• Vue._update
• mountComponent

?看完以后我心中出现了一个疑问：

为什么在created钩子执行之前就出现了mountComponent这个方法，到底是文档出问题了，还是文档出问题了呢？带着这个疑惑我们接着往下看

mountComponent做了什么？

通过上面打第一个断点，其实不难看出这样的执行顺序（从上往下）：

• (annoymous)
• Vue.$mount
• mountComponent

(annoymous)这步其实就是在执行我们的main.js，代码很短：

...
new Vue({
    render: h => h(App)
}).$mount('#app')
复制代码

Vue.$mount

Vue.prototype.$mount = function (
    el,
    hydrating
) {
    // 判断是否处于浏览器的环境
    el = el && inBrowser ? query(el) : undefined;
    // 执行mountComponent
    return mountComponent(this, el, hydrating)
};
复制代码

mountComponent

function mountComponent (
  vm,
  el,
  hydrating
) {
  vm.$el = el;
  if (!vm.$options.render) {
    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');

  var updateComponent;
  /* istanbul ignore if */
  // 这里对测试环境跟正式环境的updateComponent 做了实现上的一个区分
  if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
    updateComponent = function () {
      var name = vm._name;
      var id = vm._uid;
      var startTag = "vue-perf-start:" + id;
      var endTag = "vue-perf-end:" + id;

      mark(startTag);
      var 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 = function () {
      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

  new Watcher(vm, updateComponent, noop, {
    before: function before () {
      if (vm._isMounted && !vm._isDestroyed) {
        callHook(vm, 'beforeUpdate');
      }
    }
  }, 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
}
复制代码

简单罗列下上面这两段代码的逻辑?：

• 调用beforeMount钩子函数
• 封装一个updateComponent函数
• 执行new Watcher并将updateComponent当做参数传入
• 调用vm._update方法

_update方法是如何被触发的？

Watcher

var Watcher = function Watcher (
  vm,
  expOrFn,
  cb,
  options,
  isRenderWatcher
) {
  ...
  // 将函数赋值给this.getter，这里是updateComponent函数
  if (typeof expOrFn === 'function') {
    this.getter = expOrFn;
  } else {
    this.getter = parsePath(expOrFn);
    if (!this.getter) {
      this.getter = noop;
      process.env.NODE_ENV !== 'production' && warn(
        "Failed watching path: \"" + expOrFn + "\" " +
        'Watcher only accepts simple dot-delimited paths. ' +
        'For full control, use a function instead.',
        vm
      );
    }
  }
  // 根据this.lazy决定是否触发get方法
  this.value = this.lazy
    ? undefined
    : this.get();
};
Watcher.prototype.get = function get () {
  pushTarget(this);
  var value;
  var vm = this.vm;
  try {
    // 这里调用getter方法，实际上也就是调用updateComponent方法并拿到返回值
    value = this.getter.call(vm, vm);
  } catch (e) {
    if (this.user) {
      handleError(e, vm, ("getter for watcher \"" + (this.expression) + "\""));
    } else {
      throw e
    }
  } finally {
    // "touch" every property so they are all tracked as
    // dependencies for deep watching
    if (this.deep) {
      traverse(value);
    }
    popTarget();
    this.cleanupDeps();
  }
  // 返回函数（updateComponent）执行结果
  return value
};
复制代码

简单梳理下上面这段代码的逻辑：

• 新建Watcher实例时，将updateComponent赋值给getter属性
• 通过this.get方法，触发updateComponent函数
• 最终拿到函数的执行结果

小结

通过上面的分析我们可以初步得出一个结论：

组件的渲染跟Watcher离不开关系，父组件在执行完created钩子函数之后，会调用updateComponent函数对子组件进行处理

深入研究

如果前面你动手跟着断点一直走，那么不难得知存在这样的调用关系（从上往下）：

• ...
• mountComponent
• Watcher
• get
• updateComponent
• Vue._update
• patch
• createElm
• createComponent
• init
• createComponentInstanceForVnode
• VueComponent
• Vue._init
• callHook
• invokeWithErrorHandling
• created

Vue.prototype._update

Vue.prototype._update = function (vnode, hydrating) {
    var vm = this;
    var prevEl = vm.$el;
    var prevVnode = vm._vnode;
    // 重存储当前父实例
    var restoreActiveInstance = setActiveInstance(vm);
    vm._vnode = vnode;
    // Vue.prototype.__patch__ is injected in entry points
    // based on the rendering backend used.
    if (!prevVnode) {
      // initial render
      vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */);
    } else {
      // 执行patch函数
      vm.$el = vm.__patch__(prevVnode, vnode);
    }
    restoreActiveInstance();
    ...
  };
复制代码

当然，我们通过全局检索可以得知_patch函数相关的代码?:

// 只在浏览器环境下patch函数有效
Vue.prototype.__patch__ = inBrowser ? patch : noop;
复制代码

var patch = createPatchFunction({ nodeOps: nodeOps, modules: modules });
function createPatchFunction (backend) {
    ...
    return function patch (oldVnode, vnode, hydrating, removeOnly) {
        ...
    }
}
复制代码

这里先不深究patch的实现，我们只要知道patch是使用createPatchFunction来生成的一个闭包函数即可。

子组件的渲染

我们注意到，在子组件created钩子执行之前存在一个init方法?:

var componentVNodeHooks = {
  init: function init (vnode, hydrating) {
    if (
      vnode.componentInstance &&
      !vnode.componentInstance._isDestroyed &&
      vnode.data.keepAlive
    ) {
      // kept-alive components, treat as a patch
      var mountedNode = vnode; // work around flow
      componentVNodeHooks.prepatch(mountedNode, mountedNode);
    } else {
      // 创建子组件实例
      var child = vnode.componentInstance = createComponentInstanceForVnode(
        vnode,
        activeInstance
      );
      // 对子组件执行$mount方法
      child.$mount(hydrating ? vnode.elm : undefined, hydrating);
    }
  },
  ...
复制代码

相关代码：

createComponentInstanceForVnode

function createComponentInstanceForVnode (
  vnode, // we know it's MountedComponentVNode but flow doesn't
  parent // activeInstance in lifecycle state
) {
  // 初始化一个子组件的vnode配置
  var options = {
    _isComponent: true,
    _parentVnode: vnode,
    parent: parent
  };
  // 检查render函数内是否有template模板
  var inlineTemplate = vnode.data.inlineTemplate;
  if (isDef(inlineTemplate)) {
    options.render = inlineTemplate.render;
    options.staticRenderFns = inlineTemplate.staticRenderFns;
  }
  // 返回子组件实例
  return new vnode.componentOptions.Ctor(options)
}
复制代码

总结

1. 存在子组件时，先初始化父组件，在created钩子执行之后，生成子组件的vnode实例
2. 子组件的created钩子执行完，检查子组件是否也有子组件
3. 子组件也存在子组件时，则重复1，否则直接执行$mount函数，渲染子组件

扫描下方的二维码或搜索「tony老师的前端补习班」关注我的微信公众号，那么就可以第一时间收到我的最新文章。