Vue進階系列彙總如下,歡迎閱讀。
使用方法
外掛的詳細使用方法詳情看Vue官網
概括出來就是
- 1、通過
Vue.use(MyPlugin)
使用,本質上是呼叫MyPlugin.install(Vue)
- 2、使用外掛必須在
new Vue()
啟動應用之前完成,例項化之前就要配置好。 - 3、如果使用
Vue.use
多次註冊相同外掛,那隻會註冊成功一次。
原始碼解讀
Vue.use
原始碼如下
Vue.use = function (plugin) {
// 忽略已註冊外掛
if (plugin.installed) {
return
}
// 集合轉陣列,並去除第一個引數
var args = toArray(arguments, 1);
// 把this(即Vue)新增到陣列的第一個引數中
args.unshift(this);
// 呼叫install方法
if (typeof plugin.install === 'function') {
plugin.install.apply(plugin, args);
} else if (typeof plugin === 'function') {
plugin.apply(null, args);
}
// 註冊成功
plugin.installed = true;
return this;
};
複製程式碼
Vue.use
接受一個物件引數plugin
,首先判斷是否已註冊,如果多次註冊相同外掛那麼只會註冊成功一次,在註冊成功後設定plugin.installed = true
。
然後執行toArray(arguments, 1)
方法,arguments
是一個表示所有引數的類陣列物件,需要轉換成陣列之後才能使用陣列的方法。
function toArray (list, start) {
start = start || 0;
var i = list.length - start;
var ret = new Array(i);
// 迴圈去除 前start元素
while (i--) {
ret[i] = list[i + start];
}
return ret
}
複製程式碼
上面進行了一次轉換,假設list
是[1, 2, 3, 4],start
是1,首先建立一個包含3個元素的陣列,依次執行ret[2] = list[ 2 + 1]
、ret[1] = list[ 1 + 1]
、ret[0] = list[ 0 + 1]
,實際上就是去除arguments
的第一個引數然後把剩餘的類陣列賦值給新的陣列,其實就是去除plugin
引數,因為呼叫plugin.install
的時候不需要這個引數。
還可以通過如下幾種方式實現類陣列轉換成陣列,但是使用slice會阻止某些JavaScript引擎中的優化(參考自MDN)。
// ES5
var args = Array.prototype.slice.call(arguments);
var args = [].slice.call(arguments);
// ES6
const args = Array.from(arguments);
const args = [...arguments];
複製程式碼
轉換成陣列之後呼叫args.unshift(this)
,把Vue
物件新增到args的第一個引數中,這樣就可以在呼叫plugin.install
方法的時候把Vue
物件傳遞過去。
例項:實現一個外掛
要求建立一個告訴Vue元件處理自定義rules
規則選項的外掛,這個rules
需要一個物件,該物件指定元件中的資料的驗證規則。
示例:
const vm = new Vue({
data: { foo: 10 },
rules: {
foo: {
validate: value => value > 1,
message: 'foo must be greater than one'
}
}
})
vm.foo = 0 // 輸出 foo must be greater than one
複製程式碼
第一步先不考慮外掛,在已有的Vue
API中是沒有rules
這個公共方法的,如果要簡單實現的話可以通過鉤子函式來,即在created
裡面驗證邏輯。
const vm = new Vue({
data: { foo: 10 },
rules: {
foo: {
validate: value => value > 1,
message: 'foo must be greater than one'
}
},
created: function () {
// 驗證邏輯
const rules = this.$options.rules
if (rules) {
Object.keys(rules).forEach(key => {
// 取得所有規則
const { validate, message } = rules[key]
// 監聽,鍵是變數,值是函式
this.$watch(key, newValue => {
// 驗證規則
const valid = validate(newValue)
if (!valid) {
console.log(message)
}
})
})
}
}
})
複製程式碼
可以通過this.$options.rules
獲取到自定義的rules
物件,然後對所有規則遍歷,使用自定義的validate(newValue)
驗證規則。
第二步實現這個rules
外掛,為了在Vue
中直接使用,可以通過Vue.mixin
注入到Vue
元件中,這樣所有的Vue
例項都可以使用。
按照外掛的開發流程,應該有一個公開方法install
,在install
裡面使用全域性的mixin
方法新增一些元件選項,mixin
方法包含一個created
鉤子函式,在鉤子函式中驗證this.$options.rules
。
實現程式碼如下:
import Vue from 'vue'
// 定義外掛
const RulesPlugin = {
// 外掛應該有一個公開方法install
// 第一個引數是Vue 構造器
// 第二個引數是一個可選的選項物件
install (Vue) {
// 注入元件
Vue.mixin({
// 鉤子函式
created: function () {
// 驗證邏輯
const rules = this.$options.rules
if (rules) {
Object.keys(rules).forEach(key => {
// 取得所有規則
const { validate, message } = rules[key]
// 監聽,鍵是變數,值是函式
this.$watch(key, newValue => {
// 驗證規則
const valid = validate(newValue)
if (!valid) {
console.log(message)
}
})
})
}
}
})
}
}
// 呼叫外掛,實際上就是呼叫外掛的install方法
// 即RulesPlugin.install(Vue)
Vue.use(RulesPlugin)
複製程式碼
參考
交流
本人Github連結如下,歡迎各位Star
我是木易楊,網易高階前端工程師,跟著我每週重點攻克一個前端面試重難點。接下來讓我帶你走進高階前端的世界,在進階的路上,共勉!