Vue 实例挂载方法($mount)的实现

最新推荐文章于 2022-10-19 15:58:58 发布

十木禾

最新推荐文章于 2022-10-19 15:58:58 发布

阅读量1.2w

点赞数 2

文章标签： Vue mount

本文链接：https://blog.csdn.net/zjq_1314520/article/details/88912218

版权

本文详细探讨了Vue实例的挂载方法$mount的实现过程，特别是在web平台下。从$mount的调用来龙去脉，到关键方法如render函数的生成和调用，再到组件的创建和真实DOM的生成，深入解析了Vue实例挂载的内部逻辑。同时，文中解释了为何根实例的el为空以及子节点的mounted回调如何执行。

摘要由CSDN通过智能技术生成

在 Vue 的 _init 方法中已经回调了beforeCreate 和created这两个生命周期钩子，在此之后就进行了实例的挂载

    if (vm.$options.el) {
    // 挂载实例
      vm.$mount(vm.$options.el);
    }

在挂载函数中，将要进行 beforeMount 和 mounted 的回调。

在不同的平台下对于 $mount 函数的实现是有差异的，下面考虑 web 平台的 runtime-with-compiler 版本，其在web平台下的定义如下(src/platforms/web/runtime/index.js)

import {
    mountComponent } from 'core/instance/lifecycle';

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

在$mount函数的参数中，第一个为我们属性的el，第二个参数为服务端渲染有关，在patch函数中用到，这里可以忽略。

但是在调用这个$mount函数的时候，首先调用的是不同版本下的$mount函数，然后在该函数中再调用相应平台的$mount函数，如下在 runtime-with-compiler 版本中$mount函数如下(src/platforms/web/entry-runtime-with-compiler.js)

import Vue from './runtime/index';

const mount = Vue.prototype.$mount; // 缓存 上面的 $mount 方法

Vue.prototype.$mount = function(
  el?: string | Element,
  hydrating?: boolean
): Component {
   
  el = el && query(el);

  // 不能挂载到 body 和 html 上
  if (el === document.body || el === document.documentEl