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:

props: [title, likes, isPublished, commentIds, author] 

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

props: {    title: String,   likes: Number,   isPublished: Boolean,   commentIds: Array,   author: Object,   callback: Function,   contactsPromise: Promise // or any other constructor } 

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

不要直接操作DOM

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

<input type="checkbox" @change="logStatus" /> 

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

methods: {    logStatus() {      const isOn = document.getElementById(thecheckbox).checked;     if( isOn ) {        console.log(Light is on);     } else {        console.log(Light is off);     }   } } 

getElement 是网站模板DOM API，如果用下面这种方式来代替，效率会提高。

data() {    return {      isOn = false   } }, methods: {    logStatus() {      if(this.isOn) {        console.log(Light is on);     } else {        console.log(Light is off);     }     this.isOn = !this.isOn;   } } 

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

拥抱计算属性

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

<div v-for=’car in cars’ v-if=’car.country =="Germany" > 

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

<div v-for=car in countryFilter> //.... computed: {    countryFilter: () => {      return this.cars.filter(function (car) {        return car.country =="Germany"     })   } } 

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

宝藏库 --- 官方文档

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

【编辑推荐】

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