看过vue.js的api的小伙伴们都知道,keep-alive主要用于保留组件状态或避免重新渲染。那么我们在不同的组件切换的时候为了避免组件的重复渲染从而导致了我们的性能降低,我们通常都会在app.js的<router-view/>外面报一层keep-alive,代码如下:
<keep-alive>
<router-view/>
</keep-alive>
这样做确实性能是优化了,但是也会导致一些问题,比如说:我组件的值更新了,但是回到另一个组件的时候并没有被重新渲染。
解决这个问题的办法也很简单,vue的官方api给出“当组件在 <keep-alive>
内被切换,它的 activated
和 deactivated
这两个生命周期钩子函数将会被对应执行。”,所以我们只要在activated
这个生命周期里面重新去改变我们更新的值就可以啦。
最后欢迎关注我的公众号,在这里我们聊的不止代码,还有人生,另外我还放置可平时个人觉得比较有用的一切前端资料在公众号,欢迎共享!