Vue3.0插件執(zhí)行原理與實(shí)戰(zhàn)
一、編寫插件
Vue項(xiàng)目能夠使用很多插件來(lái)豐富自己的功能，例如Vue-Router、Vuex……，這么多插件供我們使用，節(jié)省了我們大量的人力和物力，那這些插件是開發(fā)出來(lái)的呢?是不是我們自己也想擁有一個(gè)屬于自己的vue插件，下面就展示一下如何寫一個(gè)自己的Vue插件。
1.1 包含install()方法的Object
Vue插件可以是一個(gè)包含install方法的Object對(duì)象，此時(shí)插件被調(diào)用時(shí)會(huì)調(diào)用install方法，
如下所示：
export default {
// 接收兩個(gè)參數(shù)
// app: 應(yīng)用上下文的實(shí)例
// options：插件輸入的選項(xiàng)
install: (app, options) => {
console.log('app', app);
console.log('options', options);
// 做一些處理
// ……
}
}1.2 通過(guò)function的方式
Vue插件也可以是一個(gè)function函數(shù)，此時(shí)插件被調(diào)用時(shí)會(huì)調(diào)用function函數(shù)本身，
如下所示：
export default function TestPlugin(app, options) {
console.log('app', app);
console.log('options', options);
}二、使用插件
上述已經(jīng)闡述了如何編寫自己的插件，插件編寫完了之后就需要使用這些插件了，那這些插件應(yīng)該如何使用呢?其實(shí)用起來(lái)很簡(jiǎn)單，應(yīng)用上下文的實(shí)例上提供了對(duì)應(yīng)的use方法。
app.use(plugin, [options]); // 返回一個(gè)應(yīng)用實(shí)例，所以其可以鏈?zhǔn)教砑有碌牟寮?/pre>
三、app.use()是如何執(zhí)行插件的
為什么app.use()可以使用這些插件呢?本著“知其然而知其所以然”的精神，一起來(lái)扒一扒為什么。如下是對(duì)應(yīng)的源碼：
function createApp(rootComponent, rootProps = null) {
// ……
const installedPlugins = new Set();
const app = (context.app = {
// ……
use(plugin, ...options) {
if (installedPlugins.has(plugin)) {
warn(`Plugin has already been applied to target app.`);
}
else if (plugin && shared.isFunction(plugin.install)) {
installedPlugins.add(plugin);
plugin.install(app, ...options);
}
else if (shared.isFunction(plugin)) {
installedPlugins.add(plugin);
plugin(app, ...options);
}
else {
warn(`A plugin must either be a function or an object with an "install" ` +
`function.`);
}
return app;
},
// ……
});
return app;
};上述代碼讀起來(lái)很簡(jiǎn)單，其實(shí)現(xiàn)了以下幾件事情：
- 利用
Set結(jié)構(gòu)存儲(chǔ)插件，當(dāng)存在該插件時(shí)拋出異常; - 通過(guò)判斷是否存在
install方法或是否是函數(shù)，執(zhí)行對(duì)應(yīng)的插件; - 執(zhí)行插件時(shí)將
app上下文實(shí)例和options作為參數(shù)傳入;
到此這篇關(guān)于Vue3.0插件執(zhí)行原理與實(shí)戰(zhàn)的文章就介紹到這了,更多相關(guān)Vue插件執(zhí)行原理內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue Element-ui實(shí)現(xiàn)樹形控件節(jié)點(diǎn)添加圖標(biāo)詳解
這篇文章主要為大家介紹了Element-ui實(shí)現(xiàn)樹形控件節(jié)點(diǎn)添加圖標(biāo)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
Vue3使用時(shí)應(yīng)避免的10個(gè)錯(cuò)誤總結(jié)
Vue?3已經(jīng)穩(wěn)定了相當(dāng)長(zhǎng)一段時(shí)間了。許多代碼庫(kù)都在生產(chǎn)環(huán)境中使用它，其他人最終都將不得不遷移到Vue?3。我現(xiàn)在有機(jī)會(huì)使用它并記錄了我的錯(cuò)誤，下面這些錯(cuò)誤你可能想要避免2023-03-03
vue2從數(shù)據(jù)變化到視圖變化之diff算法圖文詳解
這篇文章主要介紹了vue2從數(shù)據(jù)變化到視圖變化之diff算法圖文詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
基于Vue3實(shí)現(xiàn)一個(gè)簡(jiǎn)單的方位動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了如何基于Vue3實(shí)現(xiàn)一個(gè)簡(jiǎn)單的方位動(dòng)畫,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02
Vue3 的ref和reactive的用法和區(qū)別示例解析
ref和reactive是Vue3中用來(lái)實(shí)現(xiàn)數(shù)據(jù)響應(yīng)式的API,一般情況下,ref定義基本數(shù)據(jù)類型,reactive定義引用數(shù)據(jù)類型,本文給大家介紹Vue3 的ref和reactive的用法和區(qū)別,感興趣的朋友一起看看吧2023-10-10
vue項(xiàng)目使用js監(jiān)聽瀏覽器關(guān)閉、刷新及后退事件的方法
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目使用js監(jiān)聽瀏覽器關(guān)閉、刷新及后退事件的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue選擇下拉框動(dòng)態(tài)變化表單方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了Vue 中 onclick和@click區(qū)別,簡(jiǎn)單點(diǎn)說(shuō)就是onclick 只能觸發(fā) js的原生方法,不能觸發(fā)vue的封裝方法,@click 只能觸發(fā)vue的封裝方法,不能觸發(fā)js的原生方法,需要的朋友可以參考下2024-02-02
vue?過(guò)濾、模糊查詢及計(jì)算屬性?computed詳解
計(jì)算屬性是vue里面為了簡(jiǎn)化在模板語(yǔ)法中對(duì)響應(yīng)式屬性做計(jì)算而存在的，這篇文章主要介紹了vue?過(guò)濾、模糊查詢（計(jì)算屬性?computed）,需要的朋友可以參考下2022-11-11
vue-video-player 斷點(diǎn)續(xù)播的實(shí)現(xiàn)
這篇文章主要介紹了vue-video-player 斷點(diǎn)續(xù)播的實(shí)現(xiàn),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-02-02