vue 扁平化_Vue代码规范

规范是为了让团队统一，提高代码阅读性、降低代码维护成本

JS部分

1.和渲染无关的数据

vue中data的数据默认便会进行双向数据绑定，若是将大量的和渲染无关的数据直接放置在data中，将会浪费双向数据绑定时所消耗的性能，将这些和渲染无关的数据进行抽离并配合Object.freeze进行处理

table中columns数据可以单独提取一个外部js文件作为配置文件，也可以在当前.vue文件中定义一个常量定义columns数据，因为无论如何都是固定且不会修改的数据，应该使用Object.freeze进行包裹，既可以提高性能还可以将固定的数据抽离，一些下拉框前端固定的数据也建议此操作

const columnList = Object.freeze([

{ title: '姓名', key: 'name', align: 'center' },

{ title: '性别', key: 'gender', align: 'center' }

])

需要注意的是 Object.freeze() 冻结的是值，这时仍然可以将变量的引用替换掉，还有确保数据不会变才可以使用这个语法，如果要对数据进行修改和交互，就不适合使用冻结了。

2.Modal框的控制

一个页面种通常会存在很多个不同功能的弹框，若是每一个弹框都设置一个对应的变量来控制其显示，则会导致变量数量比较冗余和命名困难，可以使用一个变量来控制同一页面中的所有Modal弹框的展示

比如某个页面中存在三个Modal弹框

// bad

// 每一个数据控制对应的Modal展示与隐藏

new Vue({

data() {

return {

modal1: false,

modal2: false,

modal3: false,

}

}

})

// good

// 当modalType为对应的值时 展示其对应的弹框

new Vue({

data() {

return {

modalType: '' // modalType值为 modal1，modal2，modal3

}

}

})

3.debounce使用

例如远程搜索时需要通过接口动态的获取数据，若是每次用户输入都接口请求，是浪费带宽和性能的

当一个按钮多次点击时会导致多次触发事件，可以结合场景是否立即执行immediate

{ {item.label}}

import {debounce} from 'lodash'

methods：{

remoteMethod：debounce(function (query) {

// to do ...

// this 的指向没有问题

}, 200),

}

4.图片

功能的开发过程中，图片的处理往往是比较容易被忽略的环节，也会在一定程度影响开发的效率和页面的性能图片压缩问题，除非特别要求图片必须高质量的显示，否则都应该进行对应的压缩处理

不同业务场景进行图片格式的选型JPG 适用于呈现色彩丰富的图片，JPG 图片经常作为大的背景图、轮播图或 Banner 图出现等

Logo、颜色简单且对比强烈的图片或背景、需要透明度等

将常用且变动频率很低的小图片进行合并成雪碧图，对于变动比较频繁和小