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

不才
2019-03-23 07:34:37

<span style="color: rgb(51, 51, 51);">首先,不管你采用哪种方式,最终实现的调用方式都是 </span>

vm.属性()

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

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

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

<span class="hljs-comment" style="box-sizing: border-box; color: rgb(153, 153, 136);">// 创建一个简单的插件 say.js</span>
<span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">var</span> install = <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">function</span>(<span class="hljs-params" style="box-sizing: border-box;">Vue</span>) </span>{
  <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">if</span> (install.installed) <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">return</span> <span class="hljs-comment" style="box-sizing: border-box; color: rgb(153, 153, 136);">// 如果已经注册过了,就跳过</span>
  install.installed = <span class="hljs-literal" style="box-sizing: border-box; color: rgb(0, 128, 128);">true</span>

<span class="hljs-built_in" style="box-sizing: border-box; color: rgb(0, 134, 179);">Object</span>.defineProperties(Vue.prototype, {
<span class="hljs-attr" style="box-sizing: border-box;">$say</span>: {
<span class="hljs-attr" style="box-sizing: border-box;">value</span>: <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">function</span>() </span>{<span class="hljs-built_in" style="box-sizing: border-box; color: rgb(0, 134, 179);">console</span>.log(<span class="hljs-string" style="box-sizing: border-box; color: rgb(221, 17, 68);">'I am a plugin'</span>)}
}
})
}
<span class="hljs-built_in" style="box-sizing: border-box; color: rgb(0, 134, 179);">module</span>.exports = install

然后我们要注册这个插件

<span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">import</span> say <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">from</span> <span class="hljs-string" style="box-sizing: border-box; color: rgb(221, 17, 68);">'./say.js'</span>
<span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">import</span> Vue <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">from</span> <span class="hljs-string" style="box-sizing: border-box; color: rgb(221, 17, 68);">'vue'</span>

Vue.use(say)

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

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

Vue.use = <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">function</span> (<span class="hljs-params" style="box-sizing: border-box;">plugin</span>) </span>{
<span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">if</span> (plugin.installed) {
<span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">return</span>;
}
<span class="hljs-comment" style="box-sizing: border-box; color: rgb(153, 153, 136);">// additional parameters</span>
<span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">var</span> args = toArray(<span class="hljs-built_in" style="box-sizing: border-box; color: rgb(0, 134, 179);">arguments</span>, <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 128, 128);">1</span>);
args.unshift(<span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">this</span>);
<span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">if</span> (<span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">typeof</span> plugin.install === <span class="hljs-string" style="box-sizing: border-box; color: rgb(221, 17, 68);">'function'</span>) {
plugin.install.apply(plugin, args);
} <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">else</span> {
plugin.apply(<span class="hljs-literal" style="box-sizing: border-box; color: rgb(0, 128, 128);">null</span>, args);
}
plugin.installed = <span class="hljs-literal" style="box-sizing: border-box; color: rgb(0, 128, 128);">true</span>;
<span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">return</span> <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">this</span>;
};

<span style="color: rgb(51, 51, 51);">其实也就是调用了这个</span>install<span style="color: rgb(51, 51, 51);">方法而已。</span>