设为首页 - 加入收藏 汉中ag棋牌官网|官方网站 (http://www.0916zz.com)- 国内知名站长资讯网站,提供最新最全的站长资讯,创业经验,网站建设等!
热搜: 发布 华为 手机 数据
当前位置: 首页 > 运营中心 > 建站资源 > 优化 > 正文

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

发布时间:2019-10-29 04:04 所属栏目:[优化] 来源:徐月超
导读:最近俩月正好用 vue 做了一个大数据的项目,积累了很多心得。今天终于有机会分享出来了。 组件(component)的使用 vue 提供的模块化无疑是提高开发效率的神器,而且对于后期代码优化和维护也提供的极大地便利。 组件使用简介 vue 提供了组件功能,组件又可

最近俩月正好用 vue 做了一个大数据的项目,积累了很多心得。今天终于有机会分享出来了。

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

组件(component)的使用

vue 提供的模块化无疑是提高开发效率的神器,而且对于后期代码优化和维护也提供的极大地便利。

组件使用简介

vue 提供了组件功能,组件又可以分为全局组件和非全局组件。区别是全局组件你可以直接在 .vue 文件中直接使用自定义的 html 即可。非全局组件必须在 Vue 的对象中定义 components 引入这个组件

  • 局部组件引用方式
  1. import?A?from?'@/component/A'?
  2. export?default?{?
  3. ????data?()?{},?
  4. ????components:?{?A?}?
  5. }?
  • 全局组件引用方式
  1. //?index.js?文件?
  2. import?A?from?'@/component/A'?
  3. A.install?=?function?(Vue)?{?
  4. ??Vue.component(A.name,?A)?
  5. }?
  6. export?{?
  7. ????A?
  8. }?
  9. //?main.js?文件?
  10. import?{?A?}?from?'./components/index'?
  11. Vue.use(A)?

这里针对引入全局组件有一个优化小技巧,上面的方式引入全局组件需要同时维护 index.js 文件和 main.js 文件很麻烦。采用下面的代码可以只维护 index.js 文件即可

  1. //?index.js?文件?
  2. import?A?from?'@/component/A'?
  3. A.install?=?function?(Vue)?{?
  4. ??Vue.component(A.name,?A)?
  5. }?
  6. function?InstallAll(Vue)?{?
  7. ????Vue.use(A)?
  8. }?
  9. export?{?
  10. ????A,?
  11. ????InstallAll?
  12. }?
  13. //?main.js?文件?
  14. import?{?InstallAll?}?from?'./components/index'?
  15. InstallAll(Vue)?

验证码组件的复用

手机号 + 验证码进行登录已经是目前主流的登录方式之一了。但是一个项目要使用验证码的地方非常多,像登录、注册、修改密码、信息再次确认的时候都会进行二维码请求。每个地方重写验证码逻辑很麻烦,所以验证码是需要抽象出来的组件的。

验证码通常会对接多个接口,或者是一个接口但是需要传递获取验证码的类型。而这些接口通常都需要一个手机号。因此验证码需要接收俩个参数:phone, type。自身完成单击操作和读秒操作即可,不需要对引用的地方产生任何影响。

  1. //?最后每个页面调用的时候大概长这个样子?
  2. ?

收藏组件的复用

收藏功能使用的频率要比验证码更高,当然也更难。

像我最近做的大数据项目,用户可以对视频、音乐、话题进行收藏。同时他们出现的地方也非常多,像视频列表、音乐列表、话题列表、视频详情、音乐详情、话题详情... ... 都会有收藏的功能,不抽象成一个组件同样的逻辑写好几个地方后期维护是及其困难的。

像这种收藏,通常都会需要一个 id,是否收藏状态,以及完成收藏后的一系列的跳转功能。因此需要俩个参数: id 和 status。和 complete 回调方法

  1. //?最后每个页面调用的时候大概长这个样子?
  2. ?

我上面提到我会收藏音乐、视频、话题,很显然是三个收藏接口。难道要写三个收藏组件么?当然不是,既然同属于收藏功能,自然是一个组件搞定了。再加一个 type 参数区别一下即可了

  1. //?最后每个页面调用的时候大概长这个样子?
  2. ?

这样每次用到收藏的时候我只需要复制这一行代码就可以了

总结

第三方 UI 库会给我们引入非常多好用的组件,像轮播图、表单、图片上传。但是这些都是跟业务无关的组件,而我们在做项目的时候时候肯定会碰到大量重复的功能。为了代码的易维护性一定要有良好的组件抽象能力。合理运用好 component 功能。

上面提到的验证码和收藏功能使用次数频繁,我通常都会当做全局组件处理(个人会把使用次数 > 1 的组件当成全局组件),但是有的页面及其复杂,一个页面上万行代码后期查找肯定费事巴拉的。也一定要对其进行拆分处理不要一个组件写到尾。针对这种情况我通常都会采用局部组建去维护,提高界面的简洁程度。

filters 使用技巧

数据过滤无疑也是 vue 的重要功能之一。像时间、数字的过滤,实在是太频繁了。掌握 filter 无疑能大大提高代码幸福度和可维护性

filter 使用简介

【免责声明】本站内容转载自互联网,其相关言论仅代表作者个人观点绝非权威,不代表本站立场。如您发现内容存在版权问题,请提交相关链接至邮箱:bqsm@foxmail.com,我们将及时予以处理。

网友评论
推荐文章