Vue 生命周期
Vue 数组更新
slice、concat 都会返回新的数组，不会引起视图的更新。
Vue 优化方案
- 代码层面
- v-if 和 v-show 区分场景使用
- computed 和 watch 区分场景使用
- v-for 添加 key，避免同时使用 v-if
- 事件的销毁
- 懒执行
- 图片资源懒加载
- 路由懒加载
- 第三方插件按需引入
- 优化列表性能
- 离线包
- 预加载
- SSR或预渲染
- webpack 层面
- 图片和代码压缩，图片base64，开启 production
- ES6开启 tree shaking
- 减少 ES6 转化为 ES5 的冗余代码
- 提取公共代码
- 模板预编译
- 优化 sourceMap
- 拆包代码，按需加载
- 构建结果输出分析
- 基础 web 技术层面
- DNS 预解析
- gzip 压缩
- 浏览器缓存
- 静态资源的强缓存与协商缓存
- 静态资源用 CDN
- 使用 Chrome Performance 查找性能瓶颈
- HTTP2
- 多路复用
- 首部压缩
- HTTPS
- 传输安全，SSL 443
- Webworker
Vue 内存泄漏
- 自定义指令，绑定后没有解绑
- unbind 钩子中解绑
- v-if 判断为 false，销毁了父组件，但是没有销毁引入的第三方库插入的 DOM 片段
- 可以保留对元素片段的引用，在 v-if 判断为 false 时，调用 destroy 方法销毁
- router 跳转时，子元素的 DOM 片段可能没有销毁
- 利用 beforeRouteLeave 钩子销毁