vue 优化

星空,二脚

已于 2023-08-08 20:50:22 修改

阅读量32

点赞数 1

文章标签： vue.js 前端面试

于 2023-07-11 22:45:35 首次发布

本文链接：https://blog.csdn.net/pyjavan/article/details/131670766

版权

Vue 优化

题目

你在实际工作中，做过哪些 Vue 优化？

前端通用的优化策略

压缩资源，拆包，使用 CDN ，http 缓存等。本节只讨论首屏，这些先不讲。

v-if 和 v-show

区别

v-if 组件销毁/重建
v-show 组件隐藏（切换 CSS display）

场景

一般情况下使用 v-if 即可，普通组件的销毁、渲染不会造成性能问题
如果组件创建时需要大量计算，或者大量渲染（如复杂的编辑器、表单、地图等），可以考虑 v-show

v-for 使用 key

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

<ul>
    <!-- 而且，key 不要用 index -->
    <li v-for="(id, name) in list" :key="id">{{name}}</li>
</ul>

computed 缓存

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

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

keep-alive

<keep-alive> 可以缓存子组件，只创建一次。通过 activated 和 deactivated 生命周期监听是否显示状态。

代码参考 components/KeepAlive/index.vue

场景

局部频繁切换的组件，如 tabs
不可乱用 <keep-alive> ，缓存太多会占用大量内存，而且出问题不好 debug

异步组件

对于体积大的组件（如编辑器、表单、地图等）可以使用异步组件

拆包，需要时异步加载，不需要时不加载
减少 main 包的体积，页面首次加载更快

vue3 使用 defineAsyncComponent 加载异步组件，代码参考 components/AsyncComponent/index.vue

路由懒加载

对于一些补偿访问的路由，或者组件提交比较大的路由，可以使用路由懒加载。

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // 路由懒加载
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]