文章首次發表在 個人部落格
vue提供了 Vue.use 的全域性api來註冊外掛，瞭解它的內部實現，無論是看外掛的原始碼，還是自己寫外掛，都會輕鬆很多。
Vue.use用法
vue提供了 Vue.use 的全域性api來註冊外掛，比如 vuex、vue-router等
用法
Vue.use(plugin)
- 引數如果是一個物件，必須提供 install 方法
- 引數如果是一個函式，自身會被當做install方法，方法呼叫的時候，會將vue作為引數傳入
- Vue.use(plugin) 呼叫之後，外掛會的 install方法會預設接受第一個引數，這個引數是vue
這個方法需要在 new vue() 之前呼叫。
Vue.use 會自動阻止多次註冊相同外掛，即使呼叫多次也只會註冊一次。
Vue.use原始碼分析
我們可以從原始碼入手分析一下，基於vue 2.6.11 版本，原始碼地址為：src/core/global-api/use.js
export function initUse (Vue: GlobalAPI) {
// 接受一個plugin引數，限制為 Function | Object兩種型別
Vue.use = function (plugin: Function | Object) {
// _installedPlugins 儲存所有註冊過的 plugin
const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
// 儲存註冊元件的陣列，不存在則建立，存在則直接返回，不允許重複註冊
if (installedPlugins.indexOf(plugin) > -1) {
return this
}
// additional parameters
// 將傳入的引數轉換成陣列
const args = toArray(arguments, 1)
// 將Vue物件拼接到陣列頭部
args.unshift(this)
// 如果提供了 install 方法，則直接呼叫
if (typeof plugin.install === 'function') {
// 如果元件是物件，且提供install方法，呼叫install方法將引數陣列傳入，改變`this`指標為該元件
plugin.install.apply(plugin, args)
} else if (typeof plugin === 'function') {
// 否則直接執行
plugin.apply(null, args)
}
// 將plugin儲存到 installedPlugins，表示y已經註冊過
installedPlugins.push(plugin)
return this
}
}
複製程式碼/**
* Convert an Array-like object to a real Array.
*/
export function toArray (list: any, start?: number): Array<any> {
start = start || 0
let i = list.length - start
const ret: Array<any> = new Array(i)
while (i--) {
ret[i] = list[i + start]
}
return ret
}
複製程式碼Vue.use主要做了兩件事
-
檢查外掛是否已經註冊，註冊過得不需要重複註冊
-
沒有註冊的，呼叫外掛的
install方法（引數是物件，則呼叫物件的install方法，如果是函式，則直接當做install方法呼叫）, 同時將Vue作為第一個引數傳入
Vue-Router中的 install
基於 vue-router3.1.6 版本，原始碼位置： src/install.js
import View from './components/view'
import Link from './components/link'
/*
export 一個 Vue 引用，在打包的時候不希望把 Vue作為依賴包打進去，但是又希望可以使用 Vue提供的一些方法，
*/
export let _Vue
// Vue.use安裝外掛時候需要暴露的install方法
export function install (Vue) {
// 判斷是否已安裝過
if (install.installed && _Vue === Vue) return
install.installed = true
_Vue = Vue
const isDef = v => v !== undefined
const registerInstance = (vm, callVal) => {
let i = vm.$options._parentVnode
if (isDef(i) && isDef(i = i.data) && isDef(i = i.registerRouteInstance)) {
i(vm, callVal)
}
}
// 混入 beforeCreate
Vue.mixin({
beforeCreate () {
// 在option上面存在router則代表是根元件
if (isDef(this.$options.router)) {
this._routerRoot = this
// 根元件的_router屬性為，new Vue傳進去的router
this._router = this.$options.router
// 執行 init方法
this._router.init(this)
// 通過defineReactive方法，來把this._router.history.current變成響應式的，這個方法的底層就是object.defineProperty
Vue.util.defineReactive(this, '_route', this._router.history.current)
} else {
// 如果該元件不是根元件，那麼遞迴往上找，直到找到根元件的。
this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
}
registerInstance(this, this)
},
destroyed () {
registerInstance(this)
}
})
/*
下面通過給 Vue.prototype定義$router、$route屬性後，所有的Vue例項（元件）都可以直接訪問到
*/
// 設定代理，訪問 this.$router 時直接代理到 this._routerRoot._router
Object.defineProperty(Vue.prototype, '$router', {
get () { return this._routerRoot._router }
})
// 設定代理，訪問 this.$route 時直接代理到 this._routerRoot._route
Object.defineProperty(Vue.prototype, '$route', {
get () { return this._routerRoot._route }
})
// 註冊 router-view 和 router-link 元件
Vue.component('RouterView', View)
Vue.component('RouterLink', Link)
const strats = Vue.config.optionMergeStrategies
// use the same hook merging strategy for route hooks
strats.beforeRouteEnter = strats.beforeRouteLeave = strats.beforeRouteUpdate = strats.created
}
複製程式碼vue-router中的install方法主要做了以下幾件事：
-
通過
mixin混入的方式，如果是根元件，則直接把根元件的_router設定為this.$options.router -
如果不是根元件，那麼遞迴往上找，直到找到根元件的，使用
_routerRoot標記 -
通過給
Vue.prototype定義$router、$route屬性後，使得所有的Vue例項（元件）都可以直接訪問到$router、$route屬性 -
註冊
<router-link>、<router-view>元件
參考
其他
最近發起了一個100天前端進階計劃，主要是深挖每個知識點背後的原理，歡迎關注 微信公眾號「牧碼的星星」，我們一起學習，打卡100天。