深入理解Vue的插件机制与install详细
前言:
我们在使用Vue的时候,经常会使用并写一些自定义的插件,然后利用Vue.use
引入。所以提到写插件,install
这个方法是必不可少的。Vue.js
的插件应该暴露一个 `install
` 方法。这个方法的第一个参数是 `Vue` 构造器,第二个参数是一个可选的选项对象。这是Vue
官方对Vue插件的规范。那这install
函数到底是什么东东呢,Vue
内部到底用它做了什么处理,怎么调用的,今天我就给大家伙从源码层面把他整的明明白白。
看完这篇文章,你将学到:
install
函数可以做些什么;install
内部是怎么实现的;Vuex
,Vue-Router
插件在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.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.use()主要是调用插件内部的
install
方法,并将Vue
实例作为参数传入; - 上面使用的是
this.$options.router
,options
通常代表的是配置项; - 在main.js中我们把Router实例作为配置项传入到Vue实例中
叮!!!要素察觉,那我们来大胆推测一波。 Vue-Router
先use
其实是做了一个全局混入,为了在合适的时间点,获取到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-view
和Router-link
的全局组件。
到此这篇关于深入理解Vue的插件机制与install
详细的文章就介绍到这了,更多相关深入理解Vue的插件机制与install内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
element的el-tree多选树(复选框)父子节点关联不关联
最近想要实现多选框关联的功能,但是却出现了element的el-tree多选树(复选框)父子节点关联不关联的问题,本文就来介绍一下解决方法,一起来了解一下2021-05-05vue+jquery+lodash实现滑动时顶部悬浮固定效果
这篇文章主要为大家详细介绍了vue+jquery+lodash实现滑动时顶部悬浮固定效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2018-04-04vue-router 按需加载 component: () => import() 报错的解决
这篇文章主要介绍了vue-router 按需加载 component: () => import() 报错的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
最新评论