前端通用的优化策略
压缩资源，拆包，使用 CDN ，http 缓存等。
v-if 和 v-show
- `v-if` 组件销毁/重建
- `v-show` 组件隐藏（切换 CSS `display`）
场景
- 一般情况下使用 `v-if` 即可，普通组件的销毁、渲染不会造成性能问题
- 如果组件创建时需要大量计算，或者大量渲染（如复杂的编辑器、表单、地图等），可以考虑 `v-show`
v-for 使用 key
`key` 可以优化内部的 diff 算法。注意，遍历数组时 `key` 不要使用 `index` 。
computed 缓存
`computed` 可以缓存计算结果，`data` 不变则缓存不失效。
export default {
data() {
return {
msgList: [ ... ] // 消息列表
}
},
computed: {
// 未读消息的数量
unreadCount() {
return this.msgList.filter(m => m.read === false).length
}
}
}keep-alive
`<keep-alive>` 可以缓存子组件，只创建一次。
通过 `acti