iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > html >提高开发效率的Vue技巧有哪些
  • 478
分享到

提高开发效率的Vue技巧有哪些

2024-04-02 19:04:59 478人浏览 八月长安
摘要

本篇内容主要讲解“提高开发效率的Vue技巧有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“提高开发效率的Vue技巧有哪些”吧!组件(component)的使

本篇内容主要讲解“提高开发效率的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 使用简介

同 component 一样 filter 也分为全局过滤器和局部过滤器。

  • 全局过滤器

vue.filter('date', function (value1, value2, ...) {     return '处理之后的结果' })
  • 局部过滤器

export default {     filters: {         date (value1, value2, ...) {             return '处理之后的结果'         }     } }
  • 使用方式(不管是全局的还是局部的使用方式都一样):

// 不带参数 {{value1 | date}} // 带参数 {{value1 | date(value2, ...)}} // 多个过滤器 {{value1 | filter1 | filter2}}

注意:第一个参数是管道符 (|) 前面的值

常见的使用场景

我大部分都是使用的全局过滤器。像局部过滤器,一是获取到原始数据的时候可以直接进行处理,二是发现早期使用的局部过滤器都升级为全局过滤器了。如果你有好的局部过滤器场景欢迎评论

  • 日期处理。后端传的数据要么是 2019-03-14 09:00:00  这种字符串类型的。要么就是时间戳类型的,但是界面通常只会展示一部分,比如只展示年月日,或者是月日啊。因此有个全局 date  过滤器,幸福到哭。这个过滤器最好是同时支持以上俩种格式。要是不知道

  • 数字处理。像保留几位小数、超过多少位以字母 w 代替,或者是汉字“亿”都很常见

上面俩种是我碰到的最多的,也欢迎你评论补充。

总结

该用 filters 的地方千万别手软,超过一处就要写成公共的。否则后期要是逻辑处理的不对,你不知道哪些地方用了相同的处理逻辑很容易造成 bug  漏改的情况。

mixins 使用场景

这个属性也分为全局和局部使用,全局使用了将会对之后的所有组件产生影响。因此我不建议在业务代码中使用全局 mixins。而且感觉全局 mixins  使用起来不利于代码维护,你想突然在 template 中使用了一个一个函数第一想法肯定是去 methods  中查找,找不到就很难受了。而且破坏性也比较大,所以我都采用局部注入的方式。让别人知道这里采用了 mixins,要是遇到了一些奇怪的情况,他知道这里有  mixins 就会主动去这里面查看相关代码了。

这个属性我用的最多的是引用第三方的列表库的时候他通常都会有个 fORMatter 的格式化数据属性。这里 filters  是用不了的。但像列表对于数据的处理重复性是特别多的,因此 注入一个 mixins 就方便多了。

一些第三方库时用到的技巧

router 中用到的一些技巧

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

// to: Route: 即将要进入的目标 路由对象  // from: Route: 当前导航正要离开的路由  // next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。  next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。 router.beforeEach((to, form, next) => {})

vuex 中用到的一些技巧

action 的技巧 action  是可以异步执行方法的。我在业务中通常会遇到这样的情况:获取某种信息,但是这个信息接口多个页面都用到了,每个页面都处理一下这个接口真的很麻烦。所以传入 vuex  中共享这部分信息就十分幸福了。因为是异步的所以用到了 action。提供一个参考代码:

actions: {     getMemberShip ({ state, commit }) {       return new Promise((resolve, reject) => {         if (!state.memberShip) {           // memberShip 为 ajax 请求方法           memberShip(state.userInfo).then(res => {             commit('setMemberShip', res)             resolve(res)           }).catch(err => {             reject(err)           })         } else {           resolve(state.memberShip)         }       })     }, }

这个是我定义的一个获取会员套餐的情况,会员套餐很多个页面都会用到。但是他改动次数频繁,而且也没必要用户一登录就去加载,因此使用 action  存起来。如果没有这个值就执行 ajax 请求,如果有就直接返回结果。

echarts

echarts 图表界的老大哥了,支持 N 多种图表,配置项说好几千应该没夸大其词吧。不过也正因为繁多的配置项才给了你更多的自由配置的可能。那用  echarts 有什么技巧呢?

快速定位配置项

提高开发效率的Vue技巧有哪些

echarts 包含标题、图例、提示框、标注、标线... ...  等控件,调整个样式真的不好找。但是现在官方新加入了一个术语速查手册,之前我都是去旧官方上查,现在新官方上有了这个东西可是有福了。我需要调整那个控件的效果在上面一点就带我到相应的  api 简直是好用到飞起。

提高开发效率的Vue技巧有哪些

优化项目代码 不是专门的数据展示项目,用到的图表类型其实不多。通常是一个图表反复用,而 echarts  配置一个图表通常都好几十行代码。把这个配置项拿出去只传进来一个参数代码多整洁。这个实现特别简单,要是还没这么做建议马上优化你的项目哦

axios

axiOS 是类似于 ajax 的的第三方控件。所以这个我也是蛮有想法跟大家交流的。

我在开发中遇到一个坑,官方文档说支持 IE,但是 IE 压根不支持。是因为 axios 底层是用 promise 写的,IE  压根还不支持这个属性,因此需要引入 profill 。解决办法是引入 babel-polyfill

// 步骤1 npm install --save babel-polyfill // 步骤2 在 vue.config.js 文件中加入以下内容 module.exports = {     configurewebpack: config => {         return {             entry: {                 app:['babel-polyfill', './src/main.js']             }         }     } }

拥有自己的 axios 默认配置 这个代码过长,我就不分享了。

到此,相信大家对“提高开发效率的Vue技巧有哪些”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

--结束END--

本文标题: 提高开发效率的Vue技巧有哪些

本文链接: https://www.lsjlt.com/news/85341.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 提高开发效率Vue技巧有哪些
    这篇文章主要讲解了“提高开发效率Vue技巧有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“提高开发效率Vue技巧有哪些”吧!组件(component)的...
    99+
    2024-04-02
  • 提高开发效率的Vue技巧有哪些
    本篇内容主要讲解“提高开发效率的Vue技巧有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“提高开发效率的Vue技巧有哪些”吧!组件(component)的使...
    99+
    2024-04-02
  • 提高开发效率和性能的Vue技巧有哪些
    本篇内容主要讲解“提高开发效率和性能的Vue技巧有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“提高开发效率和性能的Vue技巧有哪些”吧!1. 巧用$attrs和$listeners$att...
    99+
    2023-07-02
  • 提升css开发效率的技巧有哪些
    今天小编给大家分享一下提升css开发效率的技巧有哪些的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解...
    99+
    2024-04-02
  • 提高效率的Linux技巧有哪些
    这篇文章将为大家详细讲解有关提高效率的Linux技巧有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。命令编辑如果要对一个已输入的命令进行修改,可以使用 ^a(ctrl + a)或 ^e(ctrl + ...
    99+
    2023-06-16
  • 提升前端开发效率的CSS技巧有哪些
    今天小编给大家分享一下提升前端开发效率的CSS技巧有哪些的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。1. 解决图片5px间...
    99+
    2023-07-05
  • 提高CSS代码效率的技巧有哪些
    本篇内容介绍了“提高CSS代码效率的技巧有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!1.注意外边距...
    99+
    2024-04-02
  • 提高Linux管理效率的技巧有哪些
    这篇文章主要为大家展示了“提高Linux管理效率的技巧有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“提高Linux管理效率的技巧有哪些”这篇文章吧。技巧 1:卸载无响应的 DVD 驱动器网...
    99+
    2023-06-16
  • 提升开发效率的Java命令行技巧有哪些
    本篇内容主要讲解“提升开发效率的Java命令行技巧有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“提升开发效率的Java命令行技巧有哪些”吧!Mac 环境z...
    99+
    2024-04-02
  • Python有哪些高效率技巧
    本篇内容主要讲解“Python有哪些高效率技巧”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Python有哪些高效率技巧”吧!清理字符串输入清理用户输入的问题,几乎适用于我们可能编写的每个程序。...
    99+
    2023-06-16
  • 提高效率的Java代码小技巧有哪些
    提高效率的Java代码小技巧有哪些,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。前言代码优化 ,一个很重要的课题。可能有些人觉得没用,一些细小的地方有什么好修改的,改与不改...
    99+
    2023-06-16
  • 帮你提高开发效率的JavaScript20个技巧
    目录1. 申明和初始化数组2.进行求和、最小值和最大值3. 对字符串、数字或对象的数组进行排序4. 是否需要从一个数组中过滤掉无用的值?5. 为各种条件使用逻辑运算符6. 删除重复的...
    99+
    2024-04-02
  • 可以提高工作效率的excel技巧有哪些
    这篇文章给大家分享的是有关可以提高工作效率的excel技巧有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。1.单元格中的######号相信大家在制表时经常有遇到这种情况,那么...
    99+
    2024-04-02
  • 提高开发效率的Go语言应用技巧
    掌握Go语言的应用技巧:提升你的开发效率! 随着互联网的快速发展,编程语言也在不断涌现和演进。Go语言作为一种相对较新的语言,以其简洁、高效和强大的特性,逐渐受到了广大开发者的关注和喜爱。那么,如何才能更好地...
    99+
    2024-02-02
    go语言 应用技巧 开发效率 网络编程 标准库
  • 提高效率的Vue指令有哪些
    这篇文章主要介绍了提高效率的Vue指令有哪些的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇提高效率的Vue指令有哪些文章都会有所收获,下面我们一起来看看吧。v-model相信大家对v-model并不陌生,简单来...
    99+
    2023-06-30
  • Vue开发技巧有哪些
    Vue开发技巧有哪些,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。路由参数解耦一般在组件内使用路由参数,大多数人会这样做:export&nbs...
    99+
    2024-04-02
  • 使用Golang Facade提高项目开发效率的技巧
    使用Golang Facade可以提高项目开发效率的一些技巧包括:1. 封装复杂的子系统:将复杂的子系统封装在一个简单易用的接口之后...
    99+
    2023-10-08
    Golang
  • 高效率的Python编程技巧有哪些
    这篇文章主要介绍“高效率的Python编程技巧有哪些”,在日常操作中,相信很多人在高效率的Python编程技巧有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”高效率的Python编程技巧有哪些”的疑惑有所...
    99+
    2023-06-16
  • JS提升工作效率的技巧有哪些
    本篇内容主要讲解“JS提升工作效率的技巧有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JS提升工作效率的技巧有哪些”吧!这些方法肯定会帮助您:减少 LOC...
    99+
    2024-04-02
  • 提升效率的JavaScript简写技巧有哪些
    这篇文章主要讲解了“提升效率的JavaScript简写技巧有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“提升效率的JavaScript简写技巧有哪些”...
    99+
    2024-04-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作