vue 中我們是通過$mount例項方法去掛載vm的，$mount方法在多個檔案中都有定義，如src/platform/web/entry-runtime-with-compiler.js、src/platform/web/runtime/index.js、src/platform/weex/runtime/index.js。因為$mount這個方法的實現是和平台、構建方式都相關的。接下來我們重點分析帶compiler版本的$mount實現，因為拋開 webpack 的 vue-loader，我們在純前端瀏覽器環境分析 vue 的工作原理，有助於我們對原理理解的深入。
compiler版本的$mount實現非常有意思，先來看一下src/platform/web/entry-runtime-with-compiler.js檔案中定義：
const mount = vue.prototype.$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
Vue實現tab標題切換例項
方法 一 html部分布局 html部分 如下所示 標題二標題三 標題四 內容一 內容二內容三 內容四給選中部分加css樣式 css部分 如下所示 li.hx activity引入vue.js實現效果 js部分 如下所示 new vue 方法 二 menulist for item,index in...
Vue原始碼之 mount實現資料掛載（三）
在vue例項中，通過 mount 實現例項的掛載，下面來分析一下 mount 函式都實現了什麼功能。在 src platforms web entry runtime with compiler mount函式在vue的原型上被定義 1.首先，提取出el所對應的dom元素。其中的query函式的主要...
簡述Vue的例項屬性 例項方法
1 例項屬性 dom訪問 資料訪問 2 例項方法 第乙個引數 選擇器字串或者dom元素 第二個引數 callback 函式，成功插入到目標元素後被觸發 並且如果el應用了過渡效果，則 在過渡完成後觸發 第乙個引數 選擇器字串或者dom元素 第二個引數 callback 函式，成功插入到目標元素後被觸...