脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue实例挂载流程

Vue实例从初始化到挂载的完整流程

 更新时间：2025年12月25日 09:50:15   作者：全栈陈序员  
本文详细解析了Vue实例从初始化到挂载的完整流程,首先通过new Vue()触发_init方法进行初始化,依次完成配置合并、生命周期/事件/渲染初始化,需要的朋友可以参考下

一、整体流程概览

当我们执行 new Vue({ ... }) 时，Vue 会经历 初始化 → 编译模板 → 挂载 DOM 三个阶段。整个过程由 _init 方法驱动，最终通过 $mount 完成视图渲染。

核心路径：
new Vue() → _init() → initState() → $mount() → mountComponent() → _render() → _update() → 真实 DOM

二、详细步骤解析

1. 构造函数与_init初始化

源码位置：src/core/instance/index.js

function Vue(options) {
  if (!(this instanceof Vue)) {
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
  this._init(options)
}
  • 调用 _init 是整个实例化的起点。
  • 在此之前，Vue 原型上已通过 mixin 注入了各类方法：
    • initMixin → 定义 _init
    • stateMixin → $set, $delete, $watch
    • eventsMixin → $on, $emit
    • lifecycleMixin → _update, $destroy
    • renderMixin → _render

2._init中的关键操作

源码位置：src/core/instance/init.js

Vue.prototype._init = function (options) {
  const vm = this;
  vm._uid = uid++;
  vm._isVue = true;

  // 合并配置（处理 mixins / extends）
  if (options && options._isComponent) {
    initInternalComponent(vm, options);
  } else {
    vm.$options = mergeOptions(
      resolveConstructorOptions(vm.constructor),
      options || {},
      vm
    );
  }

  // 初始化代理（开发环境）
  if (process.env.NODE_ENV !== 'production') {
    initProxy(vm);
  } else {
    vm._renderProxy = vm;
  }

  vm._self = vm;

  // 初始化生命周期、事件、渲染
  initLifecycle(vm);
  initEvents(vm);
  initRender(vm);

  callHook(vm, 'beforeCreate');

  // 初始化依赖注入（inject / provide）
  initInjections(vm);   // 在 data/props 之前
  initState(vm);        // 初始化 props, methods, data, computed, watch
  initProvide(vm);      // 在 data/props 之后

  callHook(vm, 'created');

  // 如果有 el，自动挂载
  if (vm.$options.el) {
    vm.$mount(vm.$options.el);
  }
}

关键结论：

  • beforeCreate 时：data / props 尚未初始化，无法访问；
  • created 时：数据已响应式化，但 DOM 还未生成，不能操作 $el；
  • 挂载由 $mount 触发。

3. 数据初始化：initState与initData

源码位置：src/core/instance/state.js

export function initState(vm) {
  vm._watchers = [];
  const opts = vm.$options;
  if (opts.props) initProps(vm, opts.props);
  if (opts.methods) initMethods(vm, opts.methods);
  if (opts.data) initData(vm);
  if (opts.computed) initComputed(vm, opts.computed);
  if (opts.watch) initWatch(vm, opts.watch);
}

function initData(vm) {
  let data = vm.$options.data;
  data = vm._data = typeof data === 'function'
    ? getData(data, vm)
    : data || {};

  // 校验 data 为纯对象
  if (!isPlainObject(data)) { /* warn */ }

  const keys = Object.keys(data);
  const props = vm.$options.props;
  const methods = vm.$options.methods;

  // 属性名冲突检查（data vs props/methods）
  for (let i = keys.length - 1; i >= 0; i--) {
    const key = keys[i];
    if (props && hasOwn(props, key)) { /* warn */ }
    else if (!isReserved(key)) {
      proxy(vm, '_data', key); // 通过 this.key 访问 vm._data[key]
    }
  }

  // 响应式化
  observe(data, true /* asRootData */);
}

重点：

  • 组件中 data 必须是函数（避免多实例共享对象）；
  • 通过 proxy 实现 this.message → this._data.message；
  • 最终调用 observe 将 data 转为响应式（基于 Object.defineProperty）。

4. 挂载阶段：$mount与模板编译

源码位置：src/platforms/web/entry-runtime-with-compiler.js

Vue.prototype.$mount = function (el, hydrating) {
  el = el && query(el);
  if (el === document.body || el === document.documentElement) {
    warn('Do not mount Vue to <html> or <body>');
    return this;
  }

  const options = this.$options;
  if (!options.render) {
    let template = options.template;
    if (template) {
      // 处理 string / element 类型的 template
    } else if (el) {
      template = getOuterHTML(el); // 从 el 提取 HTML
    }

    if (template) {
      // 编译 template → render 函数
      const { render, staticRenderFns } = compileToFunctions(template, {}, this);
      options.render = render;
      options.staticRenderFns = staticRenderFns;
    }
  }

  // 调用真正的 mount
  return mount.call(this, el, hydrating);
}

关键点：

  • 若无 render 函数，则尝试从 template 或 el 提取模板；
  • 通过 compileToFunctions 将模板编译为 render 函数；
  • 编译三步：HTML → AST → render 字符串 → render 函数。

5. 渲染组件：mountComponent

源码位置：src/core/instance/lifecycle.js

export function mountComponent(vm, el, hydrating) {
  vm.$el = el;

  if (!vm.$options.render) {
    vm.$options.render = createEmptyVNode;
    // 警告：运行时版本缺少编译器
  }

  callHook(vm, 'beforeMount');

  // 定义更新函数
  let updateComponent = () => {
    vm._update(vm._render(), hydrating);
  };

  // 创建渲染 Watcher（核心！）
  new Watcher(vm, updateComponent, noop, {
    before() {
      if (vm._isMounted && !vm._isDestroyed) {
        callHook(vm, 'beforeUpdate');
      }
    }
  }, true /* isRenderWatcher */);

  hydrating = false;

  if (vm.$vnode == null) {
    vm._isMounted = true;
    callHook(vm, 'mounted');
  }

  return vm;
}

✅ 核心机制：

  • 创建一个 渲染 Watcher，监听响应式数据变化；
  • 初次执行 updateComponent → 触发首次渲染；
  • 数据变更时，自动触发 beforeUpdate → 重新 _render → _update。

6. 生成 VNode 与更新 DOM

_render：生成虚拟 DOM

Vue.prototype._render = function () {
  const { render } = this.$options;
  let vnode;
  try {
    vnode = render.call(this._renderProxy, this.$createElement);
  } catch (e) { /* error handling */ }
  // 校验 vnode 合法性
  return vnode;
}

_update：将 VNode 转为真实 DOM

Vue.prototype._update = function (vnode, hydrating) {
  const vm = this;
  const prevVnode = vm._vnode;
  vm._vnode = vnode;

  if (!prevVnode) {
    // 初次挂载
    vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false);
  } else {
    // 更新
    vm.$el = vm.__patch__(prevVnode, vnode);
  }
}
  • __patch__ 是平台相关方法（Web 端为 patch 函数），负责 VNode diff + DOM 操作。

三、总结：挂载全过程

阶段关键动作生命周期钩子
初始化合并配置、初始化 props/data/methods/watchbeforeCreate → created
编译template → AST → render 函数—
挂载创建渲染 Watcher，首次执行 _render + _updatebeforeMount → mounted
更新数据变化 → 触发 Watcher → 重新渲染beforeUpdate → updated

一句话概括：
Vue 实例挂载的本质是——将响应式数据通过 render 函数生成 VNode，再通过 patch 算法高效更新到真实 DOM 上，整个过程由一个 渲染 Watcher 驱动。

以上就是Vue实例从初始化到挂载的完整流程的详细内容，更多关于Vue实例挂载流程的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • Vue2 响应式系统之深度响应

    Vue2 响应式系统之深度响应

    这篇文章主要介绍了Vue2 响应式系统之深度响应，文章基于Vue2 响应式系统的相关资料展开对Vue2 深度响应的介绍，需要的小伙伴可以参考一下
    2022-04-04
  • vue-dplayer视频播放器组件的使用详解

    vue-dplayer视频播放器组件的使用详解

    Vue-DPlayer是一个易于使用、高性能的基于Vue.js的视频播放器组件,这篇文章将为大家详细介绍一下vue-dplayer视频播放器组件的安装与使用,需要的小伙伴可以参考下
    2023-09-09
  • Ant Design Vue table中列超长显示...并加提示语的实例

    Ant Design Vue table中列超长显示...并加提示语的实例

    这篇文章主要介绍了Ant Design Vue table中列超长显示...并加提示语的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • vue实现pc端拍照上传功能

    vue实现pc端拍照上传功能

    这篇文章主要为大家详细介绍了vue实现pc端拍照上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • vue中LocalStorage与SessionStorage的区别与用法

    vue中LocalStorage与SessionStorage的区别与用法

    本文主要介绍了LocalStorage和SessionStorage。LocalStorage和SessionStorage是两种存储方式，本文详细的介绍一下区别以及用法，感兴趣的可以了解一下
    2021-09-09
  • vue通过点击事件读取音频文件的方法

    vue通过点击事件读取音频文件的方法

    最近做项目遇到这样的一个需求，通过select元素来选择音频文件的名称，点击按钮可以进行试听。接下来通过本文给大家介绍vue项目中通过点击事件读取音频文件的方法,需要的朋友可以参考下
    2018-05-05
  • 使用el-upload实现文件上传方式(包括预览,下载)

    使用el-upload实现文件上传方式(包括预览,下载)

    该文章介绍了两种文件上传、预览和下载的方法,分别是通过卡片形式和按钮形式,卡片形式中的下载和预览功能尚未完善,父组件使用了el-upload组件,可以实现新增、编辑和查看文件的功能
    2025-11-11
  • vue瀑布流组件实现上拉加载更多

    vue瀑布流组件实现上拉加载更多

    这篇文章主要为大家详细介绍了vue瀑布流组件实现上拉加载更多，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-03-03
  • 基于vue2.0的活动倒计时组件countdown(附源码下载)

    基于vue2.0的活动倒计时组件countdown(附源码下载)

    这是一款基于vue2.0的活动倒计时组件，可以使用服务端时间作为当前时间，在倒计时开始和结束时可以自定义回调函数。这篇文章主要介绍了基于vue2.0的活动倒计时组件countdown,需要的朋友可以参考下
    2018-10-10
  • Vue3中路由跳转优化技巧分享

    Vue3中路由跳转优化技巧分享

    这篇文章主要为大家详细介绍了Vue3中路由跳转的相关优化技巧,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以跟随小编一起学习一下
    2025-07-07

最新评论