小文的前端学习笔记---------Vue优化方案小结

Vue优化

• 编码优化：

1. 不要将所有数据都放在data中（因为data中的数据都会增加getter和setter，会收集对应的watcher）；
2. SPA页面采用keep-alive缓存组件；
3. 数据持久化问题（防抖，节流）；
4. v-for中key保证唯一性并且如果v-for时给每项元素绑定事件需要用事件代理。
5. 销毁时可以手动移除一下定时器，防止内存泄漏

• 加载性能优化：

1. 第三方模块按需导入（像element-ui这样的第三方组件库可以按需引入避免体积过大）；
2. 图片懒加载（lazyload unload事件做预加载）；
3. 滚动到可视区域动态加载（默认只渲染三屏 当前看到的 上一页 下一页 别的用空div撑起）。

• SEO优化
• 打包优化：使用cdn的方式加载第三方模块
• SSR（服务端渲染）