Vue性能优化方法？

• 路由懒加载

const router = new VueRouter({ 
  routes: [ 
    { path: '/foo', component: () => import('./Foo.vue') }   ] 
}) 

• keep-alive 缓存页面

<template> 
  <div id="app">     <keep-alive>       <router-view/>     </keep-alive>   </div> 
</template> 

• 使用 v-show复用 DOM

<template> 
  <div class="cell">     <!--这种情况用v-show复用DOM，比v-if效果好-->     <div v-show="value" class="on">       <Heavy :n="10000"/> 
    </div> 
    <section v-show="!value" class="off">       <Heavy :n="10000"/> 
    </section> 
  </div> 
</template> 

• v-for 遍历避免同时使用v-if
• 长列表优化
  如果列表是纯粹的数据展示,不会改变,就不需要做响应式

export default {   data: () => ({     users: [] 
  }), 
  async created() { 
    const users = await axios.get("/api/users");     this.users = Object.freeze(users); 
  } 
}; 

• 如果大数据列表,可采取虚拟滚动,只渲染小部分区域内容

<recycle-scroller   class="items"   :items="items"   :item-size="24" 
> 
  <template v-slot="{ item }">     <FetchItemView       :item="item"       @vote="voteItem(item)"     /> 
  </template> </recycle-scroller> 

• 图片懒加载

<img v-lazy="/static/img/1.png"> 

• 第三方插件按需引入
• 无状态组件标记为函数组件
• 子组件分割
• 变量本地化