路由懒加载

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

Keep-alive

  1. <template> 
  2.   <div id="app"> 
  3.     <keep-alive> 
  4.       <router-view/> 
  5.     </keep-alive> 
  6.   </div> 
  7. </template>

使用 v-show 复用 DOM

  1. <template> 
  2.   <div class="cell"> 
  3.     <!--这种情况用v-show复用DOM，比v-if效果好-->     <div v-show="value" class="on"> 
  4.       <Heavy :n="10000"/> 
  5.     </div> 
  6.     <section v-show="!value" class="off"> 
  7.       <Heavy :n="10000"/> 
  8.     </section> 
  9.   </div> 
  10. </template>

v-for 遍历避免同时使用 v-if

虚拟滚动

vue-virtual-scroller
vue-virtual-scroll-list

副作用函数及时清除

  1. created() { 
  2.   this.timer = setInterval(this.refresh, 2000) 
  3. } 
  4. beforeDestroy() { 
  5.   clearInterval(this.timer) 
  6. }

图片懒加载

vue-lazyload

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

第三方插件按需引入


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

  1. <template functional> 
  2.   <div class="cell"> 
  3.     <div v-if="props.value" class="on"></div>
  4.         <section v-else class="off"></section> 
  5.   </div> 
  6. </template> 
  8. <script> 
  9. export default { 
  10.   props: ['value'] 
  11. } 
  12. </script>

优秀的组件分割