Vue.use()的作用及原理解析

目录
  • 前言
  • Vue.use是什么？
  • Vue.use() 的源码中的逻辑
  • Vue.use()什么时候使用？

前言

最近帮忙面试前端的时候，就随口一问，发现很多2年以上的vue开发者说不出vue.use()为什么用，什么时候用，原理是什么
所以我整理一下网上的资源，写一篇毕竟容易理解的文章

在Vue中引入使用第三方库通常我们都会采用import的形式引入进来，但是有的组件在引入之后又做了Vue.use()操作，有的组件引入进来又进行了Vue.prototype.$something = something，那么它们之间有什么联系呢？

先说一下Vue.prototype，在Vue项目中通常我们引入axios来进行请求接口数据，通过npm安装之后我们只需在我们的文件中import axios from "axios"就可以使用，有时候我们会加上一句Vue.prototype.$axios = axios，prototype我们应该是再熟悉不过了

Vue.prototype.axios，通过我们会在全局注册这个方法，然后在周后的文件中都可以通过$axios直接来使用axios

Vue.use是什么？

官方对 Vue.use() 方法的说明：通过全局方法 Vue.use() 使用插件，Vue.use 会自动阻止多次注册相同插件，它需要在你调用 new Vue() 启动应用之前完成，Vue.use() 方法至少传入一个参数，该参数类型必须是 Object 或 Function，如果是 Object 那么这个 Object 需要定义一个 install 方法，如果是 Function 那么这个函数就被当做 install 方法。在 Vue.use() 执行时 install 会默认执行，当 install 执行时第一个参数就是 Vue，其他参数是 Vue.use() 执行时传入的其他参数。就是说使用它之后调用的是该组件的install 方法。

Vue.use() 的源码中的逻辑

export function initUse (Vue: GlobalAPI) {
 Vue.use = function (plugin: Function | Object) {
  const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
  if (installedPlugins.indexOf(plugin) > -1) {
   return this
  }
  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
 }
}

在源码中首先限制了它传入的值的类型只能是Function或者Object，然后判断了该插件是不是已经注册过，防止重复注册，然后调用了该插件的install方法，源码中也有介绍到Vue.use()可以接受多个参数的，除第一个参数之后的参数我们都是以参数的形式传入到当前组件中。

Vue.use()什么时候使用？

它在使用时实际是调用了该插件的install方法，所以引入的当前插件如果含有install方法我们就需要使用Vue.use()，例如在Vue中引用Element如下：

import Vue from 'vue'
import Element from 'element-ui'
Vue.use(Element)

因为在Element源码中会暴露除install方法，所以才需要用Vue.use()引入。

我们也可以在自己的vue项目中自己定义一个install方法，然后通过Vue.use()方法来引入测试一下：

const plugin = {
  install() {
    alert("我是install内的代码")
  },
}
import Vue from "vue"
Vue.use(plugin) // 页面显示"我是install内的代码"

当我们打开页面就会弹出“我是install内的代码”提示。

到此这篇关于Vue.use()的作用及原理解析的文章就介绍到这了,更多相关Vue.use()作用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue.use()的用法和install的用法解析

    Vue.use()的用法和install的用法解析

    目录 Vue.use()和install用法 介绍 为什么这样做? Vue.use为什么要使用install 疑问 从源码分析 vue官网是这样说的 Vue.use()和install用法 介绍 在vue的main.js中,我们经常使用Vue.use(xx)方法.比如我们引入elementUI,在main.js中,我们一般通过如下代码引入: import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.cs

  • 浅谈Vue.use到底是什么鬼

    我们在使用Vue做项目开发的时候,看到不少轮子都是通过Vue.use来进行使用,感觉甚是高大上. 不过Vue.use到底是什么鬼?不妨来看个究竟. 其实这些轮子都可以称之为插件,它的功能范围没有严格的限制,一般包含如下几种: 添加全局方法或者属性.如: vue-custom-element 添加全局资源:指令/过滤器/过渡/组件等.如 vue-touch 通过全局混入来添加一些组件选项.如 vue-router 添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现. 一个

  • Vue源码之关于vm.$delete()/Vue.use()内部原理详解

    Vue源码之关于vm.$delete()/Vue.use()内部原理详解

    vm.$delete() vm.$delete用法见官网. 为什么需要Vue.delete()? 在ES6之前, JS没有提供方法来侦测到一个属性被删除了, 因此如果我们通过delete删除一个属性, Vue是侦测不到的, 因此不会触发数据响应式. 见下面的demo. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta na

  • Vue 实现创建全局组件,并且使用Vue.use() 载入方式

    自定义vue组件,一般是局部引用的方式载入,使用的时候,在应用的组件中使用 import moduleName from 'module' 导入,在components中注册 <template> <div class="app-NewsInfo"> <h3>{{info.title}}</h3> <!-- 新闻评论子组件. --> <comment :id="id"></comment&

  • 详解Vue.use自定义自己的全局组件

    详解Vue.use自定义自己的全局组件

    通常我们在vue里面使用别人开发的组件,第一步就是install,第二步在main.js里面引入,第三步Vue.use这个组件.今天我简单的也来use一个自己的组件. 这里我用的webpack-simple这个简单版本的脚手架为例,安装就不啰嗦了,直接进入正题 首先看下目前的项目结构: webpack首先会加载main.js,所以我们在main的js里面引入.我以element ui来做对比说明 import Vue from 'vue' import App from './App.vue'

  • 浅谈Vue.use的使用

    浅谈Vue.use的使用

    vue.use(plugin, arguments) 语法 参数:plugin(Function | Object) 用法: 如果vue安装的组件类型必须为Function或者是Object 如果是个对象,必须提供install方法 如果是一个函数,会被直接当作install函数执行 install函数接受参数,默认第一个参数为Vue,其后参数为注册组件时传入的arguments 先举个? 我们先来看一个简单的事例 首先我使用官方脚手架新建一个项目vue init webpack vue-dem

  • Vue中Vue.use()的原理及基本使用

    Vue中Vue.use()的原理及基本使用

    目录 前言 1. 举例理解 2. 分析源码 3. 小结 总结 前言 相信很多人在用 Vue 使用别人的组件时,会用到 Vue.use() .例如:Vue.use(VueRouter).Vue.use(MintUI).但是用 axios时,就不需要用 Vue.use(axios),就能直接使用.那这是为什么呐? 因为 axios 没有 install. 1. 举例理解 在新建的项目中创建两个文件:plugins.js use.js: // plugins.js const Plugin1 = {

  • Vue.use()在new Vue() 之前使用的原因浅析

    使用Vue前端框架开发有些时间了,官方文档对于插件开发也有详细的介绍.最近强迫症犯了,老在想为什么Vue.use函数执行,要在Vue实例化即new Vue(options)之前.解铃还须系铃人,这个问题只能通过看源码解决,于是... 先看Vue.use做了什么 Vue.use = function (plugin: Function | Object) { //Vue构造函数上定义_installedPlugins 避免相同的插件注册多次 const installedPlugins = (th

  • vue自定义组件(通过Vue.use()来使用)即install的用法说明

    在vue项目中,我们可以自定义组件,像element-ui一样使用Vue.use()方法来使用,具体实现方法: 1.首先新建一个Cmponent.vue文件 // Cmponent.vue <template> <div> 我是组件 </div> </template> <script> export default { } </script> <style scoped> div{ font-size:40px; col

  • Vue.use()的作用及原理解析

    Vue.use()的作用及原理解析

    目录 前言 Vue.use是什么? Vue.use() 的源码中的逻辑 Vue.use()什么时候使用? 前言 最近帮忙面试前端的时候,就随口一问,发现很多2年以上的vue开发者说不出vue.use()为什么用,什么时候用,原理是什么所以我整理一下网上的资源,写一篇毕竟容易理解的文章 在Vue中引入使用第三方库通常我们都会采用import的形式引入进来,但是有的组件在引入之后又做了Vue.use()操作,有的组件引入进来又进行了Vue.prototype.$something = somethi

  • Spring Boot和Vue跨域请求问题原理解析

    这篇文章主要介绍了Spring Boot和Vue跨域请求问题原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 使用Spring Boot + Vue 做前后端分离项目搭建,实现登录时,出现跨域请求 Access to XMLHttpRequest at 'http://localhost/open/login' from origin 'http://localhost:8080' has been blocked by CORS pol

  • Vue的双向数据绑定实现原理解析

    Vue的双向数据绑定实现原理解析

    这篇文章主要介绍了Vue的双向数据绑定实现原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一.概述 vuejs是采取数据劫持结合发布者-订阅者模式的方式实现model-->view的数据绑定,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的数据回调. 至于view-model的绑定是对表单添加了change(input)的事件 二.思路 1.实现一个数

  • vue.js数据响应式原理解析

    vue.js数据响应式原理解析

    目录 Object.defineProperty() 定义 defineReactive 函数 递归侦测对象的全部属性 流程分析 observe 函数 Observer 类 完善 defineReactive 函数 One More Thing Object.defineProperty() 得力于 Object.defineProperty() 的特性,vue 的数据变化有别于 react 和小程序,是非侵入式的.详细介绍可以看 MDN 文档,这里特别说明几点: get / set 属性是函数

  • Vue slot插槽作用与原理深入讲解

    目录 前言 什么是Slot 栗子 在插槽中使用数据 备胎插槽 具名插槽 覆盖问题 作用域插槽 具名插槽的作用域 解构插槽Prop 具名插槽的缩写 $scopedSlots 前言 在2.6.0中,具名插槽 和 作用域插槽 引入了一个新的统一的语法 (即v-slot 指令).它取代了 slot 和 slot-scope. 什么是Slot 当我们生成好组件模板后,为了方便用户在调用组件的时候自定义组件内部分元素的样式或内容.于是在设计组件模板的时候会挖一个坑,等待用户使用v-slot来替换坑的slot

  • Django路由层URLconf作用及原理解析

    一.Django中路由的作用 URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL与要为该URL调用的视图函数之间的映射表. 你就是以这种方式告诉Django,对于这个URL调用这段代码,对于那个URL调用那段代码. from django.conf.urls import url urlpatterns = [ url(正则表达式, views视图函数,参数,别名), ] Django 2.0版本中的路由系统已经替换成下面的写法(官方文档): from django

  • Vue组件生命周期运行原理解析

    Vue实例有一个完整的生命周期,从开始创建.初始化数据.编译模板.挂在DOM.渲染-更新-渲染.卸载等一系列过程,我们成为Vue 实例的生命周期,钩子就是在某个阶段给你一个做某些处理的机会. beforeCreate( 创建前 ) 在实例初始化之后,数据观测和事件配置之前被调用,此时组件的选项对象还未创建,el 和 data 并未初始化,因此无法访问methods, data, computed等上的方法和数据. created ( 创建后 ) 实例已经创建完成之后被调用,在这一步,实例已完成以

  • Vue nextTick的原理解析

    Vue nextTick的原理解析

    使用过Vue的小伙伴们都知道,Vue里的nextTick可以获取到更新后的DOM, 今天我就来讲解下nextTick里面究竟做了什么? 开始讲解前,我们需要知道了解一个概念,那就是Event Loop Event Loop Event Loop翻译过来就是事件循环, 一个Event Loop会包括一个或多个task队列,持续线程会从队列中取出最早进入队列的任务进行执行,被取出的任务就叫做macroTask(宏任务), 每个macroTask都有一个任务源, 每个macroTask处理完之后就从队

  • Vue中的基础过渡动画及实现原理解析

    前言 在日常开发中 动画是必不可少的一部分 不仅能让元素直接的切换显得更加自然 同时也能极大的增强用户体验 因此 在Vue之中也提供了非常强大的关于动画这方面的支持 Vue不仅支持用CSS来写一些过渡效果 同时也是支持JS的 不过在这个文章中讲述的都是如何利用CSS来实现过渡动画.keyframes动画以及实现的原理 过渡动画实现的原理 1.首先最基础的一点在于 如果你想要在单元素/单个组件之中实现过渡动画 那么 你需要在元素/组件所在的HTML标签之外包裹一层  <transition>标签

  • vue.js响应式原理解析与实现

    从很久之前就已经接触过了angularjs了,当时就已经了解到,angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很好奇vue.js是如何监测数据更新并且重新渲染页面.今天,就我们就来一步步解析vue.js响应式的原理,并且来实现一个简单的demo. 首先,先让我们来了解一些基础知识. 基础知识 Object.defineProperty es5新增了Object.defineProperty这个api,它可以允许我们为对象的属性来设定gette

随机推荐