Vue.use的原理和设计源码探究

时间:2023-03-20 给小叶倒茶人气:0

前言

这段时间打算回顾一下Vue的全局方法，脑海里第一个跳出来的方法就是Vue.use，之所以会首先想到它，我觉得和我平时看的面试题相关~~~

Vue.use的原理是面试中常问的点，因为相对于其他全局方法，Vue.use源代码逻辑清晰，如果了解它，也就代表这个人是看过Vue源码的！！！

基本使用

在Vue官网中是这样说明的：通过全局方法 Vue.use(plugin) 使用插件

首先要知道什么是插件，插件通常用来为 Vue 添加全局功能（过滤器、指令、组件），平时我们使用的UI组件、Axios、Vuex都是插件

Vue.use装载插件的方式也很简单

 import Vue from "vue"
 import Element from 'element-ui'
 Vue.use(Element)

并且在Vue官网还介绍了我们如何去开发插件，只需要暴露一个install方法就可以，在如果Vue.use方法使用插件时，会主动调用install方法

install方法第一个参数是Vue构造函数，剩下的参数则是调用Vue.use方法时，除第一个参数以外的剩余参数

 import Vue from "vue"
 let MyPlugin = {
     install(_Vue) {
         console.log(_Vue === Vue)       // true
     }
 }
 Vue.install(MyPlugin)

源码解析

废话不说，直接上源码~~~

 import type { GlobalAPI } from 'types/global-api'
 import { toArray, isFunction } from '../util/index'
 export function initUse(Vue: GlobalAPI) {
     // plugin：类型是 Function|any
   Vue.use = function (plugin: Function | any) { 
     // this是Vue构造函数
     // _installedPlugins保存了已经被过使用插件
     const installedPlugins = this._installedPlugins || (this._installedPlugins = []) 
     // 判断当前插件是否已经被使用过
     if (installedPlugins.indexOf(plugin) > -1) {
       // 如果已经被使用，就直接返回Vue构造函数
       return this
     }
     // 获取排除第一个参数之后所剩余的参数
     const args = toArray(arguments, 1)
     // 向头部添加Vue构造函数
     args.unshift(this)
     // 如果 plugin.install 是方法
     if (isFunction(plugin.install)) {
       // 执行plugin.install方法
       plugin.install.apply(plugin, args)
     } 
     // 如果 plugin 是函数
     else if (isFunction(plugin)) {
       // 执行plugin.install函数
       plugin.apply(null, args)
     }
     // plugin已经被使用过了，添加到已使用缓存中
     installedPlugins.push(plugin)
     return this
   }
 }

源码不一定都很很难，像Vue.use源码是不是就很简单

我们从源码中得到以下信息：

Vue.use会防止重复加载同一个插件
Vue.use可以链式调用
plugin只有类型是函数或者对象的时候才有用，为函数时，直接运行这个函数；当为对象时，会判断对象中是否存在install方法，如果存在，就执行这个方法

控制反转

谈论了Vue.use使用和原理，那再讲一讲设计吧~~~

我们从框架设计者的角度出发，现在需要允许Vue插件，你会怎样设计喃？

 function show() {
     console.log("我是插件");
 }

现在需要把show方法添加到Vue原型上，如果没有提供Vue.use方法，那就会这样，开发者手动添加到原型上

 function show() {
     console.log("我是插件");
 }
 Vue.prototype.show = show

显然这样是不对，如果明天在有show2方法喃？不可能让开发自己加呀，你就首先提出了Vue.use方法帮助开发者加载插件

 Vue.use = function (plugin) {
     if (typeof plugin === "object") {
         if (plugin.add) {
             plugin.add()
         }
         if (plugin.use) {
             plugin.use()
         }
     } else {
     }
 }

但是这又遇到一个难题，插件的类型多种多样，有些插件暴露的是add方法，有些时候use，不可能都要适配吧！！！

所以这个时候你就通知所以插件开发商，让他们插件都要向外暴露install方法，没有这个方法的我们不管，所以问题也都解决了

回到正题，谈设计，原本需要开发者实现的业务，交给了Vue本身，开发者只需要提供插件，这种设计叫做控制反转

也就是把代码的控制权从开发者交给Vue本身，如果Vue.use注入插件也叫做依赖注入

加载全部内容