Vue 优化错误监控

Posted 2022-05-23 沿着路走到底

前端通用的优化策略

压缩资源，拆包，使用 CDN ，http 缓存等。

v-if 和 v-show

- `v-if` 组件销毁/重建

- `v-show` 组件隐藏（切换 CSS `display`）

场景

- 一般情况下使用 `v-if` 即可，普通组件的销毁、渲染不会造成性能问题

- 如果组件创建时需要大量计算，或者大量渲染（如复杂的编辑器、表单、地图等），可以考虑 `v-show`

v-for 使用 key

`key` 可以优化内部的 diff 算法。注意，遍历数组时 `key` 不要使用 `index` 。

omputed 缓存

`computed` 可以缓存计算结果，`data` 不变则缓存不失效。

export default 
    data() 
        return 
            msgList: [ ... ] // 消息列表
        
    ,
    computed: 
        // 未读消息的数量
        unreadCount() 
            return this.msgList.filter(m => m.read === false).length
        
    

keep-alive

`<keep-alive>` 可以缓存子组件，只创建一次。

通过 `activ