Vue實例創(chuàng)建和掛載的詳細過程

更新時間：2024年11月22日 09:11:43 作者：瘋狂的沙粒

在 Vue.js 中,實例的掛載是一個非常重要的過程,它決定了 Vue 實例如何與 DOM 進行交互,通過分析 Vue 源碼,特別是 Vue 的構(gòu)建函數(shù)和生命周期,我們可以了解掛載過程的詳細步驟,需要的朋友可以參考下

1. Vue 實例創(chuàng)建和掛載的過程概述

Vue 實例的掛載過程涉及多個關(guān)鍵步驟，包括創(chuàng)建實例、編譯模板、初始化數(shù)據(jù)和事件綁定等。它的核心流程大致如下：

初始化 Vue 實例：在 new Vue() 調(diào)用時，Vue 實例會創(chuàng)建并初始化相關(guān)的屬性，如 data、computed、methods 等。
初始化生命周期：Vue 會初始化生命周期鉤子，包括 beforeCreate、created、beforeMount、mounted 等。
編譯模板：Vue 會解析傳入的模板，生成虛擬 DOM（VNode）。
渲染：將虛擬 DOM 轉(zhuǎn)換為真實的 DOM，最終將 Vue 實例掛載到指定的 DOM 節(jié)點上。
更新：在響應(yīng)式數(shù)據(jù)變化時，Vue 會觸發(fā)更新，重新渲染組件。

2. 分析源碼：Vue 實例的創(chuàng)建與掛載過程

我們從 Vue 2.x 的源碼分析 Vue 實例的掛載過程。以下是大致的分析步驟。

2.1 Vue 實例的構(gòu)建函數(shù)

首先，我們來看 Vue 的構(gòu)建函數(shù)，它通常是通過 new Vue(options) 來實例化 Vue 對象的。options 對象包含了組件的配置項，比如 el、data、template 等。

function Vue(options) {
  if (process.env.NODE_ENV !== 'production' && !(this instanceof Vue)) {
    warn('Vue is a constructor and should be called with the `new` keyword');
  }
  this._init(options);
}

在構(gòu)造函數(shù)中，調(diào)用了 this._init(options)，也就是實例化時 Vue 會調(diào)用內(nèi)部的 _init 方法進行初始化。

2.2 Vue 的 _init 方法

Vue.prototype._init = function (options) {
  const vm = this;

  vm._uid = uid$1++; // 生成唯一 ID
  vm._isVue = true; // 標記 Vue 實例
  vm.$options = mergeOptions(
    resolveConstructorOptions(vm.constructor),
    options || {}
  ); // 合并構(gòu)造函數(shù)默認選項和用戶傳入的選項
  vm._renderProxy = vm; // 渲染代理
  vm._self = vm; // 指向自己
  initLifecycle(vm); // 初始化生命周期
  initEvents(vm); // 初始化事件
  initRender(vm); // 初始化渲染
  callHook(vm, 'beforeCreate'); // 調(diào)用生命周期鉤子 beforeCreate
  initState(vm); // 初始化數(shù)據(jù)、計算屬性等
  initInjections(vm); // 處理依賴注入
  callHook(vm, 'created'); // 調(diào)用生命周期鉤子 created
  if (vm.$options.el) {
    vm.$mount(vm.$options.el); // 掛載實例
  }
};

生命周期的初始化：在 _init 方法中，Vue 會進行生命周期的初始化，并調(diào)用 beforeCreate 和 created 鉤子。
渲染代理：_renderProxy 用于實現(xiàn)模板訪問 this 時的代理。
$mount：如果傳入了 el 選項，Vue 會調(diào)用 $mount 方法來掛載實例。

2.3 Vue 的 $mount 方法

掛載的核心方法是 $mount，它接受一個 DOM 元素或選擇器字符串，并將 Vue 實例與這個 DOM 節(jié)點進行綁定。

Vue.prototype.$mount = function (el, hydrating) {
  el = el && query(el); // 如果傳入了 el，進行選擇并獲取 DOM 元素
  if (el === document.body || el === document.documentElement) {
    warn('Do not mount Vue to <html> or <body> - mount to normal elements instead.');
    return;
  }
  const options = this.$options;
  if (!options.render) {
    let template = options.template;
    if (template) {
      if (typeof template === 'string') {
        // 編譯模板
        template = compileToFunctions(template, this);
      }
    } else if (el) {
      // 沒有模板時，從 DOM 中獲取內(nèi)容作為模板
      template = el.outerHTML;
    }
    options.render = template ? compileToFunctions(template, this) : createEmptyVNode;
  }
  return mountComponent(this, el, hydrating);
};

DOM 查詢：首先，el 被解析成 DOM 元素。
模板編譯：如果沒有傳入渲染函數(shù) (render)，Vue 會嘗試從模板字符串中編譯生成渲染函數(shù)。
mountComponent：最后，調(diào)用 mountComponent 來進行組件的掛載。

2.4 mountComponent 方法

mountComponent 是掛載組件的核心方法，它會調(diào)用 vm.$el 將實例掛載到指定的 DOM 上。

function mountComponent(vm, el, hydrating) {
  vm.$el = el;
  callHook(vm, 'beforeMount');
  let updateComponent;
  
  // 這里通過 render 函數(shù)來渲染視圖
  updateComponent = function () {
    vm._update(vm._render(), hydrating);
  };
  
  // 調(diào)用 Vue 的渲染函數(shù)，執(zhí)行視圖更新
  new Watcher(vm, updateComponent, noop, { before: callHook.bind(vm, 'beforeUpdate') }, true);
  callHook(vm, 'mounted');
  return vm;
}

調(diào)用 beforeMount：在渲染之前，會先執(zhí)行 beforeMount 生命周期鉤子。
渲染和更新：updateComponent 會觸發(fā) vm._update 方法進行視圖更新。_render() 是用于生成虛擬 DOM 的方法，它會調(diào)用渲染函數(shù)。
Watcher：Vue 通過 Watcher 來觀察響應(yīng)式數(shù)據(jù)的變化，并在數(shù)據(jù)變化時觸發(fā)更新。

2.5 Vue 的 _update 方法

_update 方法會根據(jù)虛擬 DOM 的變化，重新渲染并更新 DOM。

Vue.prototype._update = function (vnode, hydrating) {
  const vm = this;
  const prevEl = vm.$el;
  const prevVnode = vm._vnode;
  vm._vnode = vnode;
  if (!prevVnode) {
    // 初次渲染
    vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */);
  } else {
    // 更新渲染
    vm.$el = vm.__patch__(prevVnode, vnode);
  }
  // 更新生命周期鉤子
  callHook(vm, 'updated');
};

虛擬 DOM 比對：_update 會執(zhí)行虛擬 DOM 與真實 DOM 的比對，更新頁面內(nèi)容。
生命周期鉤子：更新后，會調(diào)用 updated 生命周期鉤子。

3. 總結(jié) Vue 實例掛載的過程

Vue 實例的掛載過程包含以下幾個主要步驟：

初始化實例：通過 new Vue(options) 創(chuàng)建 Vue 實例，調(diào)用 _init 方法進行初始化。
編譯模板：如果沒有傳入 render 函數(shù)，Vue 會通過模板字符串生成渲染函數(shù)。
掛載組件：通過 $mount 方法將 Vue 實例掛載到指定的 DOM 元素上。
渲染更新：通過 _update 方法更新 DOM，生成新的視圖。
生命周期鉤子：在每個階段會觸發(fā)相應(yīng)的生命周期鉤子函數(shù)（如 beforeCreate、created、beforeMount、mounted 等）。