Vue性能优化

Vue性能优化

1. 路由懒加载–按需加载
2. keep-alive缓存页面
   1. 列表页进入到详情页，在由详情页返回到列表页
   2. 设置了keep-alive的组件首次进入：beforeRouterEnter–>created–>activated–>deactivated
   3. 设置了keep-alive的组件再次进入：beforeRouterEnter–>activated–>deactivated
   4. 需要在activated钩子函数这种判断当前是从缓存中获取数据还是重新获取新的数据
3. v-if与v-show
4. v-for遍历的同时避免使用v-if。使用计算属性，把不需要显示的数据提前过滤
5. 长列表性能优化，如果是纯粹的数据展示就不需要做响应化，Object.freeze(result)
   1. 如果是大数据长列表，可以采用虚拟滚动，只渲染少部分区域的内容，参考：vue-virtucal-scroller、vue-virtual-scroll-list
6. 事件的销毁，Vue组件销毁时候，会自动解绑它的全部指令以及事件监听器，但是仅仅限于组件本身的事件
7. 图片懒加载，参考：vue-lazyload
8. 第三方插件按需引入，比如element-ui
9. 无状态的组件标记为函数式组件，
10. 子组件分割

<template>
  <div>
    <ChildComp />
  </div>
</template>
<script>
  export default {
    components: {
      ChildComp: {
        methods: {
          heavy() { /* 耗时任务 */ }
        },
        render (h) {
          return h('div', this.heavy())
        }
      }
    }
  }
</script>

11. 变量本地化
12. SSR