vue原始碼2 mount掛載

vue中是通過$mount函式來掛載vm的，$mount和平台、構建方式都有關係

以下是對compiler版本的分析

首先函式定義在src/platform/web/entry-runtime-with-compiler.js中

const mount =vue.prototype.$mount //這裡快取了runtime-only版本的$mount

vue.prototype.$mount = function
( el?: string |element,
hydrating?: boolean
): component 
const options = this
.$options
//resolve template/el and convert to render function
if (!options.render) `,
this
) }}} 
else
if(template.nodetype) 
else
return
this
} } 
else
if(el) 
if(template) 
const =compiletofunctions(template, , 
this
) options.render =render
options.staticrenderfns =staticrenderfns
/*istanbul ignore if 
*/if (process.env.node_env !== 'production' && config.performance &&mark) compile`, 'compile', 'compile end')}}
} return mount.call(this
, el, hydrating)//呼叫runtime-only版本的$mount實現掛載
}

1.快取runtime-only版本的$mount，具體定義在src/platform/web/runtime/index.js中

vue.prototype.$mount = function

( el?: string |element,
hydrating?: boolean
): component

本質上是通過呼叫mountcomponent函式來實現，該函式的定義是在src/core/instance/lifecycle.js中

export function

mountcomponent (
vm: component,
el: ?element,
hydrating?: boolean
): component 
else
}} callhook(vm, 'beforemount')
let updatecomponent //定義updatecomponent
/*istanbul ignore if 
*/if (process.env.node_env !== 'production' && config.performance &&mark) ` //效能相關
const endtag = `vue-perf-end:$`
mark(starttag)
const vnode =vm._render() //呼叫一次render函式,生成虛擬dom
mark(endtag)
measure(`vue $ render`, starttag, endtag)
mark(starttag)
vm._update(vnode, hydrating) //呼叫_update。執行一次實際的渲染
mark(endtag)
measure(`vue $ patch`, starttag, endtag)}} 
else
} //we set this to vm._watcher inside the watcher's constructor
//since the watcher's initial patch may call $forceupdate (e.g. inside child
//component's mounted hook), which relies on vm._watcher being already defined
newwatcher(vm, updatecomponent, noop, 
}}, 
true
/*isrenderwatcher */)
hydrating = false
//manually mounted instance, call mounted on self
//mounted is called for render-created child components in its inserted hook
if (vm.$vnode == null
) 
return
vm}

2.通過query函式查詢el。query定義在src/platform/web/util/index.js

export function query (el: string |element): element 

return
selected
} else
}

3.對el進行乙個判斷，確保el不是body或者html節點

4.通過el或template生成render函式

5.呼叫runtime-only版本的$mount掛載

Vue原始碼之 mount實現資料掛載（三）

在vue例項中，通過 mount 實現例項的掛載，下面來分析一下 mount 函式都實現了什麼功能。在 src platforms web entry runtime with compiler mount函式在vue的原型上被定義 1.首先，提取出el所對應的dom元素。其中的query函式的主要...

2 磁碟掛載命令（mount）

1.載入光碟機或者u盤方法1 sudo fdisk l 得到u盤的路徑 sudo mount dev sdb1 mnt c 將u盤掛載到路徑 mnt c中 cd mnt c 可以訪問到u盤裡的內容 2.載入光碟機或者u盤方法2 sudo fdisk l 得到u盤的路徑 mount t vfat de...

Vue原始碼閱讀之11掛載過程概述

當vue元件的 options屬性中具有el屬性將會在此元素上進行掛載內容。if vm.options.el 在掛載這裡就要區分vue的乙個概念，runtime only和runtime compile，乙個最主要的特徵是runtime only的vue物件中有渲染函式而runtime compil...