亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

Vue.use原理及源碼解讀

標簽:
Vue.js

vue.use(plugin, arguments) 语法

  • 参数:plugin(Function | Object)

  • 用法:
    如果vue安装的组件类型必须为Function或者是Object

    如果是个对象,必须提供install方法

    如果是一个函数,会被直接当作install函数执行

    install函数接受参数,默认第一个参数为Vue,其后参数为注册组件时传入的arguments

组件.js    export const testObj = {
        install(Vue, arg) {
            
        }
    }    export const testFn = founction(Vue, arg) {
        
    }
    
index.js    import { testObj, testFn } from './组建.js'
    Vue.use(testObj, arg)
    Vue.use(testFn, arg)

建议组件采用第一种写法,根据use源码,当采用第二种写法时,this指针指向null

    if (typeof plugin.install === 'function') {
          plugin.install.apply(plugin, args)
        } else if (typeof plugin === 'function') {
          plugin.apply(null, args)
        }

官方use源码

import { toArray } from '../util/index'export function initUse (Vue: GlobalAPI) {
 Vue.use = function (plugin: Function | Object) {// 限制了自定义组建的类型
   const installedPlugins = (this._installedPlugins || (this._installedPlugins =
[]))//保存注册组件的数组,不存在及创建
   if (installedPlugins.indexOf(plugin) > -1) {//判断该组件是否注册过,存在return Vue对象
     return this
   }//调用`toArray`方法
   const args = toArray(arguments, 1)
   args.unshift(this)//将Vue对象拼接到数组头部
   if (typeof plugin.install === 'function') {//如果组件是对象,且提供install方法,调用install方法将参数数组传入,改变`this`指针为该组件
     plugin.install.apply(plugin, args)
   } else if (typeof plugin === 'function') {//如果传入组件是函数,这直接调用,但是此时的`this`指针只想为`null` 
     plugin.apply(null, args)
   }//在保存注册组件的数组中添加
   installedPlugins.push(plugin)   return this
 }
}

toArray方法源码

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
}



作者:茶树菇小学生
链接:https://www.jianshu.com/p/710fbbff15ba


點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消