如何将keep-alive组件状态保持方法改写成长尾词？

本文共计2191个文字，预计阅读时间需要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中提前定义。