### http多路复用 * Keep-Alive解决的核心问题：一定时间内，同一域名多次请求数据，只建立一次HTTP请求，其他请求可复用每一次建立的连接通道，以达到提高请求效率的问题。这里面所说的一定时间是可以配置的，不管你用的是Apache还是nginx。 * 解决两个问题: 串行文件传输(采用二进制数据帧)； 连接数过多(采用流, 并行传输) ---------------------- ## keep-alive 的作用 keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。 include - 字符串或正则表达，只有匹配的组件会被缓存 ； exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存。 ```javascript <keep-alive include="a"> <component> <!-- name 为 a 的组件将被缓存！ --> </component> </keep-alive> ``` router-view 也是一个组件，如果直接被包在 keep-alive 里面，所有路径匹配到的视图组件都会被缓存，如果只想 router-view 里面某个组件被缓存，怎么办？-------------- 增加 router.meta 属性 ```javascript // routes 配置 export default [ { path: "/", name: "home", component: Home, meta: { keepAlive: true } }]; ``` ```javascript <keep-alive> <router-view v-if="$route.meta.keepAlive"> <!-- 这里是会被缓存的视图组件，比如 Home！ --> </router-view> </keep-alive> ``` **❗ 小知识：** `<keep-alive>`拥有自己独立的钩子函数 `activated` | `deactivated` * `activated` → 在被`<keep-alive>`包裹的组件中才有效，当组件被激活时使用该钩子 * `deactivated` → 在被`<keep-alive>`包裹的组件中才有效，当组件被停止时使用该钩子