浅谈Vue.use

6 篇文章 0 订阅

先举个?


我们先来看一个简单的事例
首先我使用官方脚手架新建一个项目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/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<any> {
  start = start || 0
  let i = list.length - start
  const ret: Array<any> = 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
}
// 这种方式我们只能在一个函数中编写插件逻辑,可封装性就不是那么强了

转载自:https://segmentfault.com/a/1190000012296163
作者:Frank_Lin

### 回答1: vue.component和vue.use都是Vue.js中的方法,但是它们的作用不同。 vue.component用于注册全局组件,可以在任何Vue实例中使用。例如: ``` Vue.component('my-component', { // 组件选项 }) ``` 而vue.use用于安装Vue.js插件,可以在Vue实例中使用插件提供的功能。例如: ``` Vue.use(myPlugin) ``` 其中myPlugin是一个Vue.js插件,它需要提供一个install方法。在install方法中,可以注册全局组件、指令、混入等。例如: ``` const myPlugin = { install(Vue, options) { // 注册全局组件 Vue.component('my-component', { // 组件选项 }) // 注册全局指令 Vue.directive('my-directive', { // 指令选项 }) // 注册全局混入 Vue.mixin({ // 混入选项 }) } } ``` 总之,vue.component用于注册全局组件,vue.use用于安装Vue.js插件。 ### 回答2: 在Vue.js框架中,Vue.component和Vue.use都是用于组件注册的方法。但它们之间有一些区别。 Vue.component是Vue.js用于定义全局或局部组件的方法,可以在全局或局部范围内注册一个组件,使之在应用中可以被多个组件使用。它接收两个参数:第一个参数是组件的名字,第二个参数是一个选项对象,如下: ``` Vue.component('my-component', { // 组件选项 }) ``` Vue.useVue.js插件的方法,用于在全局范围内注册Vue插件。Vue插件通常是通过一个对象或一个函数暴露出来,该对象或函数要具有一个install方法。使用Vue.use可以安装插件并将该插件自动注册到Vue实例的所有组件中。使用Vue.use时,必须将插件作为参数传递给Vue.use方法,如下: ``` // 引入插件 import MyPlugin from 'path/to/MyPlugin.js' // 安装插件 Vue.use(MyPlugin) ``` 总之,Vue.component和Vue.use都是用于组件注册的方法,但Vue.component用于组件的定义和注册,Vue.use则用于全局插件的注册和安装,二者的用途和效果不同。 ### 回答3: Vue.js是一款非常流行的JavaScript框架,它提供了很多有用的特性和工具来方便我们开发Web应用程序。Vue.js中常用的两个API是vue.component和vue.use。它们都是以插件的形式来扩展Vue.js的功能。虽然它们有一些相似之处,但是也有一些不同之处。本文将从多个方面对它们进行比较,以便更好地理解它们的作用和用法。 1、作用 vue.component的作用是注册一个全局或局部组件。这个组件可以被其他组件或者模板文件引用。我们可以为组件设置属性(prop)和事件(event),并可以在组件中使用响应式的数据。这样可以实现组件的代码重用和灵活性。 vue.use的作用是注册一个Vue.js插件。插件是一个包含了一些预置功能的JavaScript对象,可以扩展Vue.js的全局或局部功能。插件一般包含了一些全局的属性、指令、组件以及一些工具方法。使用插件可以方便地扩展Vue.js的功能,而且插件还可以被其他开发者共享和复用。 2、用法 vue.component的用法: 全局注册 Vue.component('component-name', { // options }) 局部注册 new Vue({ // ... components: { 'component-name': { // options } } }) vue.use的用法: Vue.use(plugin) 3、调用方式 vue.component 全局组件可以直接在任何地方使用,局部组件只能在注册组件的实例或其子组件中使用。 vue.use 插件可以在Vue根实例之前调用,也可以在Vue根实例之后调用。在调用use方法之后,插件会被安装并立即生效。插件通常是全局可用的,可以在Vue的组件中使用。 4、局限性 vue.component 局部注册的组件不可以在父级组件中使用,只能在父级组件的模板中使用。此外,全局组件也有可能会被其他库或者开发者使用同样的名称而冲突。 vue.use 由于插件本质上是一个JavaScript对象,因此插件可以被修改或覆盖。此外,插件还必须暴露一个install方法,否则使用use安装插件时会报错。 总结: vue.component是Vue.js的组件注册方法,用于注册全局或局部的组件,以实现组件的代码复用和灵活性。 vue.useVue.js的插件注册方法,用于注册插件以扩展Vue.js的全局或局部功能,以方便开发者开发和复用Vue.js的扩展功能。 两个API虽然有很多相似之处,但是在实际使用中也存在很多不同之处。了解这些差异和各自的用法可以帮助我们更好地使用Vue.js,提高开发效率和质量。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值