如何实现keep-alive组件状态保持的技巧？

本文共计2198个文字，预计阅读时间需要9分钟。

Keep-alive设计原则+针对某些业务场景，需要根据不同判断条件动态切换组件。频繁的组件切换会导致组件重复渲染，如果组件包含大量逻辑和DOM节点，极易造成性能问题。

keep-alive的设计初衷

有些业务场景需要根据不同的判断条件，动态地在多个组件之间切换。频繁的组件切换会导致组件反复渲染，如果组件包含有大量的逻辑和dom节点，极易造成性能问题。其次，切换后组件的状态也会完全丢失。keep-alive的设计初衷就是为了保持组件的状态，避免组件的重复渲染。

为什么keep-alive可以直接使用

开发者无需注册和引入，直接可以在模板中使用。 跟开发者使用Vue.component自定义的组件不同，keep-alive无需注册，在模板中直接可以使用，如下所示：

<keep-alive> <component :is="view"></component> </keep-alive>

这是因为keep-alive是vue的内置组件，已经在vue中提前定义。