vue源码解析之插件入侵机制

最新推荐文章于 2024-02-19 00:38:14 发布

Drenched-oldTimes

最新推荐文章于 2024-02-19 00:38:14 发布

阅读量744

点赞数

分类专栏： vue2.x 文章标签：源码 vue源码解析 vue插件插件入侵机制

本文链接：https://blog.csdn.net/sinat_38529191/article/details/77574515

版权

本文探讨了Vue框架中的插件扩展机制，强调其在框架可扩展性中的重要性。通过分析，指出`Vue.use`是插件入侵的起点，全局的指令、过滤器在根实例初始化时被合并到$options中，而mixin方法通过直接合并到构造函数的options影响所有子组件。此外，还介绍了如何添加实例方法，即在Vue原型上挂载方法，使得实例和子组件可以继承使用。

摘要由CSDN通过智能技术生成

先说一点概念性的东西哈~

插件：聪明的程序员往往希望能更高(tou)效(lan)的完成指定的工作，插件就是按照一定的封装方式，暴露接口。让我们利用这些接口更快捷的实现功能。升职加薪。每个框架都提供了插件的扩展机制。这是框架可扩展性必不可少的一个部分。插件机制越简单。对于框架的生态的发展大有好处。jquery提供了$.fn.extend,angular有对应的依赖注入，module机制。既然vue那么精美，能迅速火起来。插件这部分的可扩展性必须顶级。这里接下来我们看看vue插件的入侵机制。

说到插件。我们最多使用的一个方法。无非就是 Vue.use(MyPlugin, { someOption: true });

这么说的话，这个方法应该是所有插件入侵vue的起点。没错。

那么我们来看看这个方法：

Vue.use = function (plugin) {
    /* istanbul ignore if */
    if (plugin.installed) {
      return  //假如插件已经初始化过就不再继续。避免插件重复入侵
    }
    // additional parameters
    var args = toArray(arguments, 1);//获取插件的配置参数
    args.unshift(this);
    if (typeof plugin.install === 'function') {
      plugin.install.apply(plugin, args); //调用的是插件的install方法；
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args);//若插件本省就是一个函数。则直接调用该函数
    }
    plugin.installed = true;
    return this
  };

Vue.use这个方法让我们知道插件入侵的起点是调用插件自身的install函数。那么不同的插件入侵的机制有些时候很不一样。我们可以知道。这个不一样肯定发生在install函数中。我们来看看官方的install函数中的一些方式：

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或属性
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }
  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })
  // 3. 注入组件
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })
  // 4. 添

最低0.47元/天解锁文章