​ 之前写过一篇 Vue-组件扩展 的文章,通常我们采用 extendsmixins 进行扩展组件;但项目中我们经常还会使用一些第三方库(Lodash, Moment等),如何调用这些工具方法智者见智仁者见仁。

​ 我司现在大部分都是大数据可视化方面的工作,所以在系统中,倡导封装了一批图表的数据转换方法,便于大家的调用和系统的统一。

​ 在第一个项目中,将这批数据转换方法直接封装到了全局 mixins 中(当然,mixins中还用其他共同业务的处理),但是总有一些模块和页面是不需要这些图表转换方法(需要的模块也并非要全量引入),总觉得不是很合理;于是,在后面的系统中,将这些工具方法单独抽离成 data-factory.js,需要的模块自己调用,但这同时带来了另外一个问题,大部分模块都存在类似的相同代码 import {data2Line, data2Pie} from ‘@/util/data-factory’

全局变量

将这些工具类(第三方库)挂载到window

// 入口文件
window._ = require('lodash')

全局变量遭到了污染,且服务器端渲染时,并不能获取window对象!

单独引入

这是上述提到的我们项目中使用的方式

// 具体页面
import _ from 'lodash'
// 或者独立引入某些方法
import {unzip} from 'lodash'

比较繁琐,需要的页面都需引入,如果后续想删除库,需要找到每一个引用该库的文件并删除该库的引用;同时,如果构建工具没设置正确,可能导致该库的多份拷贝被引用。

挂载到Vue原型上

// 入口文件
import _ from 'lodash';
Object.defineProperty(Vue.prototype, '_', { value: _ });

configurable、enumerable、writable 默认都为false,即不能被改变、删除和赋值,也就是只读的

这里只能通过vue实例调用,注意this指向问题!

setTimeout(() => { // 这里用箭头函数
    this._.head()
})

插件形式

export default {
  install: function(Vue) {
    // 添加全局方法Vue.|资源Vue.directive<>|全局mixin组件选项|Vue.prototype实例方法
  }
}

// 入口文件
Vue.use(...)

https://cn.vuejs.org/v2/guide/plugins.html

Logo

前往低代码交流专区

更多推荐