v-for和v-if同时使用解决方案

使用计算属性过滤数据

computed:{
  dataFilter: function() {
    return this.defaultData.filter(function(item){
      // 数据过滤
      return item
    })
  }
}

v-show or v-if

• 当组件会来回切换使用v-show,复用组件
• 只初始化生成，后续不会变化，使用v-if

变量本地化

computed: {
  val1() {
    return xx
  },
  val2() {
    const val1 = this.val1 //不要频繁的使用this.val1
    // 数据处理
    return xx
  }
}

不响应式的数据

• 冻结数据：object.freeze(data)

data() {
    return {
        key: {}
    }
},
created() {
    // get data
    this.key = object.freeze(data)
}

• 自己写defineProperty，configurable 写FALSE

无状态组件

标记为函数式组件,没有自己的状态，仅展示父组件传过来的数据

<template functional>
  <div>
    {{ val }}
  </div>
</template>
<script>
export default {
  prop: ['val']
}
</script>

长数据处理

滚动渲染： vue-virtual-scroller、vue-virtual-scroll-list

图片懒加载

图片存在于可视区域再去加载:vue-lazyload <img v-lazy="img/1.jpg">

路由懒加载

使得项目打包时体积缩减，页面使用时按需加载

routes: [
  { path: '/xx', component: () => import(@/views/xx) }
]

keep-alive

缓存页面 exclude include

<keep-alive>
  <router-view/>
</keep-alive>

子组件分割

耗时的任务，切割成独立组件，不影响外层。

事件销毁

vue组件会在销毁时解绑组件本身的事件，我们通过编程写的事件或监听器需要我们手动去解绑。 eg:setInterval、setTimeOut

beforeDestroy(){
  clearInterval(this.timer)
}

按需加载插件

bable plugin import

SSR

首屏速度优化