當vue元件的$options屬性中具有el屬性將會在此元素上進行掛載內容。
if (vm.$options.el)對於runtime only版本的vue程式將會直接執行vue-master\src\platforms\web\runtime\index.js路徑下的vue.prototype.$mount所對應的的函式，對於runtime+compile版本的函式將會先執行vue-master\src\platforms\web\entry-runtime-with-compiler.js中的vue.prototype.$mount函式然後再執行vue-master\src\platforms\web\runtime\index.js路徑下的vue.prototype.$mount所對應的函式
講了一下runtime only和runtime+compile的區別之後我們繼續講解掛載執行的內容。
vue.prototype.$mount = function (
el?: string | element,
hydrating?: boolean
): component
export function mountcomponent (
vm: component,
el: ?element,
hydrating?: boolean
): component else
}} callhook(vm, 'beforemount')
let updatecomponent
/* istanbul ignore if */
if (process.env.node_env !== 'production' && config.performance && mark) `
const endtag = `vue-perf-end:$`
mark(starttag)
const vnode = vm._render()
mark(endtag)
measure(`vue $ render`, starttag, endtag)
mark(starttag)
vm._update(vnode, hydrating)
mark(endtag)
measure(`vue $ patch`, starttag, endtag)
}} else
} vm._watcher = new watcher(vm, updatecomponent, noop)
hydrating = false
if (vm.$vnode == null)
return vm
}
（1）是否具有渲染函式沒有則建立乙個空的虛擬節點，然後就呼叫beforemount函式，即完成和元件的初掛載。
（2）根據是否是發布模式設定元件更新函式。
（3）設定元件的***屬性為新建的***例項。
（4）根據元件的虛擬節點是否為null如果為null設定元件的掛載狀態並呼叫元件的mounted函式
（5）最後返回元件物件。
從上面可以看出在完成created之後便開始著手處理將元件掛載在dom上的過程，如果是runtime only基本上將直接完成beforemount過程這個過程基本上沒有做什麼操作就是獲取掛載元素。然後就是設定元件的更新函式然後設定元件的_watcher屬性如果元件的虛擬節點的值為null則進行呼叫元件的hook函式，可以看出元件的mount過程主要設設定元件的更新函式和設定元件的_watcher屬性。
具體的流程圖如下圖所示。
原始碼閱讀 Glide原始碼閱讀之with方法（一）
前言 本篇基於4.8.0版本 原始碼閱讀 glide原始碼閱讀之with方法 一 原始碼閱讀 glide原始碼閱讀之load方法 二 原始碼閱讀 glide原始碼閱讀之into方法 三 大多數情況下，我們使用glide 就一句 但是這一句 裡面蘊含著成噸的 with方法有以下幾個過載方法 publi...
vue原始碼閱讀（一）
之前想要研究下vue的原始碼 網上一般直接就上來甩出雙向繫結等等的函式 這次看原始碼 想從乙個漸進式的方向來解讀。當前版本基本上是最新的版本，18年6月的最新版，版本號是2.5.17 當我們接觸乙個專案或者乙個框架 在沒有交接文件的情況下 首先第一印象是啥？肯定是目錄 通過查資料和看 基本確定了這些...
vue原始碼閱讀（二）
那麼下邊這個則是例項化建構函式，也就是開始使用了，不管是作為框架，還是作為外掛程式，都需要new一下。翻篇回去，先看vue的建構函式，this.init options 是呼叫的第乙個方法，包括傳進來的引數options，不過在這之前，還判斷了下呼叫vue的是不是先new出來的。根據注入的檔案 找到...