加入收藏 | 设为首页 | 会员中心 | 我要投稿 河北网 (https://www.hebeiwang.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 建站 > 正文

久等了,提高开发效率的Vue 技巧来了

发布时间:2019-10-20 12:23:46 所属栏目:建站 来源:徐月超
导读:最近俩月正好用 vue 做了一个大数据的项目,蕴蓄了许多心得。本日终于有机遇分享出来了。 组件(component)的行使 vue 提供的模块化无疑是进步开拓服从的神器,并且对付后期代码优化和维护也提供的极大地便利。 组件行使简介 vue 提供了组件成果,组件又可

我大部门都是行使的全局过滤器。像局部过滤器,一是获取到原始数据的时辰可以直接举办处理赏罚,二是发明早期行使的局部过滤器都进级为全局过滤器了。假如你有好的局部过滤器场景接待评述

  • 日期处理赏罚。后端传的数据要么是 2019-03-14 09:00:00 这种字符串范例的。要么就是时刻戳范例的,可是界面凡是只会展示一部门,好比只展示年代日,可能是月日啊。因此有个全局 date 过滤器,幸福到哭。这个过滤器最好是同时支持以上俩种名目。要是不知道
  • 数字处理赏罚。像保存几位小数、高出几多位以字母 w 取代,可能是汉字“亿”都很常见

上面俩种是我遇到的最多的,也接待你评述增补。

总结

该用 filters 的处所万万别手软,高出一处就要写成民众的。不然后期要是逻辑处理赏罚的差池,你不知道哪些处所用了沟通的处理赏罚逻辑很轻易造成 bug 漏改的环境。

mixins 行使场景

这个属性也分为全局和局部行使,全局行使了将会对之后的全部组件发生影响。因此我不提议在营业代码中行使全局 mixins。并且感受全局 mixins 行使起来倒霉于代码维护,你想溘然在 template 中行使了一个一个函数第一设法必定是去 methods 中查找,找不到就很难熬了。并且粉碎性也较量大,以是我都回收局部注入的方法。让别人知道这里回收了 mixins,要是碰着了一些稀疏的环境,他知道这里有 mixins 就会主动去这内里查察相干代码了。

这个属性我用的最多的是引用第三方的列表库的时辰他凡是城市有个 formatter 的名目化数据属性。这里 filters 是用不了的。但像列表对付数据的处理赏罚一再性是出格多的,因此 注入一个 mixins 就利便多了。

一些第三方库时用到的能力

router 顶用到的一些能力

钩子函数 beforeEach 做路由跳转的时辰会先执行 beforeEach 。因此你可以在路由跳转的时辰举办鉴定是否可以跳转,常见场景就是鉴定用户是否登录,有没有某个页面的权限

  1. // to: Route: 即将要进入的方针 路由工具 
  2.  
  3. // from: Route: 当前导航正要分开的路由 
  4.  
  5. // next: Function: 必然要挪用该要领来 resolve 这个钩子。执行结果依靠 next 要领的挪用参数。 
  6.  
  7. next(): 举办管道中的下一个钩子。假如所有钩子执行完了,则导航的状态就是 confirmed (确认的)。 
  8. router.beforeEach((to, form, next) => {}) 

vuex 顶用到的一些能力

action 的能力 action 是可以异步执行要领的。我在营业中凡是会碰着这样的环境:获取某种信息,可是这个信息接口多个页面都用到了,每个页面都处理赏罚一下这个接口真的很贫困。以是传入 vuex 中共享这部门信息就异常幸福了。由于是异步的以是用到了 action。提供一个参考代码:

  1. actions: { 
  2.     getMemberShip ({ state, commit }) { 
  3.       return new Promise((resolve, reject) => { 
  4.         if (!state.memberShip) { 
  5.           // memberShip 为 ajax 哀求要领 
  6.           memberShip(state.userInfo).then(res => { 
  7.             commit('setMemberShip', res) 
  8.             resolve(res) 
  9.           }).catch(err => { 
  10.             reject(err) 
  11.           }) 
  12.         } else { 
  13.           resolve(state.memberShip) 
  14.         } 
  15.       }) 
  16.     }, 

(编辑:河北网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读