分享几点关于 Vue 代码可读性的建议

前言

近来入坑了一个Vue项目，感觉掉进了祖传屎山中，可读性极差，更别说可维护性了。故借此专栏提几点关于Vue代码可读性的建议，觉得有用的点个赞，觉得建议不合理的发表评论批评一下，有更好的建议欢迎发表评论补充一下。

一、善用组件让代码更有条理性

千万不要把一个页面的实现代码都梭哈在一个.vue文件中，除非这个页面非常简单，不然这个.vue文件中的代码会又长又臭。

Vue提供组件的目的不仅仅是为了复用，也可以用来分割代码，甚至善用组件可以优化页面的渲染更新速度。这是因为Vue页面渲染更新时不会去更新页面中的组件，除非组件的props或者slot所引用的数据发生变化。

关于代码优化看看这篇：10个实用技巧让你的 Vue 代码更优雅

可以按以下步骤来将一个Vue页面分割成一个个组件让代码更有条理性

1.1、提取UI组件

如何定义UI组件呢？个人建议按有无处理服务端数据来区分UI组件和业务组件。例如加载弹窗、二次确认弹窗、消息提示框等等属于UI交互组件。

将UI组件提取出来后，可以把UI交互的代码和业务交互的代码剥离开来。切记不能UI组件中写业务代码，这样UI组件将无法复用。

举一个反例，在二次确认弹窗中添加二次确认后要处理的业务代码，导致UI组件将无法复用。我们可以模仿ElementUI中二次确认弹窗的调用来实现一个二次确认弹窗组件。

this.$confirm(message, title, options)
  .then(res =>{})
  .catch(err =>{})

这样业务代码可以写在then的回调函数中，组件的核心实现代码如下所示:

//confirm.vue

//index.js
import Vue from 'vue';
import options from './confirm.vue';
const Confirm = Vue.extend(options);
let confirm = undefined;
const ConfirmInit = (options = {}) => {
  return new Promise((resolve, reject) => {
    options.resolve = resolve;
    options.reject = reject;
    confirm = new Confirm({
      el: document.createElement('div'),
      data: options
    })
    document.body.appendChild(confirm.$el);
    Vue.nextTick(() => {
      if (confirm) confirm.show = true;
    })
    return confirm;
  })
}
Vue.prototype.$confirm = ConfirmInit;

//main.js
import 'components/confirm/index.js';//全局注册二次确认弹窗confirm组件

1.2、按模块提取业务组件

一个页面可以分为多个区域，比如头部、底部、侧边栏、商品列表、成员列表等等，每个区域可以当作一个模块来提取业务组件。

1.3、按功能提取功能组件

按模块提取完业务组件，此时业务组件有可能还是很庞大的，故要按功能在进一步地提取功能组件。

功能有大有小，提取要注意把握几个原则：

• 过于简单的功能不提取

  例如一个收藏的功能，只要请求一个接口就完成，类似这样的功能不要提取。要有一定复杂度的逻辑操作的功能才提取。

• 功能要单一，一个功能组件只处理一项业务。

  例如一个文件阅读器组件，有一个需求，要求打开文件后自动收藏该文件，那么收藏逻辑代码要写在哪里呢？

  或许你想都没想就在组件中监听文件成功打开的方法中写下收藏逻辑代码，过一段时间后，需求改为要先添加到阅读记录中再点击收藏按钮收藏，去组件中修改代码时发现另一个页面也引用了这个组件，故在组件中要额外加个参数做业务场景区分，随着需求的变化导致业务场景的叠加，组件的代码中会添加各种判断逻辑，久而久之变得又长又臭，显然这种做法是不可去。

  正确的做法是在组件标签上自定义一个事件on-fileOpen-success，用handleFileOpenSuccess函数来监听这个事件。

    @on-fileOpen-success="handleFileOpenSuccess"
  >
  
  

  在组件中监听文件成功打开的方法中执行this.$emit('on-fileOpen-success',data)触发这个事件，其中data可以把文件信息传递出去，在handleFileOpenSuccess函数去处理收藏或者添加历史记录再收藏等业务交互。这种做法使文件阅读器组件具有单一性。

• 功能组件尽量少包含UI部分，UI部分用slot插槽传入，这样使组件更纯粹，更具有复用性。

  例如上传组件的上传图标，不可能随着UI设计稿的变动就往里面添加一个上传图标，此时可以利用slot插槽把上传图标传入。

  //upload.vue
  
  

  //index.vue