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

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

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

给小叶倒茶   2023-03-20 我要评论

前言

这段时间打算回顾一下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注入插件也叫做依赖注入

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们