vue 开发规范

vue 代码规范

• 1.v-if 和 v-show 区分使用场景

• 2.computed 和 watch 区分使用场景，避免 template 中复杂的表达式

• 3.v-for 遍历必须为 item 添加 key，且避免同时使用 v-if，并且避免 index 当作 key

• 4.Object.freeze 冻结数据优化

• 5.Vue 组件销毁时手动移除这些（addEventListener）事件的监听

• 6.路由懒加载

• 7.第三方插件的按需引入

• 8.优化无限列表性能（上拉加载）

• 9.服务端渲染 SSR or 预渲染

• 10.keep-alive 对组件进行缓存，从而节省性能

• 11.图片压缩，开启 Gzip，大的图片尽量走 cdn，公共包 CDN 引入

• 12.提取常量和字典数据为一个公共文件

• 13.尽量提取全局的 vue 过滤器/自定义指令/全局混入/局部混入

• 14.区分提取全局组件和业务组件

• 15.业务逻辑复杂的 vue 页面需拆分开 css,js,vue

• 16.vue 的钩子函数，按照生命周期的顺序书写，方便查阅，同时符合 eslint 的规范

• 17.拆分小组件：一个组件内(vue 文件)功能过多时，拆分成小组件

• 18.router base 和 vue.config.js 中的 publicPath: 使用.env 全局变量(区分环境)

• 100.组件内的样式：用 scoped 属性，限制其作用域，不影响其他组件