兩者在使用效果上沒有任何區(qū)別，都是為了將實(shí)例化后的vue掛載到指定的dom元素中。

如果在實(shí)例化vue的時(shí)候指定el，則該vue將會(huì)渲染在此el對(duì)應(yīng)的dom中，反之，若沒有指定el，則vue實(shí)例會(huì)處于一種“未掛載”的狀態(tài)，此時(shí)可以通過$mount來手動(dòng)執(zhí)行掛載。

注：如果$mount沒有提供參數(shù)，模板將被渲染為文檔之外的的元素，并且你必須使用原生DOM API把它插入文檔中。

例如：

var MyComponent = Vue.extend({ template: ’<div>Hello!</div>’})// 創(chuàng)建并掛載到 #app (會(huì)替換 #app)new MyComponent().$mount(’#app’)// 同上new MyComponent({ el: ’#app’ })// 或者，在文檔之外渲染并且隨后掛載var component = new MyComponent().$mount()document.getElementById(’app’).appendChild(component.$el)

補(bǔ)充知識(shí)：Vue 實(shí)例掛載方法($mount)的實(shí)現(xiàn)

在 Vue 的 _init 方法中已經(jīng)回調(diào)了beforeCreate 和created這兩個(gè)生命周期鉤子，在此之后就進(jìn)行了實(shí)例的掛載

if (vm.$options.el) { // 掛載實(shí)例 vm.$mount(vm.$options.el); }

在掛載函數(shù)中，將要進(jìn)行 beforeMount 和 mounted 的回調(diào)。

在不同的平臺(tái)下對(duì)于 $mount 函數(shù)的實(shí)現(xiàn)是有差異的，下面考慮 web 平臺(tái)的 runtime-with-compiler 版本 ， 其在web平臺(tái)下的定義如下(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函數(shù)的參數(shù)中，第一個(gè)為我們屬性的el， 第二個(gè)參數(shù)為服務(wù)端渲染有關(guān)，在patch函數(shù)中用到，這里可以忽略。

但是在調(diào)用這個(gè)$mount函數(shù)的時(shí)候，首先調(diào)用的是不同版本下的$mount函數(shù)，然后在該函數(shù)中再調(diào)用相應(yīng)平臺(tái)的$mount函數(shù)，如下在 runtime-with-compiler 版本中$mount函數(shù)如下(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.documentElement) { return this; } const options = this.$options; if (!options.render) { // 如果沒有 render 函數(shù) // ... 將 render 函數(shù)添加到 options 上 const { render, staticRenderFns } = compileToFunctions(template, { outputSourceRange : process.env.NODE_ENV !== ’production’, shouldDecodeNewlines, shouldDecodeNewlinesForHref, delimiters : options.delimiters, comments : options.comments, }, this); options.render = render; options.staticRenderFns = staticRenderFns; // ... } return mount.call(this, el, hydrating);};

可知該函數(shù)主要干了三件事

1、由于掛載之后會(huì)替換被掛載的對(duì)象，所以限制不能掛載到 body 和 html 上

2、如果當(dāng)前Vue實(shí)例沒有 render() 函數(shù)（寫template等），則通過編譯等手段，將render函數(shù)添加到 options 上

3、調(diào)用在代碼開頭我們先緩存的$mount方法，該方法就是web平臺(tái)下的方法。

在web平臺(tái)下的$mount方法里面主要就是調(diào)用了mountComponent() 方法，接下來我們的核心就是該方法了

在’core/instance/lifecycle.js 文件中我們找到了該方法的定義，刪掉一些非重點(diǎn)代碼后如下

export function mountComponent( vm: Component, el: ?Element, hydrating?: boolean): Component { vm.$el = el; if (!vm.$options.render) { // 不是重點(diǎn)，該處主要是用來對(duì)沒有 render 函數(shù)下的一些錯(cuò)誤提示 } callHook(vm, ’beforeMount’); // 回調(diào) beforeMount , 開始準(zhǔn)備掛載實(shí)例 // 聲明 更新組件 的函數(shù) （源代碼中有關(guān)performance配置不是重點(diǎn)，故省略） const updateComponent = updateComponent = () => { vm._update(vm._render(), hydrating); }; // new 一個(gè) Watcher [isRenderWatcher] new Watcher(vm, updateComponent, noop, { before() { if (vm._isMounted && !vm._isDestroyed) { callHook(vm, ’beforeUpdate’); } }, }, true /* isRenderWatcher */); hydrating = false; // Vue 的根實(shí)例的 mounted 回調(diào)在這里執(zhí)行 if (vm.$vnode == null) { vm._isMounted = true; callHook(vm, ’mounted’); } return vm;}

上面的代碼中主要干了如下三件事

1、回調(diào) beforeMount

2、生成 updateComponent 方法，該方法將 vnode 渲染為真實(shí)的DOM

3、new 一個(gè) Watcher ，并在該 Watcher在調(diào)用updateComponent方法

4、回調(diào) mounted

對(duì)于 updateComponent方法較為復(fù)雜，其內(nèi)部主要調(diào)用_update()將 vnode渲染為瀏覽器上顯示的真實(shí)DOM

我們考慮如下兩個(gè)問題

1. Watcher 中如何調(diào)用 updateComponent方法

Watcher 函數(shù)的構(gòu)造函數(shù)接受如下的參數(shù)

constructor( vm: Component, expOrFn: string | Function, cb: Function, options?: ?Object, isRenderWatcher?: boolean )

在上面的代碼中，updateComponent()方法作為第二個(gè)參數(shù)傳遞過來，即構(gòu)造函數(shù)中的expOrFn

往下看會(huì)看到

if (typeof expOrFn === ’function’) { this.getter = expOrFn; }

也就是說updateComponent()方法被設(shè)置為了getter()方法

看到構(gòu)造函數(shù)的最后

this.value = this.lazy ? undefined : this.get();

其中 lazy 屬性的值在前面被設(shè)置為了 false

this.lazy = !!options.lazy; // 我們 options 中沒有 lazy 屬性

這也就是說，咋i構(gòu)造函數(shù)的末尾會(huì)調(diào)用this.get()，而在this.get()中

const vm = this.vm; try { value = this.getter.call(vm, vm); }

我們看到調(diào)用了getter()方法，也就是調(diào)用了updateComponent()方法。

2. 為什么根實(shí)例的$vnode為空

在initRender()函數(shù)中有如下代碼

const parentVnode = vm.$vnode = options._parentVnode;

也就是說 當(dāng)前實(shí)際的 $vnode 值為其父節(jié)點(diǎn)的vnode值

而根實(shí)例沒有父節(jié)點(diǎn)，故其$vnode值就為空了，所以會(huì)執(zhí)行

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

那么子節(jié)點(diǎn)的mounted回調(diào)是在那里執(zhí)行的呢？

在 path()(core/vdom/patch.js) 函數(shù)中有如下代碼

function invokeInsertHook(vnode, queue, initial) { if (isTrue(initial) && isDef(vnode.parent)) { vnode.parent.data.pendingInsert = queue; } else { for (let i = 0; i < queue.length; ++i) { queue[i].data.hook.insert(queue[i]); // 這里 } } }

在循環(huán)queue的時(shí)候，調(diào)用了 insert()方法，該方法為 VNodeHooks，其在componentVNodeHooks(core/vdom/create-component.js)中聲明，代碼如下

const componentVNodeHooks = { insert(vnode: MountedComponentVNode) { const { context, componentInstance } = vnode; if (!componentInstance._isMounted) { componentInstance._isMounted = true; callHook(componentInstance, ’mounted’); // 這里 } if (vnode.data.keepAlive) { if (context._isMounted) { queueActivatedComponent(componentInstance); } else { activateChildComponent(componentInstance, true /* direct */); } } },}

由于 path() 方法在 _update()函數(shù)中調(diào)用，這部不再重點(diǎn)說明。

下節(jié)我們將來說說render() 和 _update() 方法的實(shí)現(xiàn)

以上這篇vue $mount 和 el的區(qū)別說明就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。