use vue 多个_vue.use 插件系统详解
什么是插件
Vue的插件一般就是用来扩展Vue的功能。比如,当需要Vue实现Ajax请求功能,我们希望通过this.$get(url)的形式就可以发送一个get请求。那么,我们就需要给Vue的实例添加一个$get方法,Vue实例本身是没有这个方法的。
Vue的一些插件:
vuex:官方状态管理插件;
vue-router:官方路由插件;
vue-resource:Ajax请求插件;
vue-element:饿了么出品的组件库。
如何使用插件
在创建Vue实例之前,通过全局方法Vue.use()来使用插件:
// 使用 MyPlugin 插件
Vue.use(MyPlugin)
// 或 传入一个选项参数,options 一般是一个对象
Vue.use(MyPlugin, options)
是不是很简单,好像也没有什么好说的。
有时候,我们看到某些插件使用起来可能有些不一样。比如使用vuex:
// store.js 文件中
import Vuex from 'vuex'
import Vue from 'vue'
import state from './state'
import mutations from './mutations'
import actions from './actions'
// 注册插件
Vue.use(Vuex)
const store = new Vuex.Store({
state,
mutations,
actions
})
export default store// main.js 文件中
import Vue form 'vue'
import App from './App'
import store from './store'
new Vue({
el: '#app',
store,
render: h => h(App)
})
其实本质上还是一样的,也是通过Vue.use()方法注册插件。只不过它有一个store对象,然后并将store对象作为Vue根实例的属性,以便组件通过this.$store这种形式来访问。
自定义插件
其实当通过Vue.use()注册插件时,内部会自动调用插件的install()方法。也就是说,插件必须要提供一个公开的install()方法,作为接口。该方法第一个参数是Vue,第二个参数是可选的options对象。
总结起来说,插件是一个对象。该对象要有一个公开的install()方法,那么写起来可能是这样的:
const MyPlugin = {}
MyPlugin.install = function (Vue, options){
// ...
}
export default MyPlugin
在install()方法中,我们通过参数可以拿到Vue对象,那么,我们就可以对它做很多事情。
MyPlugin.install = function (Vue, options){
// 1\. 添加全局方法和属性
Vue.myProperty = 'Hello Vue',
// 2\. 添加全局的自定义指令
Vue.directive('name', function (el, binding){
// ...
})
// 3\. 混合
Vue.mixin({
created () {
// ...
}
})
// 4\. 添加实例方法
// 通过原型为一个对象添加实例方法
// 在 Vue 实例中,通过 this.$get() 就可以调用该方法
Vue.prototype.$get = function (){
// ...
}
}
插件的几种写法
这里直接就看几个插件的源码吧,看看他们是怎么写的,其实我也是参照了这些源码才真正弄明白了插件是怎么一回事。源码很长,这里只说一些关键点。
vue-touch// 外面是一个立即执行函数,控制作用域
// 前面的分号应该是为了更好的兼容其他js源码吧
;(function (){
var vueTouch = {}
// 这里没有接收第二个参数
vueTouch.install = function (Vue){
// ...
}
// 导出 vueTouch 插件
if (typeof exports == "object") {
module.exports = vueTouch
} else if (typeof define == "function" && define.amd) {
define([], function(){ return vueTouch })
} else if (window.Vue) {
// 如果 Vue 作为全局对象,则自动使用插件
// 也就是说,当我们在HTML文档中通过script直接引用 vue 和 vueTouch 时,不需要手动注册
window.VueTouch = vueTouch
Vue.use(vueTouch)
}
})()
vue-routerimport { install } from './install'
export default class VueRouter{
// 定义了一个静态方法, ES6 新增的语法
// 用其他语言理解也就相当于一个类方法,通过类名调用
static install: () => void
}
// 这里 install 是一个从外部引入的函数
VueRouter.install = install
// 自动注册插件
if (inBrowser && window.Vue) {
window.Vue.use(VueRouter)
}
vueximport { Store, install } from './store'
export default {
install,
// ...
}
// 这个最简单直观,没啥好说的
vue-resource(重点)// 这个。。。
// 我也不知道如何解释
// 这里好像直接用 plugin 代替了 install 方法
// 当使用 Vue.use(vueResource) 时,会调用该函数 ???
// 先暂且这么认为吧
function plugin(Vue){
// 避免重复注册
if (plugin.installed) {
return
}
// ...
}
// 自动注册插件
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(plugin);
}
export default plugin;
Vue.use源码解读(一定要看)
针对vue-resource插件问题,我查看了一下vue的源码,它的源码是这样的:
Vue.use = function (plugin: Function | Object) {
/* istanbul ignore if */
// 保证同一个插件只安装一次
if (plugin.installed) {
return
}
// additional parameters
// 这句的作用应该是去掉第一个参数,然后转换成数组
const args = toArray(arguments, 1)
// 将Vue作为数组的第一个元素,以便传入插件中
args.unshift(this)
// 插件有install接口,并且是一个函数
if (typeof plugin.install === 'function') {
// 在plugin作用域下调用 install ,并传入拼接好的参数
// 在 install 中,this 指向 plugin
plugin.install.apply(plugin, args)
// 插件本身是一个函数
// 解释vue-resource写法的关键点在这
} else if (typeof plugin === 'function') {
// 在全局作用域下调用 plugin 函数
// plugin 中,this 指向 window
plugin.apply(null, args)
}
plugin.installed = true
return this
}
通过源码,我们知道,Vue插件可以是一个对象或者是一个函数。只有当插件实现了 install 接口时(有install这个函数时),才会调用插件的install方法;否则再判断插件本身是否是一个函数,如果是,就直接调用它。
现在就能很好的解释vue-resource插件的写法了。好吧,我也是刚刚得知,又长了一点见识。
其实官网也有说明:
use vue 多个_vue.use 插件系统详解相关推荐
- RPG Maker MV插件系统详解与如何编写插件
最新发布rmmv和以往的版本最大不同就是脚本系统了,整个脚本系统采用html5的javascript编写.和以往的ruby脚本简直天翻地覆 这也是为了实现跨平台运行,也是前所未有的高度编程自由,所有游 ...
- T4M插件放入unity后怎么找不到_Unity动画系统详解4:如何用代码控制动画?
摘要:通过上一篇咱们知道了播放动画需要使用Animator,那么如何用代码控制动画呢? 洪流学堂,让你快人几步.你好,我是跟着大智学Unity的萌新,我叫小新,这几周一起来复(yu)习(xi)动画系统 ...
- T4M插件放入unity后怎么找不到_Unity动画系统详解6:如何做好角色的移动动画?(Root Motion详解)
摘要:Root Transform是body transform在Y平面上的投影,并且是运行时计算的.每一帧Root Transform的变化实时计算.然后Transform的变化会被应用到GameO ...
- 导出jar插件_Fluttify输出的Flutter插件工程详解
系列文章: yohom:Fluttify输出的Flutter插件工程详解zhuanlan.zhihu.com yohom:开发Flutter插件必备原生SDK->Dart接口生成引擎`Flut ...
- logstash过滤器插件filter详解及实例
原创作者:峰哥ge 原创地址: https://www.cnblogs.com/FengGeBlog/p/10305318.html logstash过滤器插件filter grok正则捕获 grok ...
- fullPage教程 -- 整屏滚动效果插件 fullpage详解
为什么80%的码农都做不了架构师?>>> 本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:fullPage教程 -- 整屏滚动效果插件 fullpage详解 1. ...
- ExtJS 4.2 教程-08:布局系统详解
ExtJS 4.2 系列教程导航目录: ExtJS 4.2 教程-01:Hello ExtJS ExtJS 4.2 教程-02:bootstrap.js 工作方式 ExtJS 4.2 教程-03:使用 ...
- fileupload的回调方法_jQuery File Upload文件上传插件使用详解
本篇教程介绍了jQuery File Upload文件上传插件使用详解,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入. < jQuery File Upload 是一个 ...
- Linux系统详解 系统的启动、登录、注销与开关机
Linux系统详解 第六篇:系统的启动.登录.注销与开关机 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://johncai.blo ...
最新文章
- 数据结构 — 哈希表
- 做为web前端工程师的体验
- 无线服务器软件,关于无线802.1x结合各服务器软件的配置总结
- java 动态创建实例_java – 有没有办法动态创建类(而不是实例)?
- 安装SandcastleInstaller
- pythonanywhere.com的用法
- jquery datatable设置垂直滚动后,表头(th)错位问题
- Arduino文档阅读笔记-RFID工作原理及RC522模块介绍
- epoll哪些触发模式_epoll的内部实现 百万级别句柄监听 lt和et模式非常好的解释...
- 一张图超过了屏幕大小 如何自动将多出部分隐藏 只显示中间部分
- 腾讯云大学实验室(153个学习案例)免费学服务器技术
- 谈网页游戏外挂之用python模拟游戏(热血三国2)登陆
- DSPE-PEG-TPP;磷脂-聚乙二醇-磷酸三苯酯;(阻燃剂TPP)是种含磷元素的化合物,可用作无卤环保型阻燃剂
- 这些地区的大学,取消英语四六级口语考试!
- 挑战10的1,143,913次方种算法组合:这都不是事儿~~
- 虹科分享 | 在ntopng中使用黑名单捕获恶意软件通信
- centos7 应用笔记: fslint 文件查重
- Python入门之——pexpect模块
- 【网络工程师配置篇】华为RIP路由基础配置续篇——重分发
- 我在华为写了13年的代码
热门文章
- 图像检索:Fisher Information Matrix and Fisher Kernel
- 锁优化:逃逸分析、自旋锁、锁消除、锁粗化、轻量级锁和偏向锁
- 深入浅出的理解框架(Struts2、Hibernate、Spring)与 MVC 设计模式
- 亿级 Web 系统的容错性建设实践
- OpenCV之imgproc 模块. 图像处理(5)在图像中寻找轮廓 计算物体的凸包 创建包围轮廓的矩形和圆形边界框 为轮廓创建可倾斜的边界框和椭圆 轮廓矩 多边形测试
- 压缩感知(I) A Compressed Sense of Compressive Sensing (I)
- Day 16: Goose Extractor —— 好用的文章提取工具
- 如何用 CSS 和 D3 创作一个抽象的黑白交叠动画
- ES-PHP向ES批量添加文档报No alive nodes found in your cluster
- [开发笔记]-页面切图、CSS前端设计、JS