理解vue中的组件和插件机制

发表于 | 本文总阅读量 次

一、前言

Vue是一套用于构建用户界面的渐进式框架。通俗来讲Vue.Js是一个轻量级，易上手，易使用的，便捷灵活的MVVM框架。

二、vue组件

vue组件是vue的强大功能之一，组件具有封装可复用的特点，可以在复杂的应用中拆分成独立模块使用，所有的vue组件同时也都是vue的实例，可接受相同的选项对象。

2.1 Vue组件的注册

Vue组件的注册有两种方式，一是全局注册，另一种是局部注册。

2.1.1 全局注册

1.方法
通过Vue.component(‘组件名’, {
// options 选项
})
2.特点
全局注册的组件能够在任何地方使用；所有的vue实例化都会去渲染这个组件；
全局注册往往会存在一些缺点，比如在webpack构建的系统中，全局注册所有的组件意味着即使你不再使用一个组件，但是它仍然会在你最终构建的结构中，这样就增加了没有必要的js。

2.1.2 局部注册

1.方法
通过Vue实例选项中的components选项注册仅在其作用域中的可用局部组件
2.在模块系统中局部注册
可以新建components文件夹，将每个组件放在各自的文件中，通过模块导入导出实现组件局部注册

三、vue插件

插件通常是Vue添加全局功能使用，插件的功能范围包括：

  • 添加全局方法或者property
  • 添加全局资源：指令、过滤器、过渡等
  • 通过全局混入来添加一些组件选项，如vue-router
  • 添加vue实例方法，通过把它们添加到 Vue.prototype 上实现。
  • 一个库，提供自己的 API，同时提供上面提到的一个或多个功能

3.1 使用插件
通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue()启动应用之前完成。

3.2 开发插件
Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或 property
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }

  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })

  // 3. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })

  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}

3.3 主要实现方法

  • 暴露一个install方法
  • 在Vue原型上做一系列的功能或者函数挂载
  • Vue.use时传入定制化参数

3.4 全局弹框插件开发

import MessageBoxVue from '../components/MessageBox'

let Message = {
  install(Vue) {
    // 创建了一个构造器
    let MessageConstruct = Vue.extend(MessageBoxVue) 

    Vue.prototype.$message = function(options, callback) {

      let message = new MessageConstruct();
      message.options = Object.assign({}, options);


      let vm = message.$mount()

      let div = document.createElement('div');

      document.body.appendChild(div)
      div.appendChild(vm.$el)

      function destroy() {
        div.parentNode.removeChild(div);

      }
      if(typeof callback === 'function') {
        callback({
          destroy
        })
      }
      return vm
    }
  }
}
export default Message