什么是keep-alive？在正常开发中，有些组件不需要多次初始化。这时候我们就需要对组件进行持久化，让组件的状态保持不变。更改，组件将不会在下一次显示时重新初始化。也就是说keepalive是Vue内置的一个组件，可以保持被包含的组件状态或者避免重新渲染。所谓组件缓存是Vue内置的组件，可以在组件切换时将状态保持在内存中，防止重复渲染DOM。，当包装动态组件时，缓存不活动的组件实例而不是销毁它们。与类似，是一个抽象组件：它本身不渲染DOM元素，也不出现在父组件链中。prop:include:字符串或正则表达式。只有匹配的组件才会被缓存。排除：字符串或正则表达式。任何匹配的组件都不会被缓存。keep-alive语句循环在页面第一次进入时执行，钩子的触发顺序是create->mounted->activated，退出时触发deactivated。再次进入（前进或后退）时，只会触发激活的事件。挂载方法等，只执行一次就放到mounted；每次执行组件时将其激活；基本用法/keep-alive>keepalive包含的组件不会被重新初始化，也就是说lifecycle函数不会被重取，但是有时候我们希望我们缓存的组件能够被再次渲染。这个时候Vue就为我们解决了这个问题。问题出在keep-alive中创建的组件，会多出两个生命周期钩子：activated和deactivated：activated在keepalive包含的组件再次渲染时触发deactivated，keepalive包含的组件销毁时触发keepalive抽象components，缓存的组件不会被挂载，所以提供activated和deactivated钩子函数参数可以理解keepalive可以接收3个属性作为参数来匹配对应的组件进行缓存：include包含组件（可以是字符串，数组，正则表达式，只匹配的组件将被缓存）exclude排除的组件（想想字符串，数组和正则表达式，任何匹配的组件都不会被缓存）max缓存组件的最大值（类型是字符或数字，你可以控制缓存组件的数量）注意:当使用正则表达式或数组时，一定要使用v-bind当遇到vue-router与router结合使用，缓存页面所有路径下的视图组件都会被缓存如果只想缓存router-view中的某个组件怎么办？使用include/exclude使用元属性1.使用include（类似于exclude的例子）缺点：需要知道组件的名称，当项目比较复杂时这不是一个好的选择2.使用meta属性的优点：不需要为$route.meta列出keepAlive属性需要缓存的组件名称：需要在router中设置router的元信息meta://...router.jsexportdefaultnewRouter({routes:[{path:'/',name:'Hello',component:Hello,meta:{keepAlive:false//不需要缓存}},{path:'/page1',name:'Page1',component:Page1,meta:{keepAlive:true//需要缓存}}]})参考前端进阶面试问题详解【加盐】使用router.meta展开假设有3条路线：A、B、C需求：默认AB跳转到A，A不刷新，C跳转到A，A刷新实现。在A的路由中设置meta属性：{path:'/',name:'A',component:A,meta:{keepAlive:true//需要缓存}}在B组件中设置beforeRouteLeave:exportdefault{数据（）{返回{}；},methods:{},beforeRouteLeave(to,from,next){//设置下一条路由metato.meta.keepAlive=true;//让A缓存，即不刷新next();}};在C组件中设置beforeRouteLeave：exportdefault{data(){return{};},methods:{},beforeRouteLeave(to,from,next){//设置下一条路由的metato.meta.keepAlive=false;//让A不缓存，即刷新next();}};使B可以返回给A，A不刷新；C返回A并刷新。防坑指南1.keep-alive首先匹配包含组件的name字段，如果name不存在则匹配当前组件的components配置中注册的名称。2.keep-alive在功能组件中不会正常工作，因为它们不缓存实例。3.当include和exclude同时存在匹配条件时，exclude优先级最高（当前vue2.4.2版本）。例如：如果组件A是通过包含和排除匹配的，那么组件A就不会被缓存。4.包含在keep-alive中，但符合exclude，activated和deactivated不会被调用。实现向前刷新，向后不刷新，感谢iceuncle分享《vue实现前进刷新，后退不刷新》。综上所述，路由方式还是不错的。你不需要关心你被重定向到哪个页面。只要router.go(-1)不加参数就可以回退。在非单页应用中，keep-alive不能有效缓存==keep-alive生命周期钩子函数：activated、deactivated使用会保持内存中的数据，如果想进入获取最新的页面上的数据，需要在activated阶段获取数据，在原来创建的hook中承担获取数据的任务。附录生命周期函数：就是Vue会在一定的时间内自动执行的函数。BeforeCreate(){}被执行。当它被执行时，数据和方法都没有被初始化。created(){}数据和方法被初始化。如果要调用methods方法或者操作data中的数据，最早只能在created中操作。beforeMount(){}表示模板已经在内存中编辑完成，但还没有渲染到模板页面中。即页面中的元素并没有真正被替换，而是之前写的一些模板字符串。mounted(){}表示内存中的模板已经真正挂载到页面上，用户可以看到渲染后的界面。请注意，这是生命周期函数的最后一个函数。执行完这个函数，就代表整个vue实例初始化完成，组件离开创建阶段，进入运行阶段。下面是两个生命周期函数在运行过程中的hook：beforeUpdate(){}表示我们的接口还没有更新，但是data里面的数据是最新的。即页面还没有同步最新数据中的数据。updated(){}表示页面中的数据和数据已经保持同步并且是最新的。beforeDestory(){}当这个生命周期钩子被执行时，Vue实例从运行阶段进入销毁阶段。这时候实例上的数据和方法就可用了。destroyed(){}表示组件已经完全销毁，组件中的所有实例方法都不可用
