12个面向专业开发人员的VueJS最佳实践

以你之姓@ 2022-09-08 15:54 268阅读 0赞

![c838b13e0641f56dc7a587a16f5e333b.png][]

英文 | https://learnvue.co/2020/01/12-vuejs-best-practices-for-pro-developers/

翻译 | 小爱

随着 VueJS的使用变得越来越普遍，出现了一些最佳实践与开发小技巧。

在本文中，我将与你分享12个非常棒的开发技巧。

希望这些最佳实践可以帮助你编写更好的 VueJS 代码。这不仅会让你的所有开发人员同事都喜欢你，而且会让你的生活变得更轻松。

好了，介绍不多说了。让我们直接开始吧。

## **1、 始终在 v-for 中使用 :key** ##

使用带有 v-for指令的 key 属性可以帮助你的应用程序在你想要操作数据时保持不变和可预测性。

这是必要的，以便 Vue 可以跟踪你的组件状态以及对不同元素的持续引用。它非常有用的一个例子是在使用动画或Vue 转换时。

没有键，Vue 只会尝试使 DOM 尽可能高效。这可能意味着 v-for 中的元素可能会出现乱序，或者它们的行为将不太可预测。如果我们对每个元素都有一个唯一的键引用，那么我们可以更好地预测我们的 Vue 应用程序将如何处理 DOM 操作。

<div v-for='product in products'>  </div>
    
    
    
    <div v-for='product in products' :key='product.id'>

## **2、使用 kebab-case 举办活动** ##

在发出自定义事件时，最好使用 kebab-case。这是因为在父组件中，这与我们用来侦听该事件的语法相同。

因此，为了在我们的组件之间保持一致性，并使你的代码更具可读性，请坚持在两个地方使用 kebab-case。

//弹出窗口.vue
    this.$emit('close-window')

// 父组件.vue
    <popup-window @close-window='handleEvent()' />

## **3、 使用camelCase 声明props 并在模板中使用kebab-case** ##

这种最佳实践只是遵循每种语言的约定。在 Javascript 中，camelCase 是标准，而在 HTML 中，它是 kebab-case ，因此，我们相应地使用它们。

对我们来说幸运的是，VueJS 为我们在 kebab-case 和 camelCase 之间转换，所以除了实际声明它们之外，我们不必担心任何事情。

在 Javascript 中，camelCase 是标准，而在 HTML 中，它是 kebab-case ，因此，我们相应地使用它们。

//不好的
    <PopupWindow titleText='hello world' />
    
    
    props: {
      'title-text': String
    }

//好的
    <PopupWindow title-text='hello world' />
    
    
    props: {
      titleText: String
    }

## **4、数据应该总是返回一个函数** ##

声明组件数据时，数据选项应始终返回一个函数。如果没有，我们只是简单地返回一个对象，那么该数据将在组件的所有实例之间共享。

//不好的
    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'
    >

问题在于 VueJS 将 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验证即可。

从 Vue 文档中查看此示例。

props: {
      status: {
        type: String,
        required: true,
        validator: function (value) {
          return [
            'syncing',
            'synced',
            'version-conflict',
            'error'
          ].indexOf(value) !== -1
        }
      }
    }

## **7、组件使用 PascalCase 或 kebab-case** ##

组件的常见命名约定是使用 PascalCase 或 kebab-case。无论你为项目选择哪一个，最重要的是始终保持一致。

PascalCase 效果最好，因为大多数 IDE 自动完成功能都支持它。

# BAD
    
    
    mycomponent.vue
    myComponent.vue
    Mycomponent.vue
    
    
    # GOOD
    
    
    MyComponent.vue

## **8、基础组件应该有相应的前缀** ##

另一个命名约定专注于命名基础组件——或者纯粹展示的组件，并帮助在你的应用程序中设置通用样式。

根据 Vue 风格指南，基础组件是只包含…

*  HTML 元素
 *  附加基础组件
 *  第 3 方 UI 组件

命名这些组件的最佳做法是给它们前缀“Base”、“V”或“App”。再说一次，只要你在整个项目中保持一致，就可以使用其中任何一个。

BaseButton.vue
    BaseIcon.vue
    BaseHeading.vue

此命名约定的目的是将基本组件保持在文件系统中。此外，使用 webpack 导入功能，你可以搜索与你的命名约定模式匹配的组件，并在你的 Vue 项目中自动将它们作为全局变量导入。

## **9、声明和使用 ONCE 的组件应该有前缀“The”** ##

与基础组件类似，单实例组件（每页使用一次且不接受 props）有自己的命名约定。

这些组件特定于你的应用程序，通常是页眉、侧边栏或页脚等内容。

该组件应该只有一个活动实例。

TheHeader.vue
    TheFooter.vue
    TheSidebar.vue
    ThePopup.vue

## **10、与你的指令速记保持一致** ##

Vue 开发人员的常用技术是使用指令的简写。例如，

*  @ 是 v-on 的缩写：
 *  : 是 v-bind 的缩写
 *  \# 是v-slot 的缩写

在你的 Vue 项目中使用这些技巧非常棒。但是要在你的项目中创建某种约定，你应该始终使用它们或从不使用它们。这将使你的项目更具凝聚力和可读性。

## **11、不要在 created AND watch 上调用方法** ##

Vue 开发人员犯的一个常见错误（或者可能只是我）是他们不必要地调用了 created 和 watch 中的方法。这背后的想法是我们希望在组件初始化后立即运行 watch hook。

//不好的
    created: () {
      this.handleChange()
    },
    methods: {
      handleChange() {
        // stuff happens
      }
    },
    watch () {
      property() {
        this.handleChange()
      }
    }

然而，Vue 有一个内置的解决方案。这是我们经常忘记的 Vue watchers的一个属性。

我们所要做的就是稍微重构我们的Vue watchers并声明两个属性：

1.  handler (newVal, oldVal) – 这是我们的观察者方法本身
2.  立即：true - 这使我们的处理程序在我们的实例创建时运行

//好的
    methods: {
      handleChange() {
        // stuff happens
      }
    },
    watch () {
      property {
        immediate: true
        handler() {
          this.handleChange()
        }
      }
    }

## **12、模板表达式应该只有基本的Javascript表达式** ##

想要在模板中添加尽可能多的内联功能是很自然的事情。但这使我们的模板声明性更少且更复杂。这意味着我们的模板变得非常混乱。

为此，让我们查看 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 代码更易于维护、可读和更专业。

希望这些技巧对你有用（因为它们绝对是你我一直想记住的东西）。

感谢你的阅读，祝编程愉快！

#  #

**学习更多技能**

**请点击下方公众号**

![634561bef40a476f428cd62eb094ae05.gif][]

![7d8d19f7f5d428c1bf60520198cc1d50.png][]

![8a92edb132ef0a9b226391756e09d3ae.png][]

[c838b13e0641f56dc7a587a16f5e333b.png]: /images/20220829/0026e18905ae45d1ad018c62ea2e228a.png
[634561bef40a476f428cd62eb094ae05.gif]: /images/20220829/8b8539f7cc7a44508896413ad07a6f4d.png
[7d8d19f7f5d428c1bf60520198cc1d50.png]: /images/20220829/6ef59549585c45f0a409bcc02fe70e08.png
[8a92edb132ef0a9b226391756e09d3ae.png]: /images/20220829/11c52cb5453948c789171b83534d462e.png