乐趣区

关于前端:12-种使用-Vue-的最佳做法

jiezi

作者：Matt Maribojoc
译者：前端小智
起源：medium

点赞再看，微信搜寻 【大迁世界】 关注这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://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 办法自身。

  1. 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。

退出移动版