在多个tab之间切换的时候，其余tab里面的组件就可以在需要的时候再异步加载~
有多个子路由的页面必用
components: { test: () => import("./Test.vue") },
components: {
test: () => import(/* webpackChunkName:‘test‘ */ "./Test.vue"), //给加载js命名
},
选其一
处理加载状态的写法
异步组件工程函数
const AsyncTest = () => ({ component: import(/* webpackChunkName:‘test‘ */ "./Test.vue"), loading: LoadingComponent, //加载时显示的组件 error: ErrorComponent, //超时或错误时显示的组件 delay: 200, //延迟 timeout: 3000, //超时 });
const Detail = () => import(‘../views/detail/Detail.vue‘);
include - 字符串或正则表达式。只有名称匹配的组件会被缓存
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件实例。
<keep-alive exclude="Detail">
<router-view />
</keep-alive>
一般适合只依赖于外部数据的变化而变化的组件，因其轻量，渲染性能也会有所提高。
创建函数式组件也很简单，只需要在模板添加 functional 声明即可
子组件
父组件
<template>
</template>
import List from ‘@/components/List.vue‘ export default { components: { List }, data() { return { list: [{
currentItem: ‘‘
}
}
}
减少加载次数和资源, 提升用户体验
1.安装vue-lazyload
yarn add vue-lazyload --save
2.在main.js中 导入
import VueLazyLoad from "vue-lazyload"
3.安装配置懒加载插件
Vue.use(VueLazyLoad, {
loading: require("./assets/img/common/placeholder.png")
});
4.使用
:src换为 v-lazy
v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；
v-show只是简单的基于css切换;
v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留
v-if有更高的切换消耗；
v-show有更高的初始渲染消耗
使用场景
频繁切换显示隐藏 , 则使用v-show 更合适些
需要同时控制多个元素显示隐藏时 , 使用v-if更合适些
如果在虚拟dom中去做数据的处理 , 性能消耗较高
推荐在将数据处理好后进行挂载渲染
避免嵌套过深 , 频繁遍历获取数据,
尽量减少直接写入 Storage 的频率：
1、多次写入操作合并为一次，比如采用函数节流或者将数据先缓存在内存中，最后在一并写入
2、只有在必要的时候才写入，比如只有关心的模块的数据发生变化的时候才写入
原文：https://www.cnblogs.com/wxyblog/p/14794125.html