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

最近俩月正好用 vue 做了一个大数据的项目，蕴蓄了许多心得。本日终于有机遇分享出来了。

组件(component)的行使

vue 提供的模块化无疑是进步开拓服从的神器，并且对付后期代码优化和维护也提供的极大地便利。

组件行使简介

vue 提供了组件成果，组件又可以分为全局组件和非全局组件。区别是全局组件你可以直接在 .vue 文件中直接行使自界说的 html 即可。非全局组件必需在 Vue 的工具中界说 components 引入这个组件

• 局部组件引用方法

import A from '@/component/A' 
export default { 
    data () {}, 
    components: { A } 
} 

• 全局组件引用方法

// index.js 文件 
import A from '@/component/A' 
A.install = function (Vue) { 
  Vue.component(A.name, A) 
} 
export { 
    A 
} 
// main.js 文件 
import { A } from './components/index' 
Vue.use(A) 

这里针对引入全局组件有一个优化小能力，上面的方法引入全局组件必要同时维护 index.js 文件和 main.js 文件很贫困。回收下面的代码可以只维护 index.js 文件即可

// index.js 文件 
import A from '@/component/A' 
A.install = function (Vue) { 
  Vue.component(A.name, A) 
} 
function InstallAll(Vue) { 
    Vue.use(A) 
} 
export { 
    A, 
    InstallAll 
} 
// main.js 文件 
import { InstallAll } from './components/index' 
InstallAll(Vue) 

验证码组件的复用

手机号 + 验证码举办登录已经是今朝主流的登录方法之一了。可是一个项目要行使验证码的处所很是多，像登录、注册、修改暗码、信息再次确认的时辰城市举办二维码哀求。每个处所重写验证码逻辑很贫困，以是验证码是必要抽象出来的组件的。

验证码凡是会对接多个接口，可能是一个接口可是必要转达获取验证码的范例。而这些接口凡是都必要一个手机号。因此验证码必要吸取俩个参数：phone, type。自身完成单击操纵和读秒操纵即可，不必要对引用的处所发生任何影响。

// 最后每个页面挪用的时辰或许长这个样子 
<auth-code :phone="phone" type="1"></auth-code> 

保藏组件的复用

保藏成果行使的频率要比验证码更高，虽然也更难。

像我最近做的大数据项目，用户可以对视频、音乐、话题举办保藏。同时他们呈现的处所也很是多，像视频列表、音乐列表、话题列表、视频详情、音乐详情、话题详情... ... 城市有保藏的成果，不抽象成一个组件同样的逻辑写好几个处所后期维护是及其坚苦的。

像这种保藏，凡是城市必要一个 id，是否保藏状态，以及完成保藏后的一系列的跳转成果。因此必要俩个参数: id 和 status。和 complete 回调要领

// 最后每个页面挪用的时辰或许长这个样子 
<collection :id="id" :status="status" @complete="complete"></collection> 

我上面提到我会保藏音乐、视频、话题，很显然是三个保藏接口。莫非要写三个保藏组件么?虽然不是，既然同属于保藏成果，天然是一个组件搞定了。再加一个 type 参数区别一下即可了

// 最后每个页面挪用的时辰或许长这个样子 
<collection :id="id" :status="status" type="video" @complete="complete"></collection> 

这样每次用到保藏的时辰我只必要复制这一行代码就可以了

总结

第三方 UI 库会给我们引入很是多好用的组件，像轮播图、表单、图片上传。可是这些都是跟营业无关的组件，而我们在做项目标时辰时辰必定会遇到大量一再的成果。为了代码的易维护性必然要有精采的组件抽象手段。公道运用好 component 成果。

上面提到的验证码和保藏成果行使次数频仍，我凡是城市当做全局组件处理赏罚(小我私人会把行使次数 > 1 的组件当玉成局组件)，可是有的页面及其伟大，一个页面上万行代码后期查找必定费事巴拉的。也必然要对其举办拆分处理赏罚不要一个组件写到尾。针对这种环境我凡是城市回收局部组建去维护，进步界面的简捷水平。

filters 行使能力

数据过滤无疑也是 vue 的重要成果之一。像时刻、数字的过滤，其实是太频仍了。把握 filter 无疑能大大进步代码幸福度和可维护性

filter 行使简介

（编辑：河北网）

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