为静态的data加上Object.freeze()
当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter，这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。
但 Vue 在遇到像 Object.freeze() 这样被设置为不可配置之后的对象属性时，不会为对象加上 setter getter 等数据劫持的方法，也因此减少了 observer 的开销。
- 如果数据属性需要改变，可以重新替换成一个新的
Object.freeze()的对象。
扁平化数据结构
如果数据是深层嵌套的树形结构，容易需要经常遍历产生额外的性能开销，建议将其扁平化，变成item[id]这样的结构
优化无限列表性能
使用虚拟dom技术，vue-virtual-scroll-list 和 vue-virtual-scroller 都是解决这类问题的开源项目。你也可以参考 Google 工程师的文章 Complexities of an Infinite Scroller 来尝试自己实现一个虚拟的滚动列表来优化性能，主要使用到的技术是 DOM 回收、墓碑元素和滚动锚定。
懒加载
对于不可见区域的组件内容，直接不进行加载和初始化，以提升性能
查看Vue Lazy Component 介绍 ，了解如何做到组件粒度的懒加载。
使用服务端渲染或预渲染以节省首页初始化时间
网友评论