Vue优化9法

总结2019年3月vue开发大会Cuillaume Chau发表的Vue性能优化9法

其中包括：

• 函数型组件
• 子组件拆分
• 局部变量
• 或用v-show 减少v-if
• 使用keep-alive
• 活用延迟加载( Defer )
• 分批处理( Time slicing )
• 非响应模式( non-reactive )
• 仅渲染可视化部分

详细：

1. 函数型组件

Vue.js 组件提供了一个 functional ，设置后，就可以让组件变为无状态、无实例的函数化组件。因为只是函数，所以渲染的开销相对来说，较小。

<template functional>
  <div>{{props.value}}</div>
</template>
<script>
export default {
  props:[ 'value' ]
}
</script>

2. 子组件拆分

将一些可复用的组件单独拆分为一个组件。

3. 局部变量

 data() {
    return {
      msg: 0
    }
  },
  computed: {
      base() {
          return 10
      }
  },
  methods: {
      result(){
        //这里用一个变量接收下，就不用每次循环调用计算属性的base了，可以提高效率
        const base = this.base;
          for(let i=0;i<1000000;i++){
              this.msg += base
          }
      }
  },
  mounted(){
    this.result();
  }

4. 活用v-show，少用v-if

这个就明白多了，v-show是不操作网页的DOM树的，所以 v-show要比v-if更快，但是也各有优劣

5. <keep-alive>

<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
<keep-alive> 与 <transition>相似，只是一个抽象组件，它不会在DOM树中渲染(真实或者虚拟都不会)，也不在父组件链中存在，比如：你永远在 this.$parent 中找不到 keep-alive 。

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

6. 活用延迟装载( Defer )

待补充。。。

7. 分批处理

待补充。。。

8. 非响应模式( 非观察模式, non-reactive )

待补充。。。

9. 仅渲染可视化部分

待补充。。。