vue中keep-alive的用法有详细讲解

问题描述（什么是keep-alive）keep-alive，顾名思义，保持活跃。谁让它保持活跃？首先我们知道，因为vue是组件化编程，一个.vue文件就是一个组件。就像任何事物一样，都有一个从生到死的生命周期过程。vue组件也是一样，它也有自己的生命周期，比如create创建组件，mounted挂组件上的数据，update更新组件上的数据，destroy销毁组件实例。所以使用keep-alive就是让组件保持活动状态，不会被destroy销毁，它会一直活着，如果组件没有销毁，组件上挂载的数据依然存在，所以状态可以保留，所以,keep-alive可以保持组件的状态。http协议的请求头中还有一个keep-alive，就是保持http的调用，像这样：Connection:keep-alive的作用虽然不同，但是思路是一样的。效果demo分为上层路由导航部分和下层内容区部分。点击上面的路由导航，路由视图渲染对应的路由组件。效果图如下：没有keep-alive效果图对应的代码//#App.vue//在home.vue中，放置一个复选框Alternatives//在about.vue中，放置一个输入框//detail.vue中的一个下拉框分析我们发现，当我们没有使用keep-alive组件包裹router-view视图组件时，左边~we在首页查看，在about页录入，在详情页下拉选择，离开这个路由页面，回来的时候发现我们之前做的勾选、输入、下拉选择等操作都不存在了，之前的状态也没有了。原因很简单。当离开这个路由页面时，会触发路由页面对应组件上的destroy钩子方法，然后销毁路由页面对应的组件，同时销毁组件，组件上挂载的数据也会被销毁走了。同时我们可以看到，在右侧的Vue.jsdevtools工具中，router-view视图层一直只是home、about、detail组件来回切换，组件在来回切换.其实就是不断创建和销毁组件的过程。加下来我们看看使用keep-alive的效果。使用保活效果图对应代码分析我们把view层组件用keep-alive包裹起来后，发现我们检查的内容，进入,和下拉选中的was在路由中来回切换时，不会丢失，即使使用keep-alive保存之前的组件状态。同时，我们可以看到，在右侧的Vue.jsdevtools工具中，在router-view视图中，切换过去的组件已经处于inactive状态。Inactive的英文意思是不活跃的、未使用的，即缓存起来的，没有被销毁。所以我们对组件所做的操作和组件的状态都被缓存了，所以我们在下拉框里勾选的、输入的、选择的都还在。Vue.jsdevtools非常好用，可以通过谷歌下载。vue开发中的好工具导致问题。我们这里发现如果直接加上keep-alive，router-view层级下的view组件都会被去掉。它们都被缓存了，但是有时候，我们只想缓存一部分，而不是全部，那怎么办呢？没关系，大佬们已经考虑好了，已经提前帮我们解决了，就是keep-alive中的include和exclude属性include和exclude指定是否缓存某些组件。值是字符串或正则表达式或数组。只有与include的值同名的组件才会被缓存，即指定缓存哪些，可以指定缓存多个。这里以字符串为例，指定多个组件缓存，语法以逗号分隔。如下：//指定要缓存的home组件和about组件exclude属性exclude是等价的为include的反义词，意思是except，指定哪些组件不被缓存，用法与include类似，如下：//除了home组件和about组件，其他都缓存，本例只缓存detail组件被缓存以include="about,detail"为例的效果图语法表示只有about和detail被缓存，其他组件不被缓存。看下图的vue工具，我们也可以看到缓存的组件如果不在对应的显示路由下，就会变为不活动状态。除了include和exclude属性，keep-alive还有一个属性就是max属性。这个max一般不会用的太多。主要目的是控制缓存组件的个数，缓存的先缓存。线被挤出来，相当于缓存优化的一种策略。毕竟，适当的缓存可以改善用户体验，缓存过渡，并且计算机会卡住。include和exclude的属性值是组件的名称。include和exclude的属性值是组件的名称，也就是组件的name属性值，如下是name属性值。会导致问题。我们知道组件中有对应的逻辑js部分，组件需要发送请求获取数据。一般我们都是在创建或者挂载的钩子中发送请求，向后端大佬要数据。关于组件使用keep-alive后的钩子函数，我们需要注意先使用keep-alive的钩子函数的执行顺序。使用keep-alive组件后，activatedhook和deactivatedhook会自动添加到组件中。activated组件被激活（使用）时触发可以简单理解为进入该页面时触发deactivated组件未被使用时触发（inactive状态）可以简单理解为离开该页面时触发进入和退出组件钩子的执行顺序假设我们只缓存home组件，我们先看代码，然后在hook中打印出相应的顺序。你知道钩子执行的顺序，印象深刻的代码如下进入组件打印结果如下我创建了钩子我挂载了钩子我激活了钩子离开组件打印结果如下我停用了钩子结束初始进入和离开created--->mounted--->activated-->deactivated以及后续进入和退出activated-->deactivated所以我们可以在activated和deactivated钩子中做一些逻辑处理，这两个hook有点类似于mounted和beforeDestroy钩子，但还是有区别的。毕竟使用keep-alive不会破坏组件。keep-alive的应用场景就是一个例子。查看表单中某个数据的详情页，返回的还是之前的状态，比如之前的筛选结果，或者之前的页码等。填写的表单内容路由开关还在，比如输入框，下拉选择框，switch开关等，用户输入了很多东西。跳转回来后，不能清零，不能再写user吧？Status，其实还有很多具体的应用场景，这里就不赘述了……作为对上面的补充，我们用一个keep-alive包裹router-view的小case来说明。其实一般情况下keep-alive要么包裹router-view，要么包裹dynamiccomponent组件。代码编写实际上是相同的。包裹动态组件的用法如下：keep-alive也支持v-bind的语法，所以也很灵活。