zoukankan      html  css  js  c++  java
  • Vue.use原理及源码解读

    vue.use(plugin, arguments) 语法

    • 参数:plugin(Function | Object)
    • 用法:
      如果vue安装的组件类型必须为Function或者是Object<br/>

      如果是个对象,必须提供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) &gt; -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&lt;any&gt; {
      start = start || 0
      let i = list.length - start
    //将存放参数的数组转为数组,并除去第一个参数(该组件)
      const ret: Array&lt;any&gt; = new Array(i)
    //循环拿出数组
      while (i--) {
        ret[i] = list[i + start]
      }
      return ret
    }
    

    原文地址:https://segmentfault.com/a/1190000017162947

  • 相关阅读:
    D. Renting Bikes 二分
    Maximum Absurdity DP + 数学
    模拟 H
    Secrets 数论
    A. Knight Tournament SET的应用
    B. Xenia and Hamming Codeforces 256B GCD,LCM处理字符串
    Alternate Task UVA11728 暴力枚举
    GCD Extreme (II) 欧拉函数的应用
    Bit Magic HDU 4421 2-Sat
    Encoding http://acm.hdu.edu.cn/showproblem.php?pid=1020
  • 原文地址:https://www.cnblogs.com/qixidi/p/10121853.html
Copyright © 2011-2022 走看看