乐乐世界第一
新手
新手
  • 最后登录2021-06-15
  • 发帖数3
阅读:6457回复:0

Vue中的keep-alive和一些生命周期

楼主#
更多 发布于:2019-12-05 16:09
keep-alive是vue内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。
keep-alive结合router,缓存部分页面

<keep-alive> <router-view></router-view> </keep-alive>
渲染在router-view的组件 在第一次打开时会执行生命周期,在之后打开就只会执行更新的生命周期了
但是使用keep-alive之后会多两个生命周期函数 activated 和 deactivated

如<keep-alive>包裹两个组件:组件A和组件B。当第一次切换到组件A时,组件A的created和activated生命周期函数都会被执行,这时通过点击事件改变组件A的文字的颜色,在切换到组件B,这时组件A的deactivated的生命周期函数会被触发;在切换回组件A,组件A的activated生命周期函数会被触发,但是它的created生命周期函数不会被触发了,而且A组件的文字颜色也是我们之前设置过的。






keep-alive中有两个属性(include,exclude)
include-字符串或正则表达式,只有匹配的组件会被缓存
exclude-字符串或正则表达式,任何匹配的组件都不会被缓存





最后附一张关于vue生命周期简介的图片

图片:lifecycle.png

游客


返回顶部

公众号

公众号