关于vue.js:Vuejs中的keepalive组件

7次阅读

共计 437 个字符,预计需要花费 2 分钟才能阅读完成。

<keep-alive></keep-alive>,个别用来包裹动静组件,能够使被蕴含的租组件保留状态,防止被从新渲染。

当在组件之间来回切换到时候,它会缓存不流动的组件实例,而不是执行组件的申明周期的 destroyed 钩子函数销毁组件。

keep-alive 有两个属性,exclude 和 include,蕴含或者不蕴含该组件,而后对其进行相应的缓存操作。

当组件在 <keep-alive></keep-alive> 中被切换时,有 activated 和 deactivated 两个生命周期钩子函数被对应的执行。

 比方说:当咱们想要下次回到这个页面的时候,还是让其放弃来到时候的状态,如下拉的高度就是一个能够被保留的状态。咱们就能够调用其两个钩子函数,对滚动的高度进行记录和缓存,确保下次回来时,还是在以后的高度。在来到的时候,在 deactivated 中保留间隔视口顶部的高度;在回来的时候,在 activated 中,让其通过短暂的提早之后(大略 50ms),还是在来到时记录的那个地位的高度。

正文完
 0