VUE源码分析之全局函数use原理

最新推荐文章于 2024-05-16 09:53:44 发布

夜跑者

最新推荐文章于 2024-05-16 09:53:44 发布

阅读量160

点赞数

分类专栏： VUE学习

本文链接：https://blog.csdn.net/liubangbo/article/details/102573268

版权

VUE学习专栏收录该内容

79 篇文章 4 订阅

订阅专栏

Vue提供了全局方法use， Vue.use(plugin)。Vue官网对此有描述：

安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。

该方法需要在调用 new Vue() 之前被调用。

当 install 方法被同一个插件多次调用，插件将只会被安装一次。

我们按照官网描述写一个小例子：


<!DOCTYPE html>
<html>
 
<head>
 
    <meta charset="utf-8">
    <title>vue demo</title>
 
</head>
 
 
<body>
 
<script src="./vue.js"></script>
 
<div id="app">

</div>
 
<script>
    var myPlugin = {}；
    myPlugin.install = function(_Vue){
        console.log("install args 0: " + arguments[0]);
        console.log("install args 1: " + arguments[1]);
        console.log("install args 2: " + arguments[2]);
        console.log("install Vue version: " + _Vue.version);
    }
    Vue.use(myPlugin, "para1", "para2");
    Vue.use(myPlugin, "para3", "para4");
    new Vue({
        el:"#app",
        data:{
            message: "hello"
        }
    })
    
</script>
 
</body>
</html>

首先定义一个myPlugin 对象，并给这个对象添加一个install方法。安装官网描述必须提供这个install方法。我们调用Vue全局方法use，把myPlugin对象作为参数传递给use参数，并传递了其他参数。

通过打印我们可以看到：

install args 0：会打印出Vue的构造函数

intall args 1 ：会打印出para1

intall args 2 ：会打印出para2

intall Vue version ：会打印出Vue的版本号

而para3，para4 没有打印，从打印看出 install 方法被同一个插件多次调用，插件将只会被安装一次。

我们看看Vue.use 这个全局函数怎么实现的。

    Vue.use = function (plugin) {
      var installedPlugins = (this._installedPlugins || (this._installedPlugins = []));
      if (installedPlugins.indexOf(plugin) > -1) {
        //这个就是检测插件是否已经被注入了，如果已注入就直接返回
        return this
      }

      // additional parameters
      var args = toArray(arguments, 1); //解析出第一个形参之后的其他形参
      args.unshift(this);  //把Vue构造函数插入到args数组中的第一个元素之前
      if (typeof plugin.install === 'function') {
        plugin.install.apply(plugin, args); //调用plugin 对象的install方法
      } else if (typeof plugin === 'function') {
        plugin.apply(null, args);
      }
      installedPlugins.push(plugin);
      return this
    };

代码很简单，直接在代码中注释了。关键点在于args.unshift（this）把Vue给插入，这个插件就可以使用Vue了。

也就解释了在install方法中 _Vue.version可以打印出Vue的版本号了。

夜跑者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE源码分析之全局函数use原理

Vue提供了全局方法use， Vue.use(plugin)。Vue官网对此有描述：安装 Vue.js 插件。如果插件是一个对象，必须提供install方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。该方法需要在调用new Vue()之前被调用。当 install 方法被同一个插件多次调用，插件将只会被安装一次...
复制链接

扫一扫