[Vue][面试]你了解哪些vue性能优化的方法

你了解哪些vue性能优化的方法

答题思路：根据题目描述，这里主要探讨Vue代码层面的优化

• 路由懒加载
• keep-alive缓存页面
• 使用v-show复用DOM
• v-for遍历避免同时使用v-if,实现方式举例

<template>
      <ul>
            <li v-for="user in activeUsers" :key="user.id">{{user.name}}</li>
      </ul>
</template>
<script>
export default {
      computed:{
            activeUsers: function() {
                  return this.users.filter(function(user){
                        return user.isActive
                  })
            }
      }
}
</script>

• 长列表性能优化
  – 如果列表是纯粹的数据展示，不会有任何改变，就不需要做响应化
  export default { data(){ users:[] }, async created() { const users = await axios.get("api/users") this.users = Object.freeze(users) } }
  – 如果是大数据长列表，可采用虚拟滚动，只渲染少部分区域的内容（vue-virtual-scroller）

• 事件的销毁
  vue组件销毁时，会自动解绑它的全部指令及事件监听器，但是仅限于组件本身的事件，例如某个组件的定时器销毁

• 图片懒加载

• 第三方插件按需引入

• 无状态的组件标记为函数式组件

• 子组件分割

• 变量本地化

• SSR