数据中台门户
技术栈:Vue Vue-router Vuex ES6 Webpack
通过配置Webpacksplitchunks,提取公共代码,降低代码包体积;
在实现弹窗功能时,使用refs的方法获取子组件,
由于Vue中数据更新是异步的,因而造成不能获取子组件,
通过使用nextTick的方法来解决了此问题;
在使用v-for指令时,通过使用key属性为节点添加唯一标识,
因而在数据更新,视图变化时,
diff算法能够进行精细化对比,实现最小量更新。
数据可视化中心
技术栈:dataV echarts flexible
使用flexible.js配合弹性盒子布局进行大屏适配,
探究其源码,深入对于rem单位的理解;
使用mounted生命周期和watch侦听器配置echarts-options,
对于组件的生命周期以及watch触发时机有了进一步的了解;
将图表组件区分为数据获取、处理组件和渲染图表组件,
将功能分块,有利于项目维护以及代码复用。