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

随着 Vue 变得越来越普遍，出现了一些最佳实践并成为标准。

在这篇文章中，我提供了一些来自一些重要资源的提示。

VueJS 官方样式表
LearnVueJS Vue 模式
Deverus VueJS 风格指南

希望这些最佳实践能帮助你写出更好的 VueJS 代码。这不仅会让你所有的开发者都爱上你，而且你一定会感谢自己让你的生活更轻松。

好了，介绍就够了。让我们开始吧。

1.始终在v-for内部使用

将 key 属性与 v-for 一起使用命令每当您想要操作数据时，帮助您的应用程序保持恒定和可预测。

这是必要的，这样 Vue 才能跟踪你的组件状态，并持续引用你的不同元素。键非常有用的一个示例是当使用动画或Vue 转换.

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

<template>
  <!-- BAD -->
  <div v-for="product in products">{{ product }}</div>

  <!-- GOOD! -->
  <div v-for="product in products" :key="product.id">{{ product }}</div>
</template>

2. kebab-case

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

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

this.$emit("close-window");

<template>
<popup-window @close-window='handleEvent()' />
</template>

3. 用 camelCase 声明道具，在模板中使用 kebab-case

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

幸运的是，VueJS 为我们在 kebab-case 和 camelcase 之间进行了转换，因此除了实际声明它们之外，我们不必担心任何事情。

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

<template>
  <PopupWindow title-text="hello world" />
</template>

<script>
export default {
  props: {
    titleText: String,
  },
}
</script>

4. 数据应始终返回一个函数

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

export default {
  data() {
    // <---
    return {
      name: 'My Window',
      articles: [],
    }
  },
}

但是，大多数时候，目标是构建可重用组件，因此我们希望每个对象返回一个唯一的对象。我们通过在函数中返回我们的数据对象来实现这一点。

5. 不要将 v-if 与 v-for 元素一起使用

想要将 v-if 与 v-for 一起使用以过滤数组的元素是非常诱人的。

问题在于 VueJS 将 v-for 指令优先于 v-if 指令。因此，在引擎盖下，它遍历每个元素，然后检查 v-if 条件。

这意味着，即使我们只想呈现列表中的几个元素，我们也必须遍历整个数组。

这不好。

一个更聪明的解决方案是迭代computed 属性.上面的例子看起来像这样。

这意味着，即使我们只想从列表中呈现几个元素，我们必须遍历整个数组。

<template>
  <div v-for="product in cheapProducts">{{ product }}</div>
</template>

<script>
export default {
  computed: {
    cheapProducts: () => {
      return this.products.filter(function (product) {
        return product.price < 100
      })
    },
  },
}
</script>

这有几个原因。

渲染效率要高得多，因为我们不会遍历每个项目
仅当依赖项发生更改时，才会重新评估筛选的列表
它有助于将我们的组件逻辑与模板分开，使我们的组件更具可读性

6. 用好的定义验证你的道具

这可以说是最重要的最佳实践。

为什么它很重要？

井。它基本上将未来的你从现在的你中拯救出来。在设计大型项目时，很容易忘记用于道具的确切格式、类型和其他约定。

如果你在一个更大的开发团队中，你的同事不是读心者，所以要向他们明确如何使用你的组件！因此，为大家省去煞费苦心地跟踪组件以确定道具格式的麻烦，并且只需编写道具验证即可。

从 Vue 文档中查看此示例。

export default {
  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 元素
其他基础组件
第三方 UI 组件

命名这些组件的最佳做法是为其指定前缀“Base”、“V”或“App”。

再一次，只要您在整个项目中保持一致，就可以使用其中任何一个。

此命名约定的目的是将基本组件保留在文件系统中。

此外，使用 webpack 导入函数，您可以搜索与您的命名约定模式匹配的组件，并自动将它们全部作为全局变量导入到您的 Vue 项目中。

9. 声明和使用的组件 ONCE 应具有前缀“The”

与基本组件类似，单实例组件（使用的组件每页一次并且不接受道具）有他们自己的命名约定。

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

应该永远只有一此组件的活动实例。

TheHeader.vue （英语：TheHeader.vue）
TheFooter.vue （英语）
TheSidebar.vue
ThePopup.vue的

10. 与您的指令速记保持一致一种常见的技术

Vue 开发人员使用指令的简写。例如

@是 V-On 的缩写：
:是 V-Bind 的缩写
#是V型槽

在你的 Vue 项目中使用这些速记是很棒的。但是，要在整个项目中创建某种约定，您应该总是使用它们或从不使用它们。这将使您的项目更具凝聚力和可读性。

11. 不要在 created AND watch 上调用方法

Vue 开发人员（或者可能只是我）犯的一个常见错误是他们不必要地调用了 created 中的方法并观看。

这背后的想法是，我们希望在组件初始化后立即运行监视钩子。

<script>
// BAD!
  export default {
   created: () {
    this.handleChange()
   },
   methods: {
    handleChange() {
     // stuff happens
    }
   },
   watch () {
    property() {
     this.handleChange()
    }
   }
  }
</script>

但是，Vue 有一个内置的解决方案。它是Vue 观察者我们经常忘记。

我们所要做的就是稍微重构我们的观察程序并声明两个属性：

handler （newVal， oldVal） – 这是我们的观察者方法本身
immediate： true – 这会使我们的处理程序在创建实例时运行

<script>
export default {
 methods: {
  handleChange() {
   // stuff happens
  }
 },
 watch () {
  property {
   immediate: true
   handler() {
    this.handleChange()
   }
  }
 }
}
</script>

12. 模板表达式应该只有基本的 JavaScript 表达式

希望在模板中添加尽可能多的内联功能是很自然的。但这会使我们的模板声明性降低，而变得更加复杂。这意味着我们的模板变得非常混乱。

为此，让我们看看 Vue 风格指南中的另一个例子。看看它有多混乱。

<template>
  <!--BAD-->
  {{
    fullName
      .split(' ')
      .map(function (word) {
        return word[0].toUpperCase() + word.slice(1)
      })
      .join(' ')
  }}
</template>

基本上，我们希望模板中的所有内容都直观地知道它是什么显示。为了保持这一点，我们应该将复杂的表达式重构为适当命名的组件选项。分离复杂物的另一个好处表达式意味着这些值可以重用。

<template>{{ normalizedFullName }}</template>

<script>
export default {
  // 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(' ')
    },
  },
}
</script>

结论

你有它。

这些是 12 个最常见的最佳实践，它们将使你的 Vue 代码更易于维护、可读和更专业。希望这些提示对您有用（因为它们绝对是我一直想记住的事情）。

作者：terry，如若转载，请注明出处：https://www.web176.com/news/frontend/28017.html