最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

解析Vue.use()是干什么的

 更新時間:2022年06月08日 14:33:04   作者:lazy_tomato  
今天通過本文給大家分享Vue.use是什么,主要包括vueEsign?插件的install是什么,element-ui的install是什么,為什么有的庫就不需要使用Vue.use,對vue.use()相關(guān)知識感興趣的朋友一起看看吧

start

  • 前幾天使用了一個別人封裝的電子簽名組件:vueEsign。
  • 在初始化的時候有這么一行代碼:Vue.use(vueEsign)
  • 之前使用element-ui,也需要使用Vue.use()
  • 這行代碼到底是什么?學(xué)習(xí)一下。

本文所有演示內(nèi)容,vue.js版本為2.6.14

1. Vue.use是什么,了解一下!?

1.1 main.js中的Vue.use()

import Vue from 'vue'
import App from './App.vue'
import router from './router'


import vueEsign from 'vue-esign'
Vue.use(vueEsign)

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

1.2 簡單解釋一下這里的import的邏輯,

  • 如果from后面是路徑,直接沿路徑去尋找對應(yīng)文件。
  • 如果from后面是一個名稱,那就引入是第三方模塊,會去node_modules中尋找對應(yīng)名稱的文件夾。

node_modulespackage.jsonmain屬性

1.3 Vue.use()代碼

找到對應(yīng)文件

對應(yīng)代碼

  function initUse (Vue) {

  // 1. Vue.use是一個函數(shù)
  Vue.use = function (plugin) {

    // 2. 定義一個數(shù)組 如果this._installedPlugin不存在,會執(zhí)行`this._installedPlugins = []
    var installedPlugins = (this._installedPlugins || (this._installedPlugins = []));

    // 3. 判斷是否已經(jīng)注冊了,已經(jīng)注冊了直接return
    if (installedPlugins.indexOf(plugin) > -1) {
      return this
    }
    
    
    // 4.獲取其他參數(shù)  例如: Vue.use(plugin,a,b,c) 中的 a b c
    var args = toArray(arguments, 1);

    // 5.參數(shù)第一項,加一個Vue實例進去
    args.unshift(this);

    // 6. plugin 有 install 這個方法
    if (typeof plugin.install === 'function') {
      // 7. 執(zhí)行一下install,再把參數(shù)傳遞進去  (可以看插件的install方法,接受第一個參數(shù),就是Vue實例)
      plugin.install.apply(plugin, args);
    } else if (typeof plugin === 'function') {
      // 8. 如果plugin 本身就是函數(shù) 直接執(zhí)行
      plugin.apply(null, args);
    }

    // 9. 來一個數(shù)組存儲已經(jīng)注冊的插件
    installedPlugins.push(plugin);
    
    return this
  };
}

2. 看一下 vueEsign 插件的install是什么?

node_modules\vue-esign\src\idnex.js
// 1. 引入一個vue組件,實際上就是一個對象
import vueEsign from './index.vue'

// 2.對象install屬性是一個方法,它接受一個參數(shù) Vue
vueEsign.install = function (Vue) {

  // 3. 判斷是否已經(jīng)安裝了這個插件(這里this指向為vueEsign,在Vue.use中用apply改寫的)
  if (this.installed) {
    return
  }
  this.installed = true

  // 4. 在Vue上注冊一下組件
  Vue.component('vueEsign', vueEsign)
}
export default vueEsign

3.看一下 element-ui的install是什么?

node_modules\element-ui\src\index.js
// 1. 它也是一個函數(shù)
const install = function(Vue, opts = {}) {
  // 2.讀取了部分其他本地化配置
  locale.use(opts.locale);
  locale.i18n(opts.i18n);

  // 3.components就是element-ui的組件組成的數(shù)組,遍歷一下,在Vue上注冊了這些組件。  
  // (??!可以發(fā)現(xiàn)這里和另一個插件有相同點,都是在install的第一個參數(shù)Vue上注冊組件,)
  components.forEach(component => {
    Vue.component(component.name, component);
  });
  
  // 4. 這里的 Vue.use 原理是一樣的(可以對照截圖,它這里后續(xù)是在Vue上注冊了指令)
  Vue.use(InfiniteScroll);
  Vue.use(Loading.directive);

  // 5.下面都是在Vue原型上掛載屬性或方法
  Vue.prototype.$ELEMENT = {
    size: opts.size || '',
    zIndex: opts.zIndex || 2000
  };

  Vue.prototype.$loading = Loading.service;
  Vue.prototype.$msgbox = MessageBox;
  Vue.prototype.$alert = MessageBox.alert;
  Vue.prototype.$confirm = MessageBox.confirm;
  Vue.prototype.$prompt = MessageBox.prompt;
  Vue.prototype.$notify = Notification;
  Vue.prototype.$message = Message;

};

4. Vue.use() 總結(jié)

  1. 首先 Vue.use 本身是一個函數(shù);
  2. Vue.use這個函數(shù)做了這些操作:
  • 判斷插件是否注冊;
  • 如果插件自帶insatll屬性,執(zhí)行它,同時傳遞一個Vue構(gòu)造函數(shù)作為第一個參數(shù),以及use中的其他參數(shù);
  • 如果插件本身就是函數(shù),執(zhí)行它,同時傳遞一個Vue構(gòu)造函數(shù)作為第一個參數(shù),以及use中的其他參數(shù)
  • 記錄這個插件已經(jīng)注冊;

3.暫時遇到的插件本身都是一個對象,然后install中都會拿到傳遞來的Vue構(gòu)造函數(shù)進行一些綁定操作。例如綁定組件,例如在原型上添加方法。

5.為什么有的庫就不需要使用Vue.use

例如常見的aixos引入

import axios from 'axios'
Vue.prototype.$axios=axios

axios本身是不依賴Vue去運行的,axios本身就可以在瀏覽器端或者node端都能進行http請求。

這里掛載到Vue原型的$axios屬性上,只是為了方便使用。

end

  • 感覺就是 組件 需要和 Vue構(gòu)造函數(shù) 進行交互的時候,才需要Vue.use()。
  • 本質(zhì)就是傳遞一個 Vue構(gòu)造函數(shù) 給插件使用,僅此而已。

到此這篇關(guān)于Vue.use()是干什么的的文章就介紹到這了,更多相關(guān)Vue.use()內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue 遞歸多級菜單的實例代碼

    Vue 遞歸多級菜單的實例代碼

    這篇文章主要介紹了Vue 遞歸多級菜單的實例代碼,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-05-05
  • Vue編寫自定義Plugin詳解

    Vue編寫自定義Plugin詳解

    這篇文章主要介紹了Vue編寫自定義Plugin詳解,在Vue開發(fā)中,我們經(jīng)常需要使用一些第三方庫或功能性模塊,Vue插件就是一種將這些庫或模塊集成到Vue應(yīng)用中的方式,插件是Vue.js提供的一種機制,用于擴展Vue的功能,需要的朋友可以參考下
    2023-08-08
  • Vue-CLI3.x 設(shè)置反向代理的方法

    Vue-CLI3.x 設(shè)置反向代理的方法

    這篇文章主要介紹了Vue-CLI3.x 設(shè)置反向代理的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-12-12
  • vue中添加音頻和視頻的示例詳解

    vue中添加音頻和視頻的示例詳解

    這篇文章主要為大家詳細介紹了如何vue中添加音頻和視頻的相關(guān)知識,文中的示例代碼簡潔易懂,具有一定的學(xué)習(xí)價值,感興趣的小伙伴可以了解下
    2023-08-08
  • 前端必知必會之Vue?$emit()方法詳解

    前端必知必會之Vue?$emit()方法詳解

    這篇文章主要介紹了前端必知必會之Vue?$emit()方法的相關(guān)資料,Vue.js中的$emit()方法用于在子組件中創(chuàng)建自定義事件,并在父組件中捕獲這些事件,這在需要從子組件向父組件傳遞信息的大型項目中非常有用,需要的朋友可以參考下
    2025-02-02
  • vue中如何安裝使用jquery

    vue中如何安裝使用jquery

    這篇文章主要介紹了vue中如何安裝使用jquery的教程,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-04-04
  • Vue實現(xiàn)選擇城市功能

    Vue實現(xiàn)選擇城市功能

    這篇文章主要介紹了Vue實現(xiàn)選擇城市功能,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2017-05-05
  • vue2中Print.js的使用超詳細講解(pdf、html、json、image)

    vue2中Print.js的使用超詳細講解(pdf、html、json、image)

    項目中有用到打印功能,網(wǎng)上就找了print.js,下面這篇文章主要給大家介紹了關(guān)于vue2中Print.js使用(pdf、html、json、image)的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
    2024-03-03
  • vue 實現(xiàn)通過vuex 存儲值 在不同界面使用

    vue 實現(xiàn)通過vuex 存儲值 在不同界面使用

    今天小編就為大家分享一篇vue 實現(xiàn)通過vuex 存儲值 在不同界面使用,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • vue-mounted中如何處理data數(shù)據(jù)

    vue-mounted中如何處理data數(shù)據(jù)

    這篇文章主要介紹了vue-mounted中如何處理data數(shù)據(jù)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03

最新評論

张家川| 商丘市| 沙田区| 申扎县| 渝中区| 准格尔旗| 黎平县| 东海县| 乌拉特后旗| 来宾市| 格尔木市| 绥芬河市| 观塘区| 桂东县| 辉县市| 丰城市| 台北县| 北海市| 大埔县| 扶沟县| 潍坊市| 怀柔区| 九龙城区| 应城市| 固镇县| 稷山县| 苗栗县| 翁牛特旗| 罗田县| 聂荣县| 苗栗县| 南皮县| 华阴市| 山东省| 密云县| 塔河县| 四子王旗| 虹口区| 平昌县| 临沧市| 凤城市|