Vue.use与Vue.prototype的区别及说明

Vue.use与Vue.prototype的区别

本人对Vue的原型prototype有了解过,知道这是啥玩意,但对于Vue.use只知会用,却不知其意。今天来看看。

示例

// 引入公共方法扩展
import common from '@/prototypeEx/common.js'
Vue.prototype.common = common
// 引入公共缓存方法
import cacheEx from '@/prototypeEx/cacheEx.js'
Vue.prototype.cacheEx = cacheEx
// 引入大数据展示 插件
const echarts = require('echarts')
Vue.prototype.$echarts = echarts
 
import uploader from 'vue-simple-uploader'
Vue.use(uploader)
// 引人自己封装的全局注册的公共组件
import ztable from '@/components/index.js'
Vue.use(ztable)

解答(本人看完豁然开朗)

Vue.use和Vue.prototype没有本质区别,Vue.use就是在Vue.prototype基础上又封装了一层而已,他们实现的原理都是在Vue.prototype上添加了一个方法,Vue.prototype适合于注册Vue生态外的插件,Vue.use适合于注册Vue生态内的插件。

分析过程

1.$echarts变量前加上$,是防止被组件中的变量意外覆盖。

vue.use源码

Vue.use = function (plugin) {
if (plugin.installed) {
  return;
}
// additional parameters
var args = toArray(arguments, 1);
args.unshift(this);
if (typeof plugin.install === 'function') {
  plugin.install.apply(plugin, args);
} else {
  plugin.apply(null, args);
}
plugin.installed = true;
return this;
};
 
再来看一下一个插件的install方法内容, 我们居然看到了Vue.prototype.$toast = toast;,
// 准备好 install 方法 给 Vue.use() 使用
const install = function (Vue) {
if (install.installed) return;
install.installed = true;
 
// 将包装好的 toast 挂到Vue的原型上,作为 Vue 实例上的方法
Vue.prototype.$toast = toast;
}

小结:

看了源码才知道原来`Vue.use`主要是执行`install`方法,而`install`主要也是执行`Vue.prototype`方法。

所以,其实`Vue.use()`方法的核心就是`Vue.prototype`,只不过又封装了一层,更加的灵活,扩展性更好。

### 总结 把vue理解成一棵树,`Vue.use`和`Vue.prototype`都是在这颗树上挂载插件的方式,不同之处是使用`vue.prototype`,插件不需要实现`install`方法,简单粗暴,拿来就用,但是灵活性不如`Vue.use()`, 而`Vue.use()`,却要求插件必须实现`instal`方法或者该插件本身就是函数,在`install`方法可以完成自己的逻辑, 所以`Vue.use()`的方式更加的强大,灵活,扩展性更好。

但是两者并没有高低之分, 只是有着各自的应用场景,`Vue.prototype`适合于非Vue生态的插件,而`Vue.use()`适合于Vue生态内的插件,如echarts,两者互相配合,一个简单实用,一个灵活扩展性好。而且,`Vue.use`的实现依赖于`Vue.prototype`,最本质的理解就是`Vue.use`包裹着`Vue.prototype`进一步的封装了一次。

关于Vue.prototype和Vue.use()的疑问

问题描述

在 main.js 文件中,通过 Vue.prototype 和 Vue.use() 两种方式注册插件有什么不同呢?

每一个Vue组件都是Vue的实例,所以组件内this可以拿到Vue.prototype上添加的属性和方法。

Vue.use() 相当于使用一个中间件,用于注册第三方库。

// 在组件中,通过 this.$post 来使用方法 
import request from 'utils/request'
Vue.prototype.$post = request.post
 
import Antd from 'ant-design-vue'
import db from 'utils/localstorage'
 
Vue.use(Antd)
Vue.use({
  install (Vue) {
    Vue.prototype.$db = db
  }
})
 
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

首先,不管你采用哪种方式,最终实现的调用方式都是

vm.api()

也就是说,两种方法,实现的原理都是在Vue.prototype上添加了一个方法。所以结论是“没有区别”。

再来说说Vue.use()到底干了什么。

我们知道,Vue.use()可以让我们安装一个自定义的Vue插件。为此,我们需要声明一个install函数

// 创建一个简单的插件 say.js
var install = function(Vue) {
  if (install.installed) return // 如果已经注册过了,就跳过
  install.installed = true
 
  Object.defineProperties(Vue.prototype, {
    $say: {
      value: function() {console.log('I am a plugin')}
    }
  })
}
module.exports = install

然后我们要注册这个插件

import say from './say.js'
import Vue from 'vue'
 
Vue.use(say)

这样,在每个Vue的实例里我们都能调用say方法了。

我们来看Vue.use方法内部是怎么实现的

Vue.use = function (plugin) {
  if (plugin.installed) {
    return;
  }
  // additional parameters
  var args = toArray(arguments, 1);
  args.unshift(this);
  if (typeof plugin.install === 'function') {
    plugin.install.apply(plugin, args);
  } else {
    plugin.apply(null, args);
  }
  plugin.installed = true;
  return this;
};

其实也就是调用了这个install方法而已。

总结

作者:如花菇凉原文地址:https://blog.csdn.net/u012174809/article/details/123394249

%s 个评论

要回复文章请先登录注册