个人中心
gpt4 book ai didi

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

转载 作者：qq735679552 更新时间：2022-09-29 22:32:09 25 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章Vue 的这五个技巧，可以大大提高我们的构建体验！由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

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

今天，主要分享 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 
  9. } 

这不仅为你的组件提供了文档，还会在它们遇到错误的类型时从浏览器的 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.   } 
  10. } 

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.   } 
  15. } 

不需要用 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.   } 
  9. } 

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

宝藏库 --- 官方文档

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 。

原文链接：https://mp.weixin.qq.com/s/TZ01QNCmHstM6d4nNJVmrQ 。

  。

最后此篇关于Vue 的这五个技巧，可以大大提高我们的构建体验！的文章就讲到这里了,如果你想了解更多关于Vue 的这五个技巧，可以大大提高我们的构建体验！的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

25 4 0
文章推荐： 一文解读JavaScript中的文档对象（DOM）
文章推荐： 网站排名下降的原因及注意事项
文章推荐： 网站如何才能给用户良好的体验
文章推荐： 手把手教你打死Java中的纸老虎
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com