文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

深入理解Vue的插件机制与install详细

2024-04-02 19:55

关注

前言:

我们在使用Vue的时候,经常会使用并写一些自定义的插件,然后利用Vue.use引入。所以提到写插件,install这个方法是必不可少的。Vue.js 的插件应该暴露一个 `install` 方法。这个方法的第一个参数是 `Vue` 构造器,第二个参数是一个可选的选项对象。这是Vue官方对Vue插件的规范。那这install函数到底是什么东东呢,Vue内部到底用它做了什么处理,怎么调用的,今天我就给大家伙从源码层面把他整的明明白白。

看完这篇文章,你将学到:

好啦,闲话不多说,咱们直接开始!!!

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

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

二者其实原理相同,这里我们用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-Router其实是在install函数里面使用了一个全局混入,在beforeCreate这个生命周期触发的时候把this.$options.router挂载到Vue的原型上,这样我们就可以使用this.$router来调用router实例啦。 同学:等一下,stop!!!你说的我很李姐,但是this.$options.router这又是什么东西,从哪来的啊?

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

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


// router/index.js
import VueRouter form 'vue-router';
import Vue from 'vue';

Vue.use(VueRouter);

const _router = [
    ...
]

const Router = new VueRouter(_router);

export default Router;

// main.js
import Vue from 'vue';
import router from 'router';

new Vue({
    router,
    ...
}).$mount('#app');

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

叮!!!要素察觉,那我们来大胆推测一波。 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我们可以做很多其他的事儿。 比如Vue-Router在install中其实还注册了Router-viewRouter-link的全局组件。

到此这篇关于深入理解Vue的插件机制与install详细的文章就介绍到这了,更多相关深入理解Vue的插件机制与install内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯