优化技巧

Object.freeze

这算是一个性能优化的小技巧吧。在我们遇到一些 big data的业务场景，它就很有用了。尤其是做管理后台的时候，经常会有一些超大数据量的 table，或者一个含有 n 多数据的图表，这种数据量很大的东西使用起来最明显的感受就是卡。但其实很多时候其实这些数据其实并不需要响应式变化，这时候你就可以使用 Object.freeze 方法了，它可以冻结一个对象(注意它不并是 vue 特有的 api)。

当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter，它们让 Vue 能进行追踪依赖，在属性被访问和修改时通知变化。 使用了 Object.freeze 之后，不仅可以减少 observer 的开销，还能减少不少内存开销。相关 issue。

使用方式：`this.item = Object.freeze(Object.assign({}, this.item))`

Watch immediate

添加immediate属性，这样初始化的时候也会触发

watch: {
  searchText: {
    handler: 'fetchUserList',
    immediate: true,
  }
}

减少全局操作

window.addEventListener('resize', this.__resizeHandler)，但再声明了之后一定要在 beforeDestroy或者destroyed生命周期注销它。window.removeEventListener('resize', this.__resizeHandler)避免造成不必要的消耗。

自动注册全局组件

自己封装和使用很多业务组件。但每次用的时候还需要手动引入，有些麻烦。

image.png

我们其实可以基于 webpack 的require.context来实现自动加载组件并注册的全局的功能。具体代码如下

image.png

我们可以创建一个GlobalComponents文件夹，将你想要注册到全局的组件都放在这个文件夹里，在index.js里面放上如上代码。之后只要在入口文件main.js中引入即可。

//main.js
import './components/Table/index' // 自动注册全局业务组件

这样我们可以在模板中直接使用这些全局组建了。不需要再繁琐的手动引入了。

当然你也不要为了省事，啥组件都往全局注册，这样会让你初始化页面的时候你的初始init bundle很大。你应该就注册那些你经常使用且体积不大的组件。那些体积大的组件，如编辑器或者图表组件还是按需加载比较合理。而且你最好声明这些全局组件的时候有一个统一的命名规范比如：globel-user-select这样的

lint

确保所有提交到远程仓库的代码都符合团队的规范。它主要使用到的工具是husky和lint-staged，
https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/advanced/git-hook.html#git-hooks