使用Vue.prototype 和 vue.use()实现全局方法的区别
转载自:https://www.jianshu.com/p/03c6b1b2941b经常在main.js中看到Vue.prototype.$xxx = xxx;和使用vue.use()api.js我在学习使用的过程中,都实现了数据调用想知道这两者的区别首先,不管你采用哪种方式,最终实现的调用方式都是vm.api()也就是说,两种方法,实现的原理都...
·
转载自:https://www.jianshu.com/p/03c6b1b2941b
经常在main.js中看到
Vue.prototype.$xxx = xxx;
和使用vue.use()
api.js
我在学习使用的过程中,都实现了数据调用
想知道这两者的区别
首先,不管你采用哪种方式,最终实现的调用方式都是
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
方法而已。
更多推荐
已为社区贡献24条内容
所有评论(0)