1. 程式人生 > >Vue原始碼之import Vue發生了什麼(一)

Vue原始碼之import Vue發生了什麼(一)

在使用vue之前,通常會import Vue from ''vue'

那分析原始碼的第一步,看看import Vue這個過程到底發生了什麼。

1. 首先,將vue原始碼從github中clone下來。然後在vue/src中檢視原始碼,在 web 應用下,我們來分析 Runtime + Compiler 構建出來的 Vue.js,對應的原始碼路徑是src/platforms/entry-runtime-with-compiler.js

在這個檔案中可以看到,在Vue的原型上掛載了方法,如$mount

文檔案的最後,匯出Vue


2.繼續向上一層,Vue是通過import Vue from './runtime/index'而來,


在這一層可以看到,Vue中進行了一些全域性config的配置,同時在原型上掛載了一些方法,如__patch__,$mount等

3.繼續向上一層,Vue是通過import Vue from 'core/index'而來


可以看到,在這一層,Vue主要通過initGlobalAPI完成了全域性API的初始化

4.再上一層,Vue來自‘./instance/index.js’


在這裡可以看到,Vue的定義是一個函式。定義成一個函式而不是一個類的好處是可以像Vue作者一樣將各個模組分塊,通過在原型上掛載等完成各個模組的功能。這樣更容易維護,同時結構也更清晰,如果使用ES6的class,不易寫出結構清晰的程式碼。

總結:

在import Vue的過程中,Vue主要是在原型上完成方法的掛載,並且初始化了全域性的API。