千家信息网

Vue中插件机制与install的示例分析

发表于:2024-09-24 作者:千家信息网编辑
千家信息网最后更新 2024年09月24日,这篇文章主要为大家展示了"Vue中插件机制与install的示例分析",内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下"Vue中插件机制与install的示例分
千家信息网最后更新 2024年09月24日Vue中插件机制与install的示例分析

这篇文章主要为大家展示了"Vue中插件机制与install的示例分析",内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下"Vue中插件机制与install的示例分析"这篇文章吧。

一、install在Vuex&Vue-Router中的处理

这里先抛出两个问题,大家可以思考下,算是挖坑,下面再逐一解答:

  • 为什么我们在项目中可以直接使用$router $store来获取其中的值以及一些方法;

  • 为什么使用这俩插件都是先用Vue.use引入。然后才创建实例,在Vue实例中传入;

二者其实原理相同,这里我们用Vue-Router来举例,首先我们来看一下它内部install的具体实现:

class Router {    constructor(options) {        ...    }}Router.install = function(_Vue) {    _Vue.mixin({        beforeCreate() {            if (this.$options.router) {                _Vue.prototype.$router = this.$options.router            }        }    })}export default Router;
  • _Vue.mixin全局混入是什么呢?相当于在所有的组件中混入这个方法;

  • beforeCreate是什么呢?当然是Vue的一个生命周期,在create之前执行;

既然如此,我们大胆的做一个判断。Vue-Router其实是在install函数里面使用了一个全局混入,在beforeCreate这个生命周期触发的时候把this.$options.router挂载到Vue的原型上,这样我们就可以使用this.$router来调用router实例啦。 同学:等一下,stop!!!你说的我很李姐,但是this.$options.router这又是什么东西,从哪来的啊?

安啦,这咱们才刚刚解决了第一个问题,下面咱们来填第二个坑。

咱们平时使用Vue-Router,以及定义入口文件的Vue实例大概是这样子

// router/index.jsimport VueRouter form 'vue-router';import Vue from 'vue';Vue.use(VueRouter);const _router = [    ...]const Router = new VueRouter(_router);export default Router;// main.jsimport Vue from 'vue';import router from 'router';new Vue({    router,    ...}).$mount('#app');

结合最开始的例子,我们先来分析一波。

  • Vue.use()主要是调用插件内部的install方法,并将Vue实例作为参数传入;

  • 上面使用的是this.$options.routeroptions通常代表的是配置项;

  • 在main.js中我们把Router实例作为配置项传入到Vue实例中

叮!!!要素察觉,那我们来大胆推测一波。 Vue-Routeruse其实是做了一个全局混入,为了在合适的时间点,获取到Vue根实例配置项中的router实例,执行挂载。紧接着在new Vue()根实例创建的时候,注入router实例,然后触发全局混入中的生命周期,这个时候根实例的配置项this.$options已经包含了router实例,最后完成挂载流程!!! 光这一段的代码也是逻辑缜密,编程思路巧妙,令人直呼内行啊!兄弟萌,把内行打在公屏上,hhhh。

二、install在Vue中的内部实现

看完了常用库install的使用,不知大家是否有收获。接下来热身结束后,我们就可以开始看一看install内部实现了,先上源码。

export function initUse (Vue: GlobalAPI) {    // 注册一个挂载在实例上的use方法    Vue.use = function (plugin: Function | Object) {        // 初始化当前插件的数组        const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))        // 如果这个插件已经被注册过了,那就不作处理        if (installedPlugins.indexOf(plugin) > -1) {            return this        }        ...                // 重点来了哦!!!        if (typeof plugin.install === 'function') {        // 当插件中install是一个函数的时候,调用install方法,指向插件,并把一众参数传入            plugin.install.apply(plugin, args)        } else if (typeof plugin === 'function') {        // 当插件本身就是一个函数的时候,把它当做install方法,指向插件,并把一众参数传入            plugin.apply(null, args)        }                // 将插件放入插件数组中        installedPlugins.push(plugin)        return this    }}

源码这部分写的很简洁,可读性很高。就是在use的时候,判断插件类型,执行install或者插件本身。其实细化一下官网的解释就是,Class类的插件应该暴露一个 install 方法。

以上是"Vue中插件机制与install的示例分析"这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!

0