Vue.use()的作用及原理

最新推荐文章于 2024-08-08 03:35:32 发布
最新推荐文章于 2024-08-08 03:35:32 发布
阅读量610 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/web2022050903/article/details/127122159
版权
本文深入探讨Vue.use()的作用和原理，解释为何在某些情况下需要使用Vue.use()来安装插件，以及如何与Vue.prototype.$something相结合。通过分析Vue.use()的源码，揭示其防止重复注册和调用install方法的功能。文中还通过实例说明了在引入如Element UI等组件库时使用Vue.use()的必要性，并鼓励读者通过创建自定义install方法进行实践。
摘要由CSDN通过智能技术生成

最近帮忙面试前端的时候，就随口一问，发现很多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.

Vue.use是什么？

官方对 Vue.use() 方法的说明：通过全局方法 Vue.use() 使用插件，Vue.use 会自动阻止多次注册相同插件，它需要在你调用 new Vue() 启动应用之前完成，Vue.use() 方法至少传入一个参数࿰

最低0.47元/天 解锁文章
东方睡衣
关注
VUE axios使用方法
Zhen0510的博客
07-29 742
axios的安装 $ npm i axios -S $ npm i vue-axios -S //main.js //全局注册 axios import Vue from 'vue'; import axios from 'axios'; Vue.prototype.$axios = axios;//this.$axios使用 //或 vue-axios import Vue from 'vue'; import axios from 'axios'; import vueAxios fr
vue.use()的作用
HannaLh的博客
03-20 5910
vue.use()的作用 官方文档的解释: 安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。 vue.use()使用情景: 可以在项目中使用vue.use()全局注入一个插件，从而不需要在每个组件文件中import插件。例如： 不使用vue.use()注入插件...
VueUse：Vue 3 开发中的强大 Hooks 库
最新发布
weixin_40210565的博客
08-08 81
随着 Vue 3 的推出，Composition API 成为了一个备受关注的新特性，它使得组件的逻辑复用和组织变得更加灵活和高效。VueUse 是一个基于 Vue 3 Composition API 的高质量 Hooks 库，它为开发者提供了一系列简单好用的 Hooks，可以帮助我们快速实现各种功能，提高开发效率。本文将...
浅谈Vue.use
weixin_33974433的博客
12-05 162
先举个? 我们先来看一个简单的事例首先我使用官方脚手架新建一个项目vue init webpack vue-demo然后我创建两个文件index.js plugins.js.我将这两个文件放置在src/classes/vue-use目录下 接下来对这两个文件进行编写 // 文件: src/classes/vue-use/plugins....
vue.use() 的作用详解
热门推荐
冰雪为融的博客
12-04 1万+
官方解释： Vue.use( plugin ) 参数： {Object | Function} plugin 用法： 安装 Vue.js 插件。如果插件是一个对象，必须提供install方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。 该方法需要在调用new Vue()之前被调用。 当 install 方法被同一个插件多次调用，插件将只会被安装一次。 Vue.use()什么时候使用？ 它在使用时...
浅谈Vue.use的使用
12-09
Vue.use 是 Vue.js 框架中...通过理解 Vue.use 的工作原理和如何使用它，开发者可以更好地定制和优化他们的 Vue 应用，提升开发效率和应用性能。无论是编写插件还是使用别人提供的插件，熟悉 Vue.use 都是非常重要的。
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
11-29
在Vue.js框架中，`vm.$delete()` 和 `Vue.use()` 是两个重要的API，它们分别用于处理数据响应式和插件安装。本文将深入解析这两个方法的内部原理。 首先，让我们探讨`vm.$delete()`。在JavaScript ES6之前，删除...
Vue.use使用介绍
m0_68702564的博客
06-12 3244
使用 Vue.use 注册一个全局组件。
Vue.use()在new Vue() 之前使用的原因浅析
01-19
使用Vue前端框架开发有些时间了，官方文档对于插件开发也有详细的介绍。最近强迫症犯了，老在想为什么Vue.use函数执行，要在Vue实例化即new Vue(options)之前。解铃还须系铃人，这个问题只能通过看源码解决，于是。。。 先看Vue.use做了什么 Vue.use = function (plugin: Function | Object) { //Vue构造函数上定义_installedPlugins 避免相同的插件注册多次 const installedPlugins = (this._installedPlugins || (this._installedPlugi
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
12-28
自定义vue组件，一般是局部引用的方式载入，使用的时候，在应用的组件中使用 import moduleName from ‘module’ 导入，在components中注册 <template> <div class=app-NewsInfo> <h3>{{info.title}}</h3> <!-- 新闻评论子组件。 --> <comment id=id></comment> </div> </template> [removed] import comment from ../sub/comment.vue; export default { data() {
vue use
zcy_csdn123的博客
07-30 448
https://segmentfault.com/a/1190000012296163
vue.use()
rddataqingkong的博客
09-25 687
install 是默认的方法。当外界在 use 这个组件的时候，就会调用本身的 install 方法，同时传一个 Vue 这个类的参数。 ———————— code ————————– // 组件 const Loading={ install:function(Vue){ … } } export default Loading // 引用组件 import Loading from ‘...
vue.use是干什么的
A12536365214的博客
11-07 2030
是 Vue.js 框架提供的方法，用于注册插件。插件是一种重要的概念，它们可以扩展 Vue.js 应用的功能和能力，包括指令、组件、混入等等。可以让你轻松地在你的应用中全局注册这些插件，使它们在整个应用中可用。的原理、示例代码、用法，以及总结插件的重要性，同时提供相关资料供进一步学习。以下是一个简单的插件示例，展示如何使用。
Vue.use的作用以及什么时候使用
lxiang222的博客
12-04 1万+
在Vue中引入使用第三方库通常我们都会采用import的形式引入进来，但是有的组件在引入之后又做了Vue.use()操作，有的组件引入进来又进行了Vue.prototype.$something = something，那么它们之间有什么联系呢？ 先说一下Vue.prototype，在Vue项目中通常我们引入axios来进行请求接口数据，通过npm安装之后我们只需在我们的文件中import ax...
vue.use是干什么的？
gzz888的博客
04-26 3204
vue.use 是用来安装 Vue.js 插件。这个插件可以是一个组件也可以是一个函数，插件里要有一个 install 方法，install 方法调用时，他的第一个参数就是 Vue 在调用 vue.use 方法的时候就会执行 Vue.install 方法 该方法需要在调用 new Vue() 之前被调用。 ...
Vue.use 是⼲什么的？
zhangyu812的博客
04-27 206
vue.use 是用来安装 Vue.js 插件。这个插件可以是一个组件也可以是一个函数，插件里要有一个 install 方法，install 方法调用时，他的第一个参数就是 Vue 在调用 vue.use 方法的时候就会执行 Vue.install 方法 该方法需要在调用 new Vue() 之前被调用。 ...
vue.use的实现原理
03-02
vue.use是Vue.js提供的一个全局方法，用于安装Vue插件。它的实现原理如下： 1. 首先，vue.use方法接收一个插件作为参数，这个插件可以是一个对象或者一个函数。 2. 如果插件是一个对象，它必须包含一个install方法。install方法会在Vue实例化之前被调用，可以在这个方法中进行一些全局的初始化操作。 3. 如果插件是一个函数，它会被直接调用，并且传入Vue作为参数。函数内部可以进行一些全局的初始化操作。 4. 在调用install方法或者插件函数时，会将Vue作为参数传入，这样插件就可以使用Vue的功能。 5. 安装插件后，Vue会将插件的功能注入到Vue实例中，使得所有的组件都可以使用插件提供的功能。 6. 当调用vue.use方法安装同一个插件多次时，Vue会自动避免重复安装。 总结一下，vue.use方法的实现原理就是通过调用插件的install方法或者插件函数，并将Vue作为参数传入，从而实现对插件的安装和注入。这样一来，所有的组件都可以使用插件提供的功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值