vue的性能优化

代码层面：
1.路由懒加载  import('组件')

router = new VueRouter({
  routes:[
     {
        path:'/',
        compontent:()=>import('a.vue')
     }
  ]
})

2.keep-alive缓存页面

<tepmlate>
  <div>
     <keep-alive>
         <router-view></router-view>
     </kep-alive>
  </div>
</template>

3.使用v-show复用dom

<template>
   <div>
      <div v-show="value">
          qqqq
      </div>
      <div v-show ="!value">
          wwww
      </div>
   </div>
</template>

3. v-for  v-if 避免同时使用

<template>
   <div>
      <ul>
         <li v-for="user in users">
            <div v-if="user.value">
                qqqq
            </div>          </li>
      </ul>
   </div>
</template>

这样会存在不必要的循环，解决：使用计算属性

<template>
   <div>
      <ul>
         <li v-for="user in users">
            <div v-if="user.value">
                qqqq
            </div>         
          </li>
      </ul>
   </div>
</template>
<script>
   export default{
     computed:{
        activeUsers(){
          return this.users.filter(user=>{
            return user.value
          })   
        }
     }
   } 
</script>

4.长列表性能优化

如果列表是纯粹的数据展示，不会有任何改变，就不需要做响应式

object.freeze(users)  //冻结

如果是大数据长列表，可采用虚拟滚动，只渲染少部分区域内容

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

参考vue-virtual-scroller、vue-virtual-scroll-list

5.事件销毁

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

created(){
  this.timer = setInterval(this.refresh,2000)
},
beforeDestory(){
  clearInterval(this.timer)
}

6.图片懒加载

对于图片过多的页面，为加速页面加载速度，很多时候我们需要将页面内未出现在可视区域内的图片先不做加载，等到滚动到可视区域后再加载

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

7.第三方插件按需引入

像element-ui这样的第三方插件，要按需引入避免体积过大

import Vue from 'vue'
import {Button,MessageBox} from 'element-ui'
Vue.use(Button);
Vue.use(Select);

8.无状态的组件标记为函数组件

<template>
  <div>
    <div v-if="props.value"></div>
    <section></setion>    
  </div>
</template>
<script>
  props:['value']
</script>

9.子组件分割

vue是组件更新的，对于频繁更新的部分，单独封装成组件

10.变量本地化