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

开发 前端
今天,主要分享 Vue 的 5个技巧,来提高项目的构建速度。使用可读的命名规范。这一点你可能已经听说过了,可读性真的很重要,特别是多人合作的项目。以下是一些被认为是最佳做法的建议。

[[422801]]

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

使用可读的命名规范

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

命名组件时使用驼峰

  • NewComponent.vue ✅
  • newcomponent.vue 🛑
  • Newcomponent.vue 🛑

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

  • FooterSection.vue
  • FooterSectionHeading.vue
  • FooterSectionIcons.vue
  • FooterSectionButton.vue

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

  • TheNavbar.vue

验证 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. <input type="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. <div v-for=’car in cars’ v-if=’car.country =="Germany"' > 

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

  1. <div v-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

【编辑推荐】

 

责任编辑:姜华 来源: 大迁世界
相关推荐

2024-03-17 20:01:51

2022-02-28 10:02:54

Linux技巧命令

2021-12-21 09:50:02

Java请求合并代码

2022-08-02 16:38:53

恶意软件密码

2013-03-29 10:23:02

数据库癌症治疗

2021-11-17 16:24:23

JS 代码函数声明

2023-11-20 23:02:36

Spring系统

2023-11-27 18:01:17

MySQL技巧

2020-08-28 10:22:26

前端布局效率

2016-11-03 09:34:13

跳槽大数据求职

2023-09-07 10:21:03

VS Code 技巧提高开发效率

2015-03-10 17:07:09

BlueHost云架构服务

2023-02-21 14:55:40

React开发技巧

2021-06-17 07:45:35

Javascript 技巧效率

2023-08-08 08:36:52

Vue.js代码Pinia

2023-05-28 23:23:44

2010-09-03 14:39:53

CSSCSS样式表

2021-05-11 16:44:42

Windows工具软件

2020-10-20 08:00:29

AWS云安全数据安全

2023-04-26 18:09:32

人工智能AI
点赞
收藏

51CTO技术栈公众号