很多人想看原始碼，但是不知道從哪一塊下手，所以這裡我說一下我是怎麼找入口的。
首先dist資料夾中有vue.js，這是已經被打包好的js檔案，src中的所有js**都合併到了這裡，我們直接去看這個vue.js肯定是會懵逼的，1w多行跳來跳去的，所以我們是不是要找到打包的入口？
那麼讓我們進入到scripts資料夾，因為這是打包的相關配置資料夾
我們這裡先看build.js
看10行左右的這裡 可以看到引入了config.js中所有的配置
// 把同級目錄下config的所有建立配置匯入
let builds =
require
('./config').
getallbuilds
()
// 開始打包
build
(builds)
看38行左右
// dist目錄中各種打包方式的定義
const builds =
//裡面是各種打包方式配置
這樣就來到了120行左右
// 瀏覽器要跑的版本
// runtime+compiler development build (browser)
'web-full-dev':,
banner
},
顯然，這個web是乙個別名，我們可以通過alias.js去查詢這個別名對應的目錄
進入alias.js
可以在第10行看到
web:
resolve
('src/platforms/web'
),
那麼入口函式的路徑已經出來了src/platforms/web/entry-runtime-with-compiler.js
接下來我們根據路徑開啟這個js檔案
路徑：vue-2.6.9\src\platforms\web\entry-runtime-with-compiler.js
這次分享就分析這乙個js檔案
將其幾個**塊摺疊一下，可以看到這檔案其實也就3個函式：
這裡是不是就遇到了我們平時見到的$mount,那我們就從這個$mount開始分析
// 擴充套件$mount 儲存老的$mount 老的$mount也會執行以前的操作
const mount = vue.prototype.$mount
// 進行的新的mount操作
vue.prototype.
$mount
=function
(// 傳入el，也就是掛載的元素節點
el?: string | element,
// todo: 等待分析 涉及服務端渲染
hydrating?
: boolean
): component
// 獲取配置的一些選項，也就是render template el那些
// 可從**中得到一些選項的優先順序：render>template>el
const options =
this
.$options
// resolve template/el and convert to render function
// 如果不存在render函式，就將template/el的設定轉換為render函式
// render優先順序非常高了，這些操作都是在沒有render的情況下進行的if(
!options.render)`,
this)}
}}else
if(template.nodetype)
else
return
this
}// 如果template不存在，獲取el
}else
if(el)
// 這裡對拿到的template進行編譯
if(template)
// 如果是模板字串，需要編譯器去編譯 也就是進入compiletofunctions這個函式
// 可以通過這個函式檢視編譯器的工作機制，也就是把template轉換為render:todo
const
=compiletofunctions
(template,
,this
)// 賦值給當前選項的render
options.render = render
options.staticrenderfns = staticrenderfns
/* istanbul ignore if */
if(process.env.
node_env
!=='production'
&& config.performance && mark)
compile`
,'compile'
,'compile end')}
}}// 執行老mount的操作 正常的掛載渲染過程
return mount.
call
(this
, el, hydrating)
}
首先會儲存老的$mount，然後進入函式，獲取el和options
判斷options.render是否存在，如果存在直接執行老$mount，中途那些東西都是在options.render不存在時執行的，因此可以看出render的優先順序非常高了
然後當options.render不存在時，就會先判斷template，再判斷el，優先順序由此可見：render>template>el
當然template還會被compile解析，這裡先留個todo，之後再去看compile是怎麼將template轉化為render函式的
這是我畫的乙個賊醜的圖，描述了一些過程
路徑：當前目錄
// 根據id查詢到el 並返回innerhtml
const idtotemplate =
cached
(id =>
)
// 獲取包括標籤的內容
function
getouterhtml
(el: element)
: string
else
}
/* @flow */
import
from
'core/util/index'
export
*from
'./attrs'
export
*from
'./class'
export
*from
'./element'
/** * query an element selector if it's not an element already.
*/export
function
query
(el: string | element)
: element
// 返回獲取到的節點
return selected
}else
}
下一次分享，我們將進入到vue初始化的那裡去探索，當然也是通過這個入口檔案去找到。怎麼去找到vue初始化那裡，先留個懸念在這。
vue原始碼閱讀（一）
之前想要研究下vue的原始碼 網上一般直接就上來甩出雙向繫結等等的函式 這次看原始碼 想從乙個漸進式的方向來解讀。當前版本基本上是最新的版本，18年6月的最新版，版本號是2.5.17 當我們接觸乙個專案或者乙個框架 在沒有交接文件的情況下 首先第一印象是啥？肯定是目錄 通過查資料和看 基本確定了這些...
vue2 0原始碼學習一（vue原始碼構建過程）
前提知識背景 vue.js的打包構建是基於rollup進行的 1.開啟專案的package.json，在裡面可以看到很多配置項以及命令，今天先學習 的構建，需要關注下圖地方 這裡使用的build命令就是平時在使用vue cli打包的時候觸發的命令，可以看到它其實是執行了乙個node程式，執行scri...
Vue原始碼解讀（二） Vue原始碼構建
vue.js 原始碼是基於 rollup 構建的，它的構建相關配置都在 scripts 錄下。通常 個基於 npm 託管的項 都會有 個 package.json 件，它是對項 的描述 件，它的內容實際上是 個標準的 json 物件。我們通常會配置 script 字段作為 npm 的執 指令碼，vu...