Vue-第三方库扩展

2022-10-06 12:46:18

之前写过一篇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()
})

插件形式

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

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

  • 作者:奋飛
  • 原文链接:https://ligang.blog.csdn.net/article/details/81296265
    更新时间:2022-10-06 12:46:18