共计 2322 个字符，预计需要花费 6 分钟才能阅读完成。
作者：Nwose Lotanna Victor
译者：前端小智
起源：medium
有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。
明天，次要分享 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"})
}
}这种循环效率更高，计算的属性也只被执行一次，只有依赖的变量变动时才会再次执行。最初，它把逻辑从模板局部分离出来，这样咱们的代码就更洁净和可读。
宝藏库 — 官网文档
Vue 的文档写的是很具体的，毕竟是咱们的人写的，比拟合乎咱们的思考形式，文档中有很多小技巧和资源，其中有个格调指南，肯定要看看。
地址：https://cn.vuejs.org/v2/style…
代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。
原文：https://blog.openreplay.com/5…
交换
有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。
