vue.use(plugin, arguments) 语法
 
参数：plugin(Function | Object)
 
用法：
 
如果vue安装的组件类型必须为Function或者是Object
 
如果是个对象，必须提供install方法
 
如果是一个函数，会被直接当作install函数执行
 
install函数接受参数，默认第一个参数为Vue,其后参数为注册组件时传入的arguments
 
先举个?
 
我们先来看一个简单的事例
 
首先我使用官方脚手架新建一个项目vue init webpack vue-demo
 
然后我创建两个文件index.js plugins.js.
 
我将这两个文件放置在src/classes/vue-use目录下
 
接下来对这两个文件进行编写
 
// 文件: src/classes/vue-use/plugins.js
 
const Plugin1 = {
 
install(a, b, c) {
 
console.log('Plugin1 第一个参数:', a);
 
console.log('Plugin1 第二个参数:', b);
 
console.log('Plugin1 第三个参数:', c);
 
},
 
};
 
function Plugin2(a, b, c) {
 
console.log('Plugin2 第一个参数:', a);
 
console.log('Plugin2 第二个参数:', b);
 
console.log('Plugin2 第三个参数:', c);
 
}
 
export { Plugin1, Plugin2 };
 
// 文件: src/classes/vue-use/index.js
 
import Vue from 'vue';
 
import { Plugin1, Plugin2 } from './plugins';
 
Vue.use(Plugin1, '参数1', '参数2');
 
Vue.use(Plugin2, '参数A', '参数B');
 
然后我们在入口文件main.js引用这段代码
 
// 文件: src/main.js
 
import Vue from 'vue';
 
import '@/classes/vue-use';
 
import App from './App';
 
import router from './router';
 
Vue.config.productionTip = false;
 
/* eslint-disable no-new */
 
new Vue({
 
el: '#app',
 
router,
 
render: h => h(App),
 
});
 
此时我们执行npm run dev打开8080端口开启开发调试工具可以看到控制台输出以下信息
 

 
...]
 
从中可以发现我们在plugin1中的install方法编写的三个console都打印出来，第一个打印出来的是Vue对象，第二个跟第三个是我们传入的两个参数。
 
而plugin2没有install方法，它本身就是一个方法，也能打印三个参数，第一个是Vue对象，第二个跟第三个也是我们传入的两个参数。
 
那么现在我们是不是大概对Vue.use有一个模糊的猜想～
 
分析源码
 
好我们还是不要猜想，直接上源码
 
// Vue源码文件路径：src/core/global-api/use.js
 
import { toArray } from '../util/index'
 
export function initUse (Vue: GlobalAPI) {
 
Vue.use = function (plugin: Function | Object) {
 
const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
 
if (installedPlugins.indexOf(plugin) > -1) {
 
return this
 
}
 
// additional parameters
 
const args = toArray(arguments, 1)
 
args.unshift(this)
 
if (typeof plugin.install === 'function') {
 
plugin.install.apply(plugin, args)
 
} else if (typeof plugin === 'function') {
 
plugin.apply(null, args)
 
}
 
installedPlugins.push(plugin)
 
return this
 
}
 
}
 
从源码中我们可以发现vue首先判断这个插件是否被注册过，不允许重复注册。
 
并且接收的plugin参数的限制是Function | Object两种类型。
 
对于这两种类型有不同的处理。
 
首先将我们传入的参数整理成数组 => const args = toArray(arguments, 1)。
 
(toArray源码)
 
// Vue源码文件路径：src/core/shared/util.js
 
export function toArray (list: any, start?: number): Array {
 
start = start || 0
 
let i = list.length - start
 
const ret: Array = new Array(i)
 
while (i--) {
 
ret[i] = list[i + start]
 
}
 
return ret
 
}
 
再将Vue对象添加到这个数组的起始位置args.unshift(this),这里的this 指向Vue对象
 
如果我们传入的plugin(Vue.use的第一个参数)的install是一个方法。也就是说如果我们传入一个对象，对象中包含install方法，那么我们就调用这个plugin的install方法并将整理好的数组当成参数传入install方法中。 => plugin.install.apply(plugin, args)
 
如果我们传入的plugin就是一个函数,那么我们就直接调用这个函数并将整理好的数组当成参数传入。 => plugin.apply(null, args)
 
之后给这个插件添加至已经添加过的插件数组中，标示已经注册过 => installedPlugins.push(plugin)
 
最后返回Vue对象。
 
小结
 
通过以上分析我们可以知道，在我们以后编写插件的时候可以有两种方式。
 
一种是将这个插件的逻辑封装成一个对象最后将最后在install编写业务代码暴露给Vue对象。这样做的好处是可以添加任意参数在这个对象上方便将install函数封装得更加精简，可拓展性也比较高。
 
还有一种则是将所有逻辑都编写成一个函数暴露给Vue。
 
其实两种方法原理都一样，无非第二种就是将这个插件直接当成install函数来处理。
 
个人觉得第一种方式比较合理。
 
举个?
 
export const Plugin = {
 
install(Vue) {
 
Vue.component...
 
Vue.mixins...
 
Vue...
 
// 我们也可以在install里面执行其他函数，Vue会将this指向我们的插件
 
console.log(this) // {install: ...,utils: ...}
 
this.utils(Vue) // 执行utils函数
 
console.log(this.COUNT) // 0
 
},
 
utils(Vue) {
 
Vue...
 
console.log(Vue) // Vue
 
},
 
COUNT: 0
 
}
 
// 我们可以在这个对象上添加参数，最终Vue只会执行install方法，而其他方法可以作为封装install方法的辅助函数
 
const test = 'test'
 
export function Plugin2(Vue) {
 
Vue...
 
console.log(test) // 'test'
 
// 注意如果插件编写成函数形式，那么Vue只会把this指向null，并不会指向这个函数
 
console.log(this) // null
 
}
 
// 这种方式我们只能在一个函数中编写插件逻辑，可封装性就不是那么强了
 
小弟不才，对vue源码的理解暂且到这。欢迎大佬们多指教～
 
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
 
本文标题: 浅谈Vue.use的使用
 
本文地址: http://www.cppcns.com/wangluo/javascript/238489.html

 
一，基本用法
 
插件通常为 Vue 来添加全局功能。而插件的应用范围没有明确规定，一般包括：
 
添加全局方法或属性。例如：vue-custom-element
 
添加全局资源：指令/过滤器/过渡等。如：v-touch
 
通过全局混入来添加一些组件选项。如：vue-router
 
添加 Vue 实例方法，通过把他们添加到 Vue.prototype 上实现
 
一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如：vue-router
 
开发一个插件需要暴露一个 install方法。这个方法的第一个参数是 Vue 构造器，第二个参数一个可选的选项对象。
 
编写一个组件：
 
import LoadingComponent from './LoadingComponent.vue';
 
const MyPlugin = {};
 
MyPlugin.install = function(Vue, options) {
 
// 1, 添加全局方法或属性
 
Vue.myGlobalVariable = "hahha";
 
Vue.myGlobalMethods = function(){ //... }
 
// 2, 添加全局资源
 
// 注册一个全局组件 `loading`, 不用 `import` 可以在任何位置使用
 
Vue.component('Loading', LoadingComponent)
 
Vue.directive('my-directive', {
 
bind(el, binding, vnode, oldnode){ // logic }
 
})
 
// 3, mixins
 
Vue.mixin({
 
created(){ // logic },
 
mounted(){ // logic }
 
})
 
// 4, 在原型上添加实例方法，被各个实例继承
 
Vue.prototype.$MyMethods = function(mOptions) { // logic }
 
}
 
把 Vue 引到一个新的位置，添加全局方法，组件，属性等内容，其实这些内容也可以通过其他方式写，那么这个API的用处在哪儿
 
如何使用：
 
// MyPlugin.vue
 
// 2, 添加全局资源 (无需引入，可全局使用的组件)
 
export default {
 
// other logic
 
mounted(){
 
// 1, 添加全局方法或属性 (TODO: 这种方式似乎不能访问 ？？？？？？)
 
const myGlobalVariable = this.myGlobalVariable; // undefined
 
this.myGlobalMethods(); // "this.myGlobalMethods is not a function"
 
// 3, mixins
 
// 4, 在原型上添加实例方法，被各个实例继承
 
this.$MyMethods(); // run logic
 
}
 
}
 
二，源码解析
 
// ./vue/src/core/global-api/use.js
 
import { toArray } from "../utils/index";
 
/* @flow */
 
import { toArray } from '../util/index'
 
export function initUse (Vue: GlobalAPI) {
 
// `plugin: Function | Object` 这种使FLOW写法，facebook 出品的一款Javascript静态类型检查工具。
 
// use 方法接受的参数为 function 或 object, 若为function, 默认为 install 方法，若为object, 里面必 须含有一个install 方法。
 
Vue.use = function (plugin: Function | Object) {
 
const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
 
// 插件只能注册一次
 
if (installedPlugins.indexOf(plugin) > -1) {
 
return this
 
}
 
// 处理附加参数
 
// `toArray`: arguments是参数列表的一个类数组(不知道是不是这么说)，toArray 将它转变成一个真的数组，截取除第一以外的所有参数。 ① 这些参数会在调用install 方法时传入；
 
const args = toArray(arguments, 1)
 
args.unshift(this)
 
if (typeof plugin.install === 'function') {
 
plugin.install.apply(plugin, args)
 
} else if (typeof plugin === 'function') {
 
plugin.apply(null, args)
 
}
 
installedPlugins.push(plugin)
 
return this
 
}
 
}
 
所以我们总结下，Vue.use 的好处：
 
统一在一个位置注册全局内容，避免main.js过度臃肿；
 
全局注册，避免重复引入问题；
 
避免重复注册组件。
 
三，常见的几种用法
 
mixins
 
// 一个简单的栗子，可以用于 validation
 
const myMixin = {
 
install(Vue, options) {
 
// 这里 this 指向 myMixin
 
Vue.mixin({
 
// 每个组件创建都会执行 created 方法
 
created(){
 
const rules = this.$options.rules || null;
 
if(rules) {
 
Object.keys(rules).forEach(key => {
 
const ruleItem = rules[key];
 
// $watch 接受两个参数：监测的属性名，callback(变化后的值)
 
this.$watch(key, newValue => {
 
const isValid = ruleItem.validate(newValue);
 
if(!isValid) {
 
console.log(ruleItem.message)
 
}
 
})
 
})
 
}
 
}
 
})
 
}
 
}
 
const vue = new Vue({
 
data: {
 
foo: 10
 
},
 
// 检验规则 ③
 
rules: {
 
foo: {
 
validate: value => value > 1,
 
message: "foo 必须大于 1"
 
}，
 
// more rules
 
}
 
})
 
// * 需要注意的是, ③处的 rules 只能在根组件通过 this.options.rules 访问，子组件的话得看嵌套关系，可能是 this.$options.parent.$options....parent.$options.rules 这种方式访问该属性
 
directives
 
// 注册一个全局自定义指令：`v-focus`
 
// plugin 内部
 
function Myplugin(Vue){
 
Vue.directive('focus', {
 
// 当被绑定元素插入到DOM中时，自动聚焦
 
inserted(el){
 
el.focus();
 
}
 
})
 
}
 
// template 内部
 
 // 自动聚焦
 
axios
 
axios 不能直接用Vue.use, 以为它本身没有暴露 install 方法。所以使用axios只能是下面两种方法：
 
使用的地方进行 import：
 
import axios from 'axios';
 
export const login = params => {
 
return axios
 
.post(`localhost:3000/login`, params)
 
.then(res => res)
 
}
 
使用 vue-axios :
 
// npm i -S axios vue-axios
 
// main.js
 
import Vue from 'vue';
 
import axios from 'axios';
 
import VueAxios from 'vue-axios';
 
// 由之前的 `vue.use` 用法我们知道，它可以接收第二个 `options` 参数，所以这里本质是将 `axios` 通过 `VueAxios` 包装以符合 "install 规范"
 
Vue.use(VueAxios, axios);
 
// usage
 
this.axios.get(params).then(res => res);
 
Vue.axios.get(params).then(res => res);
 
this.$http.get(params).then(res => res);
 
vue-router
 
// ./route/index.js
 
import Router from 'vue-router';
 
Vue.use(Router);
 
let router = new Router({
 
routes: [
 
{
 
path: "./home",
 
component: homeComp
 
}
 
]
 
})
 
export default router;
 
// main.js
 
import router from ....;
 
const vue = new Vue({
 
// other logic
 
router
 
})
 
Vuex
 
用法与vue-router 等同，不赘述
 
四，常见问题
 
为什么要先 Vue.use 再 new Vue() ?
 
首先回顾下 Vue.use 做了什么：
 
检测是否注册过此插件
 
插件注入到 Vue 构造函数 (TODO：不知道是不是这么说)
 
存储注册过的插件
 
而在 new Vue(options) 时，会执行 Vue.prototype._init 进行初始化，将Vue 本身属性与options合并，然后进行事件，生命周期初始化。(比如：vue-router, vuex 等需要将 store, router 选项插入options)
 
所以，如果 Vue.use 在 new Vue() 之前执行，那么调用_init()时，插件中使用的内容还没有注入到 Vue.options.component, Vue.options.directives 等属性中，初始化的实例也无从访问。

 
在学习了和使用了这么多年的PHP之后，您知道use这个关键字在PHP中都有哪些用法吗？今天我们就来看一下它的三种常见用法。
 
1. 用于命名空间的别名引用
 
// 命名空间
 
include 'namespace/file1.php';
 
use FILE1\objectA;
 
use FILE1\objectA as objectB;
 
echo FILE1\CONST_A, PHP_EOL; // 2
 
$oA = new objectA();
 
$oA->test(); // FILE1\ObjectA
 
$oB = new objectB();
 
$oB->test(); // FILE1\ObjectA
 
这个想必在日常的工程化开发中会非常常见。毕竟现在的框架都是使用了命名空间的，不管做什么都离不开各种类依赖的调用，在各种控制器文件的上方都会有大量的use xxx\xxx\xxx;语句。
 
2. 用于trait特性能力的引入
 
// trait
 
trait A{
 
function testTrait(){
 
echo 'This is Trait A!', PHP_EOL;
 
}
 
}
 
class B {
 
use A;
 
}
 
$b = new B();
 
$b->testTrait();
 
即使在最近这两年，依然还是见过完全没有用过trait的PHP程序员，不要惊讶，这是真实存在的。想想还有那么多项目都还在用TP3也就不奇怪了。trait特性还是非常方便的一种类功能扩展模式，其实我们可以看作是将这个use放在了类中就成为了trait的引用定义了。
 
3. 匿名函数传参
 
// 匿名函数传参
 
$a = 1;
 
$b = 2;
 
// function test($fn) use ($a) // arse error: syntax error, unexpected 'use' (T_USE), expecting '{'
 
function test($fn)
 
{
 
global $b;
 
echo 'test:', $a, '---', $b, PHP_EOL; // test:---2
 
$fn(3);
 
}
 
test(function ($c) use ($a) {
 
echo $a, '---', $b, '---', $c, PHP_EOL;
 
});
 
// 1------3
 
这个就有点意思了吧，方法中要调用外部的变量是需要global的，在这里我们直接通过use()也是可以将变量传递过去的。而且这个仅限于在匿名函数中使用。

 
Rust 1.7.0 中的宏使用范围包括三种情况：
 
第一种情况是宏定义在当前文件中，这个文件可能是 crate 默认的 module，也可能是任意的 module 模块。
 
第二种情况是宏定义在当前 crate ，但是不是在当前文件中，而是其他 module 模块中。
 
第三种情况是宏定义在其他的 crate 中，或者其他的 crate 子模块中。
 
使用#[macro_use] 可以使被注解的module模块中的宏应用到当前作用域中；或者注释crate中的宏应用到当前crate作用域中。
 
第一种情况的例子：
 
macro_rules! say_hello{
 
()=>(
 
println!("Hello");
 
)
 
}
 
fn main(){
 
say_hello!();
 
}
 
第二种情况：
 
先创建一个新文件 macros.rs ,定义一个宏 say_bonjour
 
macro_rules! say_bonjour{
 
()=>(
 
println!("Bonjour");
 
)
 
}
 
使用
 
#[macro_use]
 
pub mod macros;
 
macro_rules! say_hello{
 
()=>(
 
println!("Hello");
 
)
 
}
 
fn main(){
 
say_hello!();
 
say_bonjour!();
 
}
 
如果没有 #[macro_use] 编译会出现
 
error: macro undefined: ‘say_bonjour!’
 
第三种情况：注释在外部 crate 的语句
 
创建 log 项目 cargo new log
 
在 log 项目中，lib.rs 是入口，在lib.rs中定义 macors 模块。
 
...#[macro_use] mod macros; . . .
 
然后，创建对应mod macros 的 macros.rs 文件 vi src/macros.rs
 
声明宏 log、error、warn、info，在每个宏定义前面添加 #[macro_export]注释，表示这些宏可以被外部的 crate 使用。
 
.
 
.
 
.
 
#[macro_export]
 
macro_rules! log {
 
...
 
}
 
#[macro_export]
 
macro_rules! error {
 
(target: $target:expr, $($arg:tt)*) => (
 
log!(target: $target, $crate::LogLevel::Error, $($arg)*);
 
);
 
($($arg:tt)*) => (
 
log!($crate::LogLevel::Error, $($arg)*);
 
)
 
}
 
#[macro_export]
 
macro_rules! warn {
 
(target: $target:expr, $($arg:tt)*) => (
 
log!(target: $target, $crate::LogLevel::Warn, $($arg)*);
 
);
 
($($arg:tt)*) => (
 
log!($crate::LogLevel::Warn, $($arg)*);
 
)
 
}
 
#[macro_export]
 
macro_rules! info {
 
(target: $target:expr, $($arg:tt)*) => (
 
log!(target: $target, $crate::LogLevel::Info, $($arg)*);
 
);
 
($($arg:tt)*) => (
 
log!($crate::LogLevel::Info, $($arg)*);
 
)
 
}
 
.
 
.
 
.
 
使用：引入 log crate的时候，注明#[macro_use]
 
#[macro_use]
 
extern crate log;
 
.
 
.
 
.
 
if !shutdown.load(Ordering::SeqCst) {
 
info!("ConnectionHandler: read timed out ({:?}). Server not shutdown, so \ retrying read.",
 
err);
 
continue;
 
} else {
 
info!("ConnectionHandler: read timed out ({:?}). Server shutdown, so \ closing connection.",
 
err);
 
break;
 
}
 
.
 
.
 
.