共计 4180 个字符，预计需要花费 11 分钟才能阅读完成。
作者：Matt Maribojoc
译者：前端小智
起源：medium
点赞再看，微信搜寻 【大迁世界】 关注这个没有大厂背景，但有着一股向上踊跃心态人。本文
GitHubhttps://github.com/qq44924588… 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。
随着 VueJS 的应用越来越宽泛，呈现了几种最佳实际并逐步成为规范。在本文中，次要分享在平时开发中一些有用资源和技巧，废话少说，咱们开始吧。
1. 始终在 v-for 中应用 :key
在须要操纵数据时，将 key 属性与 v-for 指令一起应用能够让程序放弃恒定且可预测。
这是很有必要的，这样 Vue 就能够跟踪组件状态，并对不同的元素有一个常量援用。在应用动画或 Vue 转换时，key 十分有用。
如果没有 key，Vue 只会尝试使 DOM 尽可能高效。这可能意味着v-for 中的元素可能会呈现乱序，或者它们的行为难以预测。如果咱们对每个元素都有惟一的键援用，那么咱们能够更好地预测 Vue 应用程序将如何准确地解决 DOM 操作。
<!-- 不好的做法 -->
<div v-for='product in products'> </div>
<!-- 好的做法 -->
<div v-for='product in products' :key='product.id'>
在事件中应用短横线命名
在收回定制事件时，最好应用短横线命名，这是因为在父组件中，咱们应用雷同的语法来侦听该事件。
因而，为了确保咱们各组件之间的一致性，并使您的代码更具可读性，请在两个中央都保持应用短横线命名。
this.$emit('close-window')
// 在父组件中
<popup-window @close-window='handleEvent()' />
3. 应用驼峰式申明 props，并在模板中应用短横线命名来拜访 props
最佳做法只是遵循每种语言的约定。在 JS 中，驼峰式申明是规范，在 HTML 中，是短横线命名。因而，咱们相应地应用它们。
侥幸的是，Vue 曾经提供了驼峰式申明和短横线命名之间转换，因而除了理论申明它们之外，咱们不用放心任何事件。
// 不好的做法
<PopupWindow titleText='hello world' />
props: {'title-text': String}
// 好的做法
<PopupWindow title-text='hello world' />
props: {titleText: String}
4.data 应始终返回一个函数
申明组件 data 时，data选项应始终返回一个函数。如果返回的是一个对象，那么该 data 将在组件的所有实例之间共享。
// 不好的做法
data: {
name: 'My Window',
articles: []}
然而，大多数状况下，咱们的指标是构建可重用的组件，因而咱们心愿每个组件返回一个惟一的对象。咱们通过在函数中返回数据对象来实现这一点。
// 好的做法
data () {
return {
name: 'My Window',
articles: []}
}
5. 不要在同个元素上同时应用 v-if 和v-for指令
为了过滤数组中的元素，咱们很容易将 v-if 与v-for在同个元素同时应用。
// 不好的做法
<div v-for='product in products' v-if='product.price < 500'>
问题是在 Vue 优先应用 v-for 指令，而不是 v-if 指令。它循环遍历每个元素，而后查看 v-if 条件。
this.products.map(function (product) {if (product.price < 500) {return product}
})
这意味着，即便咱们只想渲染列表中的几个元素，也必须遍历整个数组。
这对咱们来当然没有任何益处。
一个更聪慧的解决方案是遍历一个计算属性，能够把下面的例子重形成上面这样的：
<div v-for='product in cheapProducts'>
computed: {cheapProducts: () => {return this.products.filter(function (product) {return product.price < 100})
}
}
这么做有几个益处：
- 渲染效率更高，因为咱们不会遍历所有元素
- 仅当依赖项更改时，才会重应用过滤后的列表
- 这写法有助于将组件逻辑从模板中分离出来，使组件更具可读性
6. 用正确的定义验证咱们的 props
能够这条是很重要，为什么？
在设计大型项目时，很容易遗记用于 props 的确切格局、类型和其余约定。如果你在一个更大的开发团队中，你的共事不会读心术，所以你要分明地通知他们如何应用你的组件。
因而，咱们只需编写 props 验证即可，不用费劲地跟踪组件来确定 props 的格局
从 Vue 文档中查看此示例。
props: {
status: {
type: String,
required: true,
validator: function (value) {
return [
'syncing',
'synced',
'version-conflict',
'error'
].indexOf(value) !== -1
}
}
}
7. 组件全名应用驼峰或或者短横线
组件的通用命名约定是应用驼峰或短横线。无论咱们应用哪咱，最重要的是始终保持统一。我认为驼峰形式 成果最好，因为大多数 IDE 主动实现性能都反对它。
# 不好的做法
mycomponent.vue
myComponent.vue
Mycomponent.vue
# 好做法
MyComponent.vue
8. 根本组件应该相应地加上前缀
依据 Vue 款式指南，根本组件是仅蕴含以下内容的组件：
- HTML 元素
- 额定的根底组件
- 第三方的 UI 组件
为这些组件命名的最佳实际是为它们提供前缀 Base、V 或App。同样，只有咱们在整个我的项目中保持一致，能够应用其中任何一种。
BaseButton.vue
BaseIcon.vue
BaseHeading.vue
该命名约定的目标是使根本组件按字母程序分组在文件系统中。另外，通过应用 webpack 导入性能，咱们能够搜寻与命名约定模式匹配的组件，并将所有组件主动导入为 Vue 我的项目中的全局变量。
单实例组件命名应该带有前缀 The
与根本组件相似，单实例组件 (每个页面应用一次，不承受任何 prop) 应该有本人的命名约定。这些组件特定于咱们的利用，通常是 footer，header或sider。
该组件只能有一个激活实例。
TheHeader.vue
TheFooter.vue
TheSidebar.vue
ThePopup.vue
10. 放弃指令简写的一致性
在 Vue 开发人员中，一种常见的技术是应用指令的简写。例如：
@是v-on的简写:是v-bind的简写#是v-slot的简写
在你的 Vue 我的项目中应用这些缩写是很好的。然而要在整个我的项目中创立某种约定，总是应用它们或从不应用它们, 会使咱们的我的项目更具内聚性和可读性。
11. 不要在“created”和“watch”中调用办法
Vue 开发人员常常犯的一个谬误是他们不必要地在 created 和watch中调用办法。其背地的想法是，咱们心愿在组件初始化后立刻运行watch。
// 不好的做法
created: () {this.handleChange()
},
methods: {handleChange() {// stuff happens}
},
watch () {property() {this.handleChange()
}
}
然而，Vue 为此提供了内置的解决方案，这是咱们常常遗记的 Vue watch属性。
咱们要做的就是略微重组 watch 并申明两个属性：
1.handler (newVal, oldVal)-这是咱们的 watch 办法自身。
-
immediate: true– 代表如果在 wacth 里申明了之后，就会立刻先去执行外面的handler办法，如果为false就跟咱们以前的成果一样，不会在绑定的时候就执行// 好的做法
methods: {
handleChange() {// stuff happens}
},
watch () {
property {immediate: true handler() {this.handleChange() }}
}
12. 模板表达式应该只有根本的 JS 表达式
在模板中增加尽可能多的内联性能是很天然的。然而这使得咱们的模板不那么具备申明性，而且更加简单，也让模板会变得十分凌乱。
为此，让咱们看看 Vue 款式指南中另一个规范化字符串的示例，看看它有多凌乱。
// 不好的做法
{{fullName.split(' ').map(function (word) {return word[0].toUpperCase() + word.slice(1)
}).join(' ')
}}
基本上，咱们心愿模板中的所有内容都直观明了。为了放弃这一点，咱们应该将简单的表达式重构为适当命名的组件选项。
拆散简单表达式的另一个益处是能够重用这些值。
// 好的做法
{{normalizedFullName}}
// The complex expression has been moved to a computed property
computed: {normalizedFullName: function () {return this.fullName.split(' ').map(function (word) {return word[0].toUpperCase() + word.slice(1)
}).join(' ')
}
}
总结
这是 12 个最常见的最佳实际，它们将使咱们的 Vue 代码更易于保护、可读性更好、更业余。心愿这些技巧对您有用（因为它们相对是我始终想记住的货色）。
人才们的 【三连】 就是小智一直分享的最大能源，如果本篇博客有任何谬误和倡议，欢送人才们留言，最初，谢谢大家的观看。
代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。
https://medium.com/better-pro…
交换
文章每周继续更新，能够微信搜寻 【大迁世界】 第一工夫浏览，回复 【福利】 有多份前端视频等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，欢送 Star。