# Vue 优化
作者： 木木(linqh@authine.com)
# 利用Object.freeze()提升性能 vue 2.x es2015
Object.freeze() 可以冻结一个对象，冻结之后不能向这个对象添加新的属性，不能修改其已有属性的值，不能删除已有属性，以及不能修改该对象已有属性的可枚举性、可配置性、可写性。该方法返回被冻结的对象。
当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter，这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。
但 Vue 在遇到像 Object.freeze() 这样被设置为不可配置之后的对象属性时，不会为对象加上setter getter等数据劫持的方法。
提示
一般用于不变的列表数据（展示用的），这种情况下可以改善用户体验和减少内存占用
# 避免持久化Store数据带来的性能问题
Vue 社区中比较流行的 vuex-persistedstate，利用了 store 的 subscribe 机制，来订阅 Store 数据的 mutation，如果发生了变化，就会写入 storage 中，默认用的是 localstorage 作为持久化存储。
也就是说默认情况下每次 commit 都会向 localstorage 写入数据，localstorage 写入是同步的，而且存在不小的性能开销，如果你想打造 60fps 的应用，就必须避免频繁写入持久化数据
提示
所以对于数据持久化，我们一般要考虑具体场景来缓存，而非盲目的所有状态数据都处于同步缓存中， 有阻塞延时的情况诞生，用户体验不好
# 白屏问题
常规客户端渲染都是在浏览器拉回代码后，开始解析相关的逻辑，也就说模板指令这些是拿到之后才处理的。
硬件性能好和网络好的情况下，可能体验不会很糟糕。
反之，等待过程会一片空白，因为还没解析完毕，DOM 区域还是空白的.
当前主流的措施除了减小打包体积外，就是ssr(server side render)，把解析的问题丢给服务端去处理。
用户请求拿到的是 html,体积很小且不用本地再去处理vue模板这些，也有利于seo
# 无限列表
就是处理大量数据的时侯，快速滑动会卡顿，因为渲染不过来，最常见的是请求列表或者表格中。
针对这种情况，社区用了窗口化的姿势来处理，就是局部渲染,滚动所在，渲染所在
有现成的封装方案：vue-virtual-scroll-list
# 善用内置优化
比如用keep-alive来缓存高频使用但变化率很低的的组件，比如用v-show来代替部分v-if的场景
# 组件懒加载 webpack 4.x
当前流行的是采用 webpack 的姿势,基于 Promise去异步请求，需要的时侯才加载，降低主入口体积。
const Foo = () => import('./Foo.vue')
未完待续,欢迎补充...