文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue 的这五个技巧,可以大大提高我们的构建体验!

2024-12-14 00:34

关注

今天,主要分享 Vue 的 5个技巧,来提高项目的构建速度。

使用可读的命名规范

这一点你可能已经听说过了,可读性真的很重要,特别是多人合作的项目。以下是一些被认为是最佳做法的建议。

命名组件时使用驼峰

**如果有子组件,可以这样命名

如果没有子组件,可以尝试加前缀 the 来命名

验证 Props 的数据类型

Prop 是父子组件数据通讯的重要方式,然而,重要的是,创建 Prop 时,明确指定数据类型并对传入的数据进行验证,可以帮助避免我们在开发阶段由于类型不一致导致的 Bug。

我们新手可能时不时会经常这样写 prop:

  1. props: ['title''likes''isPublished''commentIds''author'

但是,通常你希望每个 prop 都有指定的值类型。这时,你可以以对象形式列出 prop,这些 property 的名称和值分别是 prop 各自的名称和类型:

  1. props: { 
  2.   title: String, 
  3.   likes: Number, 
  4.   isPublished: Boolean, 
  5.   commentIds: Array, 
  6.   author: Object, 
  7.   callback: Function
  8.   contactsPromise: Promise // or any other constructor 

这不仅为你的组件提供了文档,还会在它们遇到错误的类型时从浏览器的 JavaScript 控制台提示用户。

不要直接操作DOM

从早期用 JQ 过来的同学,在用 Vue 时有部分人还是很喜欢直接操作DOM,这并不是坏事,不过 Vue 使用虚拟DOM,这是一个抽象的DOM版本,使编译更有效,避免在每次变化时重新渲染整个DOM。这一点在很大程度上提高了效率和资源管理,因为DOM API被调用的频率较低。这意味着,我们并不真的需要在组件中做这样的事情。

  1. "checkbox" @change="logStatus" /> 

如果要根据上面的 checkbox 状态做一些事情,我们可能会这样做:

  1. methods: { 
  2.   logStatus() { 
  3.     const isOn = document.getElementById('thecheckbox').checked; 
  4.     if( isOn ) { 
  5.       console.log('Light is on'); 
  6.     } else { 
  7.       console.log('Light is off'); 
  8.     } 
  9.   } 

getElement 是DOM API,如果用下面这种方式来代替,效率会提高。

  1. data() { 
  2.   return { 
  3.     isOn = false 
  4.   } 
  5. }, 
  6. methods: { 
  7.   logStatus() { 
  8.     if(this.isOn) { 
  9.       console.log('Light is on'); 
  10.     } else { 
  11.       console.log('Light is off'); 
  12.     } 
  13.     this.isOn = !this.isOn; 
  14.   } 

不需要用 DOM API,这也可以达到同样的效果。无论你能用纯JS做什么,都有可能在虚拟DOM中找到更有效的方法,如果你找不到,请使用 Vue Refs。

拥抱计算属性

计算属性是减少复杂逻辑的一个很好的方式,比如,在我们的条件表达式很长的时候就很可以用计算属性,简化成一个变量,可以大大的提高可读性,也避免给后面维护的人留坑。

  1. for=’car in cars’ v-if=’car.country =="Germany"' > 

我们可以使用v-for来循环浏览列表,有些人会像上面那样使用 v-if 来做条件或过滤。这看起来不错,但是,Vue的编译器优先考虑 v-for 而不是 v-if,所以最后的结果可能不是我们想要的,列表(想象它有100万个)将被每次循环,这样一点都不高效,我们可以使用计算属性改善这一问题。

  1. for='car in countryFilter'
  2. //.... 
  3. computed: { 
  4.   countryFilter: () => { 
  5.     return this.cars.filter(function (car) { 
  6.       return car.country =="Germany" 
  7.     }) 
  8.   } 

这种循环效率更高,计算的属性也只被执行一次,只有依赖的变量变化时才会再次执行。最后,它把逻辑从模板部分分离出来,这样我们的代码就更干净和可读。

宝藏库 --- 官方文档

111

Vue 的文档写的是很详细的,毕竟是我们的人写的,比较符合我们的思考方式,文档中有很多小技巧和资源,其中有个风格指南,一定要看看。

地址:https://cn.vuejs.org/v2/style-guide/index.html

作者:Nwose Lotanna Victor 译者:前端小智

来源:medium 原文:https://blog.openreplay.com/5-useful-vuejs-tips-to-improve-your-building-experience

【编辑推荐】

  1. 鸿蒙官方战略合作共建——HarmonyOS技术社区
  2. 照抄不翻车:抗住千万流量的大型分布式系统架构设计
  3. 2021年五大开源式游戏化工具
  4. 数字化转型的七大热门趋势和三大渐冷趋势
  5. Windows 11新预览版22449推送:启动引导动画变样了
  6. 什么情况?游戏玩家大规模退回Windows 7系统:Windows 10暴跌

 

来源:大迁世界内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯