Vue如何制作高度模块化的程序 原创

春节不停更，此文正在参加「星光计划-春节更帖活动

1. 确保使用内部v-for键

将关键属性与指令一起使用可以帮助你的应用实现可预测和持久性。无论您对数据进行多么小的更改。这是必不可少的，因此可以方便地跟踪您的组件并准确引用您的各种元素。

如果没有 Keys，就无法确定 DOM 元素的显示方式，也无法保证它们的可预测行为。但是，如果您保持为每个组件提供唯一的key，那么很容易预测 Vue 应用程序将如何处理 DOM 操作。

< !-- BAD -- >
< div v-for=features in features' >  < / div >
 
< !-- GOOD! -- >
< div v-for= features in features' :key='feature.id' >

2. 使用操作：提交数据并进行API调用

我的大部分 API 调用都是在 Vuex 操作中进行的，因为它们非常方便地获取数据，并提供一定程度的可重用性和封装。

• 如果我被要求，在两个不同的地方获取相同的网页，那么在调度程序和正确参数的帮助下，我将能够获取，提交和返回，没有重复的代码比调度程序。
• 如果我被要求，在页面已经被获取时应用相同的逻辑，我会在一个地方这样做以减少服务器上的负载，而且我很确定它将在任何地方都有效。
• 跟踪 Mixpanel 事件中的操作非常方便，另一方面，代码库易于维护。相信我;这种方式工作,你会有一种满足感。

3. 命名提交 – 遵循规范约定

一旦应用程序增长，我们都需要浏览组件的历史记录。如果您或您的任何团队成员没有遵循相同的规范来命名他们的提交，那么识别和了解每个提交的作用将变得至关重要。遵循下面列出的指南，以便在浏览项目历史记录时更轻松地提交。

提交消息格式

< type >( <  scope > ): < subject >
< BLANK LINE >
< body >
< BLANK LINE >
< footer >

示例：docs（changelog）：
将更改日志更新到 beta.5
修复（发布）：需要依赖于最新的 rxjs 和区域.js

4. 多个 v-if

建议永远不要使用各种 v-if 条件从 Vue 组件的渲染函数渲染多个元素。使用< div >包装元素，<template>包装额外的元素。

< template v-if=“true” >
 < p >Paragraph 1 < / p >
 < p >Paragraph 2 < / p >
 < p >Paragraph 3 < / p >
< / template >

5. 第三方软件包

当一个开发团队在同一个项目上工作时，安装的软件包的数量变得如此之高，以至于没有人关心它。它间接影响应用程序的性能。为了提高性能，您可以使用 import 导入软件包来查看导入的模块化库，并确定它在增长时出现的问题。

6. 保持一致性 – 指令速记

常用指令的简写。

• @ 用于 v-on
• ：用于 v-bind
• #用于 v-slot

在这里，您应该非常小心，要么应该在整个项目中使用它们，要么从一开始就不要使用它。使您的项目更加一致，代码可读性更高。

7. 代码拆分

性能很重要，一旦应用程序变得很大，它就变得非常重要，使其尽可能更快速和高效。

异步组件

Vue.component('async-component', (resolve) => {
  resolve({
    template: '< div >Async Component< / div >',
    props: [ 'myprop' ]
  });
});

单个文件组件

< template >
  < div >A sync Component < / div >
< / template >
< script >
  export default {
    props: [ 'myprop' ]
  }
< / script >

这种导入语法甚至更简洁：

new Vue({ 
  el: '#app',
  components: {
    AsyncComponent: () => import('./AsyncComponent.vue')
  }
});

动态模块加载

export default {
  template: '< div >Async Component< /div >',
  props: [ 'myprop' ]
}

你可以尝试这样的事情;

import AsyncComponent from './AsyncComponent.js'`;
Vue.component('async-component', AsyncComponent);

8. 路由

在构建spa时，最常见的是使用客户端路由。 Vue没有内置路由，因为它有一个名为VueRouter的官方插件，它很容易使用，并提供了所有功能，您需要构建一个强大的应用程序。 如果你正在使用VueCLI，你可以在不安装npm-install Vue-router的情况下将它添加到你的应用程序中。

9. 避免直接访问DOM

在 Vue 应用程序上编程时，一定要避免直接访问 DOM。相反，您应该使用$refs，我发现这是访问DOM的理想方式，它更易于维护，并且您不再需要依赖特定的类名。

10. 向一个元素添加多个类

关于 Vue 的最好的事情之一就是，向元素添加动态类非常方便。

< div :class=”{'red': isError}” >< / div >

一种不同但最常见和最简单的方法是;

< div :class="{'red': isError, 'text-bold': isActive }” >< / div >

11. 使用选择器

用代码更好地解释它：

//我们有这个选择器
export const language = (state) => state.userConfig.language;
//我们需要方法放在我们的一个变量中
// Bad
[GET_GAMES]({ commit, rootState }) {
   const lang = rootState.userConfig.language;
}
// Good
[GET_GAMES]({ commit, rootState }) {
   const lang = language(rootState);
}

12. 验证你的Props

我不确定这种做法是否容易，我很早就知道了，但这是要遵循的最佳实践之一。在处理大型项目时，无法记住在道具中使用的类型、格式和约定。因此，以类似的方式考虑以下示例，您可以编写 prop 验证。

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

13. 适当的结构

Vue 没有任何默认的方式来构建应用程序，除非你使用的是 Nuxt。因此，它要求你和你的团队成为一个非常有组织的开发人员来创建一个可以理解的结构，因为以后再改会更有压力，更麻烦。

14. 自己清理。

在设计SPA时，建立内存使用率是相当明显的;如果不消除实例、间隔、自定义事件，则您的应用可能会变慢或无响应。

这可能看起来像这样：

created() {
  refreshUserLoginTokenInterval(); //在创建时，我们开始一个interval来刷新
},
beforeDestroy () {
  destroyUserLoginInterval(); //在组件被销毁之前，我们清理
}

15. 总结

上面列出的是关键优势和 Vue.js最佳实践，我相信每个开发人员都有自己的最佳实践，如果你认为我说的有错误，或者你有更好的方法，那么请随时在下面发表评论。