免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

打開APP
userphoto
未登錄

開通VIP,暢享免費電子書等14項超值服

開通VIP
Vue.use到底是什么鬼
userphoto

2022.05.03 北京

關注

我們在使用Vue做項目開發(fā)的時候,看到不少輪子都是通過Vue.use來進行使用,感覺甚是高大上。
不過Vue.use到底是什么鬼?不妨來看個究竟。

其實這些輪子都可以稱之為插件,它的功能范圍沒有嚴格的限制,一般包含如下幾種:

  1. 添加全局方法或者屬性。如: vue-custom-element

  2. 添加全局資源:指令/過濾器/過渡/組件等。如 vue-touch

  3. 通過全局混入來添加一些組件選項。如 vue-router

  4. 添加 Vue 實例方法,通過把它們添加到 Vue.prototype 上實現(xiàn)。

  5. 一個庫,提供自己的 API,同時提供上面提到的一個或多個功能。如 vue-router

無論大小,插件要實現(xiàn)的功能無非就是上述這幾種。但是,這并不妨礙我們創(chuàng)造出復雜的插件,不過我們還是希望給用戶提供一個簡單的使用方法,他不需要關注插件內部做了些什么。固Vue提供了use方法,專門來在new Vue()之前使用插件。

不管是官方提供的插件(例如vue-router、vuex),還是第三方的插件(例如ElementUI
ant)都是采用了此方式,不外乎插件內部的功能不同而已。當然,還有其他諸多此類插件,awesome-vue 就集合了大量由社區(qū)貢獻的插件和庫。

接下來,我們就來看下這個神秘的use方法是如何實現(xiàn)的。

Vue.js 的插件應該暴露一個 install 方法。這個方法的第一個參數(shù)是 Vue 構造器,第二個參數(shù)是一個可選的選項對象,用于傳入插件的配置:

一個插件內部大概就是如上所示,其實也不外乎上述那幾種東西,甚是簡單????。接下來我們就來看下真實的案例ElementUI:

我們不難發(fā)現(xiàn),其實自己來實現(xiàn)一個插件也是超級簡單,只要對外暴露一個install方法即可,在使用Vue.use的時候,會調用這個方法。所以我們只要將要實現(xiàn)的內容放到install內部即可。這樣的好處就是插件需要一開始調用的方法都封裝在install里面,更加精簡和可拓展性更高。

大家可能也有注意到,這里的install其實是將所有的組件全部引入了。作為一個龐大的插件庫,這樣可能會有一些性能問題。用過的ElementUI的同學都知道,它是支持按需引入的,其實在上面的示例中也可以發(fā)現(xiàn)一些蛛絲馬跡。

這里將每個組件都單獨都導出了,而在每個組件內部,也類似的暴露了install來組件每個組件,這樣就可以單獨Vue.use每個組件,從而實現(xiàn)按需引入的目的。

除了上述內容之外,還有幾點值得我們注意一下:

  • 插件傳入的如果是一個對象,則執(zhí)行其install方法,如果是一個函數(shù),則執(zhí)行它自身,并bind thisnull,然后傳入額外的參數(shù)

if (typeof plugin.install === 'function') {
  plugin.install.apply(plugin, args);
} else if (typeof plugin === 'function') {
  plugin.apply(null, args);
}
  • 如果插件沒有被注冊過,那么注冊成功之后會給插件添加一個installed的屬性,其值為true。Vue.use方法內部會檢測插件的installed屬性,從而避免重復注冊插件Vue.use

其實并不神秘,內部還是我們平時使用的這些東西,僅僅只是給他們套上了一層高端的外衣而已。我們在開發(fā)中,也可以嘗試使用這種方式,不僅簡單,而且有逼格????

本站僅提供存儲服務,所有內容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權內容,請點擊舉報。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
Vue 打包后自定義樣式無法覆蓋elementUI組件原有樣式問題
vue 248+個知識點(面試題)為你保駕護航
8年前端與眾不同的Vue實戰(zhàn)系列,助你成為前端頂級開發(fā)者
Vue NodeJS ElementUI 的簡單示例
vue-element組件安裝教程
Vue.js 使用 ElementUI
更多類似文章 >>
生活服務
分享 收藏 導長圖 關注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權!
如果VIP功能使用有故障,
可點擊這里聯(lián)系客服!

聯(lián)系客服