vue.use和vue.prototype的区别

今天看自己项目代码，打开引入插件包的main.js，留意到引入包或者文件有两种方式：

import Vue from 'vue'
import echarts from 'echarts'
import global from './global.js'     //我自己创建的全局变量函数文件
Vue.prototype.$echarts=echarts;
Vue.use(global)

于是就对上述两种方式引入产生了疑问，这两种方式引入有什么区别吗？
通过资料查询，了解到：

1、不是为了vue写的插件(插件内要处理)不支持Vue.use()加载方式
2、非vue官方库不支持new Vue()方式
3、每一个vue组件都是Vue的实例，所以组件内this可以拿到Vue.prototype上添加的属性和方法。

其实我们知道Vue.prototype是在原型上定义，使其在每个Vue中的实例中可用，那么Vue.use()流程是怎么走的？我们可以通过源代码了解其过程：
创建自定义全局函数global.js


// 全局函数
exports.install = function (Vue, options) {Vue.prototype.alertResult = function (options){//全局函数1var result;switch(options){case 'success':result='操作成功';break; case 'operate fail':result='操作失败';break;   case 'invalid data':result='数据格式错误';break;           case 'request time out':result='请求超时';break;        }return result;};};

通过上述引入方式，我们进行引入注册，这样子我们就可以在其他页面使用该全局方法如 this.alertResult (‘success’)
那么，我们可以通过源代码分析，了解Vue.use()实现过程：

export function initUse (Vue: GlobalAPI) {/*https://cn.vuejs.org/v2/api/#Vue-use*/Vue.use = function (plugin: Function | Object) {/* istanbul ignore if *//*标识位检测该插件是否已经被安装*/if (plugin.installed) {return}// additional parametersconst args = toArray(arguments, 1)/*a*/args.unshift(this)if (typeof plugin.install === 'function') {/*install执行插件安装*/plugin.install.apply(plugin, args)} else if (typeof plugin === 'function') {plugin.apply(null, args)}plugin.installed = truereturn this}
}

这就是vue.use和vue.prototype的区别，希望能够帮助大家进一步理解
参考：https://www.jianshu.com/p/2d8d62355684

vue.use和vue.prototype的区别相关推荐

Vue.use()和Vue.prototype详解
Vue.use()作用官方文档中提到,Vue.use()可以用来注册全局的插件.使用Vue.use()后可以使得插件能够在项目的任意位置上使用. 那么什么时候使用Vue.use()呢?其实官方文档中 ...
vue方法调用失败后多次调用_浅析Vue中 computed / watch / methods的区别
思考:请说下Vue中computed 和 watch 的区别( 面试题 ) 构造选项 computed / watch / methods computed ● computed 起初构想在Vue的 ...
[vue] 组件和插件有什么区别？
[vue] 组件和插件有什么区别? 组件 (Component) 是用来构成你的 App 的业务模块,它的目标是 App.vue.插件 (Plugin) 是用来增强你的技术栈的功能模块,它的目标是 V ...
微信小程序和vue双向绑定哪里不一样_浅析Vue 和微信小程序的区别、比较
写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别. 一.生命周期先贴两张图: vue生命周期小程序生命周期相比之下,小程序的钩子函数要简单得多. vue的钩子函数 ...
vue计算属性与监听器的区别
vue计算属性与监听器的区别计算属性(computed) 监听器(watch) 监听data中没有的值监听data中有的值使用时触发使用不会触发值有变化就触发值有变化就触发没有settt ...
Vue3项目生成并下载二维码，关于vue-qr.vue与qrcode.vue插件之间的区别
1.vue-qr.vue与qrcode.vue大致区别 vue-qr.vue:体积较大,大概4M左右,可以给二维码添加中心logo,生成二维码为img标签,可下载 qrcode.vue:体积较小,不能 ...
小程序生命周期与vue生命周期的关系、区别
生命周期目录生命周期 1.什么是生命周期? 2.生命周期的分类 3.什么是生命周期函数 5.应用的生命周期函数 6.页面的生命周期函数数据响应 ✅作者简介: 我是痴心阿文,你们的学友哥,今天给大 ...
vue.extend与vue.component的区别和联系
一味的闷头开发,却对基础概念缺乏理解,是个大坑... 查阅官网后现对自己的理解记录一下,用于日后复习巩固 Vue.extend({}) 简述:使用vue.extend返回一个子类构造函数,也就是预设部 ...
vue-router路由、mixin混入、vue-resource、axios、计算属性watch、moment.js、vuex、vue-cli、数据双向绑定、搭建vue环境、vue实例、配置启动项
路由vue-router介绍: // 1.前端路由核心:锚点值的改变,根据不同的锚点值,渲染指定dom位置的不同数据.// 2.vue中,模板数据不是通过ajax请求的,而是调用函数获取到模板内容// ...

vue.use和vue.prototype的区别

vue.use和vue.prototype的区别相关推荐

最新文章

热门文章