vue性能优化的方法

1、路由懒加载

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

2、keep-alive 缓存页面

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

3、使用v-show来复用Dom

<template functional>
    <div class="cell">
        <div v-show="props.value" class="on">
            <Heavy :n="10000" />
        </div>
        <section v-show="!props.value" class="off">
            <Heavy :n="10000" />
        </section>
    </div>
</template>

4、v-for 中避免同时使用 v-if
5、图片懒加载 v-lazy
6、第三方插件按需引入

import {select,input} from 'element-ui'
Vue.use(select)
Vue.use(input)

7、无状态组件标记成函数组件

<template functional>
  <div v-if="prop.order"> 函数/无状态组件 </div>
</template>
<script>
	exprot default{
		props: ['order']
	}
</script>

8、子组件分割

<template functional>
  <div> 
  		<childrencomp>
   </div>
</template>
<script>
	exprot default{
		components: {
			childrencomp:{
					methods: {
						 heavt(){}
					},
					render(h){
							return h('div', this.heavt())
 					}
				}
		}
	}
</script>