精华内容
下载资源
问答
  • 浅谈Vue.use使用

    2020-12-22 19:15:11
    vue.use(plugin, arguments) 语法参数:plugin(Function | Object)用法:如果vue安装的组件类型必须为Function或者是Object如果是对象,必须提供install方法如果是一函数,会被直接当作install函数执行install...

    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.use 详解

    2020-12-31 07:06:51
    一,基本用法插件通常为 Vue 来添加全局功能。而插件的应用范围没有明确...如:vue-router添加 Vue 实例方法,通过把他们添加到 Vue.prototype 上实现一库,提供自己的 API,同时提供上面提到的一或多功能。如...

    一,基本用法

    插件通常为 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...

    在学习了和使用了这么多年的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 ,但是不是在当前文件中,而是其他 ...

    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;

    }

    .

    .

    .

    展开全文
  • 这篇文章主要介绍了php中namespace use用法,结合实例形式分析了PHP中命名空间的定义与使用技巧,需要的朋友可以参考下本文实例讲述了php中namespace use用法。分享给大家供大家参考,具体如下:现在说这感觉有点...
  • VueUse中的这5函数,也太好用了吧

    千次阅读 2021-08-11 08:20:46
    作者:Matt Maribojoc 译者:前端小智 ...VueUse 是 Anthony Fu 大佬的一开源项目,它为Vue的开发者提供了大量用于 Vue2 和Vue3 的基本 Composition API 实用工具函数。 它有几十用于常见开发人员用.
  • function() use() {} 是 php5.3 引入闭包的一种用法use 意思是连接闭包和外界变量。匿名函数提到闭包就不得不想起匿名函数,也叫闭包函数(closures),貌似 PHP 闭包实现主要就是靠它。声明一匿名函数是这样:$...
  • useSSL

    2021-03-13 14:35:08
    According to MySQL 5.5.45+, 5.6.26+ and 5.7.6+ requirements SSL connection must be established by 由于是新手的问题,C3P0的使用时严格跟着视频来的,但是问题却来的很突然 在导入了三个包以及创建了路径以后...
  • 英文 |https://learnvue.co/2021/07/5-vueuse-library-functions-that-can-speed-up-development/翻译 |...
  • 阿里 ahooks介绍(二): useRequest

    千次阅读 2021-01-22 18:37:39
    强大的异步数据请求特殊函数。 二、API说明: const { data, error, loading, run, params, cancel, refresh, mutate, fetches, } = useRequest(service, { manual, initialData, refreshDeps, ...
  • 插件的功能 添加全局方法或者 property。如:vue-custom-element 添加全局资源:指令/过滤器/过渡等。如 vue-touch ...通过全局方法 Vue.use()使用插件。 引入之后,调用use方法使用 // 用 Browserify 或 we
  • Rust之use关键字

    2021-07-08 10:02:34
    use 是 Rust 编程语言的关键字。 关键字是预定义的保留标识符,对编译器有特殊意义。 using 关键字有三个主要用途:
  • .net 中间件的使用 Use,Run,Map,MapWhen,UseWhen .net 提供了几种添加自定义中间件的方法Use,Run,Map,MapWhen,UseWhen Use app.Use(async (context, next) => { Console.WriteLine("use1"); await next...
  • 基于 IntersectionObserver 异步监听方法,实现无线信息流下拉加载, <template> <div id="app"> <!-- 1. 设置容器元素,view-list--> <div class="view-list"> <!-- 2. 循环一...
  • PHP中的use关键字概述

    2021-03-23 22:38:04
    很多开源系统如osCommerce框架中,都会在其源码中找到use关键字,如osCommerce框架中就在index.php文件中出现了这段源码:use osCommerce\OM\Core\Autoloader;use osCommerce\OM\Core\OSCOM;其实,php的use关键字...
  • mysql数据库use 没反应

    2021-01-26 22:15:12
    解决windows下的mysql匿名登陆无法使用mysql数据库的问题原文:解决windows下的mysql匿名登陆无法使用mysql数据库的问题我在windows...查看数据库,只能看到自带的两数据库(information_sch...文章杰克.陈2014-02-2...
  • 本文实例讲述了php中namespace及use用法。分享给大家供大家参考,具体如下:namespace(以下简称ns)。在定义了一ns之后,下面所申明的class、interface、const(不包含variable)都是在申明的ns这“域”里面的。当...
  • vue3的VueUse

    2021-09-19 14:55:38
    方功能方法VueUse是什么安装useWindowScroll方法作用:使用窗口滚动,监听窗口的滚动距离,可以实现顶部吸顶效果用法useIntersectionObserver方法作用:检测目标元素的可见性,监听进入可视区域行为,可用于数据...
  • //此程序写出三个类,triangle,lader,circle;其中triangle类具有类型为double的a,b,c边以及周长,面积属性,//具有周长,面积以及修改三边的功能,还有判断能否构成三角形的boolean类。//lader类具有类型为...
  • 一、useAntdTable(与ant design 中的antdTable控件配合) 二、useFusionTable:(与普通的table控件配合) useTable(带有插件功能,满足九场景应用)
  • PHP use关键字简介,别名函数发布于 2014-07-24 20:32:18 | 364 次阅读 | 评论: 0 | 来源: ...语法吸收了C语言、Java和Perl的特点,入门门槛较低,易于学习,使用广泛,主要适用于Web开发领域。PHP的文件后缀名为ph...
  • Do not use 'new' for side effects的五种解决方法
  • namespace(后面简称ns)还蛮好懂的,在定义了一 ns 之后,下面所申明的 class, interface, const(不包含 variable 哦亲~)都是在申明的 ns 这“域”里面的。当引用一申明了 ns 的包含文件,想要调用这 ns 里面...
  • 用Vue.use()注册全局组件,Vue会当做一插件来使用 如果插件是一对象,必须提供install方法。如果插件是一函数,它会被作为 install 方法。install 方法调用时,会将 Vue 作为参数传入。 第一步:先准备好一...
  • Java,参数中有3

    2021-02-12 23:55:47
    问题以下方法中的3点是什么意思?public void myMethod(String... strings){// method body}#1 热门回答(802 赞)这意味着可以传递零或多String对象(或它们的数组)作为该方法的参数。在你的示例中,你可以将其...
  • 1、Pycharm第方库的安装方法一:pip install包名;pip uninstall包名。方法二:pip install下载路径\包名.whl (需要先下载第包:地址:https://www.lfd.uci.edu/~gohlke/pythonlibs/,找到所需的包并下载保存),...
  • 用**app.use()**注册全局组件,Vue会当做一插件来使用 如果插件是一对象,必须提供 install 方法。如果插件是一函数,它会被作为 install 方法。install 方法调用时,会将 app 作为参数传入。 第一步:先准备好...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 620,820
精华内容 248,328
关键字:

use三个用法