这篇文章将为大家详细讲解有关vue中点火电极组件怎么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
问题描述(什么是点火电极)
维生顾名思义,保持活跃。保持谁活跃呢?
<李>首先我们知道,因为vue就是组件化编程,一个。vue文件就是一个组件。就像万事万物一样,都有从出生到消亡的生命周期过程,vue的组件也是一样,也有自己的生命周期,比如创建创建组件,安装往组件上挂数据,更新更新组件上挂的数据,摧毁把组件实例销毁。
<李>所以使用点火电极就是保持组件活跃,不会被摧毁销毁掉,就一直还活着,组件没有被销毁掉的话,组件上挂载的数据就还存在,所以状态就可以保留,所以,保活就可以保持组件的状态。
http协议的请求头里面也有一个维生,保持http通话,这样:连接:保活功能虽然不一样,但是思想上是一样的即为~保持状态活跃
小演示,看一下维生的使用效果
演示分为上面的路由导航部分,下面的内容区部分。点击上面的路由导航,路由视图渲染对应的路由组件。效果图如下:
<强>未使用点火电极的效果图
//, # App.vue中
& lt; template>
& lt;才能div 类=癰ox"比;
,,,& lt; !——,路由导航,——比;
,,,& lt; div 类=皀av"比;
,,,,,& lt; router-link =??在去家页面& lt;/router-link>
,,,,,& lt; router-link =?about"在对页去面& lt;/router-link>
,,,,,& lt; router-link =?detail"在去详细页面& lt;/router-link>
,,,& lt;/div>
,,,& lt; !——,路由导航对应的内容区,——比;
,,,& lt; main>
,,,,,& lt; router-view> & lt;/router-view>
,,,& lt;/main>
& lt;才能/div>
& lt;/template>//,home.vue中,放置一个复选框
& lt; el-checkbox v模型=癱hecked"祝辞备选项& lt;/el-checkbox>//,about.vue中,放置一个输入框
& lt; el-input v模型=癷nput",占位符=扒胧淙肽谌荨白４? lt;/el-input>//,detail.vue中方式一个下拉框
& lt; el-select v模型=皏alue",占位符=扒胙≡瘛氨?
& lt; el-option才能
,,,)=癷tem 拷贝options"
,,,:关键=癷tem.value"
,,,:label=癷tem.label"
,,,:价值=https://www.yisu.com/zixun/癷tem.value”>
<强>分析
我们发现,当我们没有使用点火电极组件包裹住router-view视图组件的时候,左边~我们在去家页面勾选了,在去对页面输入了,在去详细页面下拉选择了,离开这个路由页面,再回来的时,我们发现我们之前做的操作,勾选,输入,下拉选择都不存在了,之前的状态都没了。原因很简单,当离开这个路由页面的时候,会触发这个路由页面对应组件上的摧毁钩子方法,然后这个路由页面对应的组件就被销毁了,组件销毁了,组件上的挂载的数据也就啥也没有了。
<李>与此同时,我们可以看到在右边的Vue。js devtools工具中,router-view视图层始终只是家里,,细节组件来回切换,组件来回切换,其实就是组件不断的创建,销毁的过程。加下来我们看看使用点火电极的效果。
使用点火电极的效果图
& lt; template>
& lt;才能div 类=癰ox"比;
,,,& lt; !——,路由导航,——比;
,,,& lt; div 类=皀av"比;
,,,,,& lt; router-link =??在去家页面& lt;/router-link>
,,,,,& lt; router-link =?about"在对页去面& lt;/router-link>
,,,,,& lt; router-link =?detail"在去详细页面& lt;/router-link>
,,,& lt;/div>
,,,& lt; !——,路由导航对应的内容区,——比;
,,,& lt; main>
,,,,,& lt; keep-alive>, & lt; !——,使用点火电极包了一层,就可以缓存啦,——比;
,,,,,,,& lt; router-view> & lt;/router-view>
,,,,,& lt;/keep-alive>
,,,& lt;/main>
& lt;才能/div>
& lt;/template>
<强>分析
我们给视图层组件使用点火电极包住以后,我们发现,我们勾选,输入,下拉选择的内容,在路由来回切换的时候,就不会丢失了,即使用点火电极保存了之前的组件状态
