[{"data":1,"prerenderedAt":36},["ShallowReactive",2],{"3786390":3},{"type_of":4,"id":5,"title":6,"description":7,"readable_publish_date":8,"slug":9,"path":10,"url":11,"comments_count":12,"public_reactions_count":12,"collection_id":13,"published_timestamp":14,"language":15,"subforem_id":16,"positive_reactions_count":12,"cover_image":13,"social_image":17,"canonical_url":18,"created_at":19,"edited_at":13,"crossposted_at":13,"published_at":14,"last_comment_at":14,"reading_time_minutes":20,"tag_list":21,"tags":22,"body_html":27,"body_markdown":28,"user":29},"article",3786390,"How does VuReact compile Vue's KeepAlive component to React?","VuReact is a compiler toolchain for migrating from Vue to React — and for writing React with Vue 3...","May 31","how-does-vureact-compile-vues-keepalive-component-to-react-2hp5","/smirk9581/how-does-vureact-compile-vues-keepalive-component-to-react-2hp5","https://dev.to/smirk9581/how-does-vureact-compile-vues-keepalive-component-to-react-2hp5",0,null,"2026-05-31T01:52:00Z","en",1,"https://media2.dev.to/dynamic/image/width=1200,height=627,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhrkhb5qnufabt00nvli8.png","https://vureact.top/en/guide/semantic-comparison/template/keep-alive.html","2026-05-31T00:53:43Z",4,"webdev, javascript, vue, react",[23,24,25,26],"webdev","javascript","vue","react","\u003Cp>\u003Ca href=\"https://vureact.top/en/guide/introduction.html\" target=\"_blank\" rel=\"noopener noreferrer\">VuReact\u003C/a> is a compiler toolchain for migrating from Vue to React — and for writing React with Vue 3 syntax. In this article, we dive straight into the core: how Vue's built-in \u003Ccode><KeepAlive>\u003C/code> component is compiled into React code by VuReact.\u003C/p>\n\n\u003Ch2>\n  \u003Ca name=\"before-we-start\" href=\"#before-we-start\">\n  \u003C/a>\n  Before We Start\n\u003C/h2>\n\n\u003Cp>To keep the examples easy to read, this article follows two simple conventions:\u003C/p>\n\n\u003Col>\n\u003Cli>All Vue and React snippets focus on core logic only, with full component wrappers and unrelated configuration omitted.\u003C/li>\n\u003Cli>The discussion assumes you are already familiar with Vue 3's \u003Ccode><KeepAlive>\u003C/code> component usage.\u003C/li>\n\u003C/ol>\n\n\u003Ch2>\n  \u003Ca name=\"compilation-mapping\" href=\"#compilation-mapping\">\n  \u003C/a>\n  Compilation Mapping\n\u003C/h2>\n\n\u003Ch3>\n  \u003Ca name=\"keepalive-component-caching\" href=\"#keepalive-component-caching\">\n  \u003C/a>\n  KeepAlive: Component caching\n\u003C/h3>\n\n\u003Cp>\u003Ccode><KeepAlive>\u003C/code> is Vue's built-in component for caching component instances. It preserves component state during dynamic component switching, avoiding re-rendering and data loss.\u003C/p>\n\n\u003Ch4>\n  \u003Ca name=\"basic-keepalive-usage\" href=\"#basic-keepalive-usage\">\n  \u003C/a>\n  Basic KeepAlive usage\n\u003C/h4>\n\n\u003Cul>\n\u003Cli>Vue\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight html\">\u003Ccode>\u003Cspan class=\"nt\"><template>\u003C/span>\n  \u003Cspan class=\"nt\"><KeepAlive>\u003C/span>\n    \u003Cspan class=\"nt\"><component\u003C/span> \u003Cspan class=\"na\">:is=\u003C/span>\u003Cspan class=\"s\">\"currentView\"\u003C/span> \u003Cspan class=\"nt\">/>\u003C/span>\n  \u003Cspan class=\"nt\"></KeepAlive>\u003C/span>\n\u003Cspan class=\"nt\"></template>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cul>\n\u003Cli>Compiled React\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight tsx\">\u003Ccode>\u003Cspan class=\"k\">import\u003C/span> \u003Cspan class=\"p\">{\u003C/span> \u003Cspan class=\"nx\">KeepAlive\u003C/span> \u003Cspan class=\"p\">}\u003C/span> \u003Cspan class=\"k\">from\u003C/span> \u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"s1\">@vureact/runtime-core\u003C/span>\u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"p\">;\u003C/span>\n\n\u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nc\">KeepAlive\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n  \u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nc\">Component\u003C/span> \u003Cspan class=\"na\">is\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">currentView\u003C/span>\u003Cspan class=\"si\">}\u003C/span> \u003Cspan class=\"p\">/>\u003C/span>\n\u003Cspan class=\"p\"></\u003C/span>\u003Cspan class=\"nc\">KeepAlive\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cp>As the example shows, Vue's \u003Ccode><KeepAlive>\u003C/code> component is compiled into the \u003Ca href=\"https://runtime.vureact.top/en/guide/components/keep-alive.html\" target=\"_blank\" rel=\"noopener noreferrer\">KeepAlive\u003C/a> \u003Cstrong>adapter component\u003C/strong> provided by VuReact Runtime — think of it as \"Vue's KeepAlive for React\".\u003C/p>\n\n\u003Cp>The key characteristics of this compilation approach are:\u003C/p>\n\n\u003Col>\n\u003Cli>\n\u003Cstrong>Semantic consistency\u003C/strong>: Fully simulates Vue \u003Ccode><KeepAlive>\u003C/code> behavior by implementing component instance caching\u003C/li>\n\u003Cli>\n\u003Cstrong>State preservation\u003C/strong>: Caches removed component instances, preventing state loss\u003C/li>\n\u003Cli>\n\u003Cstrong>Performance optimization\u003C/strong>: Reduces unnecessary component re-rendering\u003C/li>\n\u003Cli>\n\u003Cstrong>React adaptation\u003C/strong>: Implements Vue's caching semantics in the React environment\u003C/li>\n\u003C/ol>\n\n\n\u003Chr>\n\n\u003Ch3>\n  \u003Ca name=\"keepalive-with-key\" href=\"#keepalive-with-key\">\n  \u003C/a>\n  KeepAlive with key\n\u003C/h3>\n\n\u003Cp>To ensure caching works correctly, it is recommended to provide a stable \u003Ccode>key\u003C/code> for dynamic components.\u003C/p>\n\n\u003Cul>\n\u003Cli>Vue\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight html\">\u003Ccode>\u003Cspan class=\"nt\"><template>\u003C/span>\n  \u003Cspan class=\"nt\"><KeepAlive>\u003C/span>\n    \u003Cspan class=\"nt\"><component\u003C/span> \u003Cspan class=\"na\">:is=\u003C/span>\u003Cspan class=\"s\">\"currentComponent\"\u003C/span> \u003Cspan class=\"na\">:key=\u003C/span>\u003Cspan class=\"s\">\"componentKey\"\u003C/span> \u003Cspan class=\"nt\">/>\u003C/span>\n  \u003Cspan class=\"nt\"></KeepAlive>\u003C/span>\n\u003Cspan class=\"nt\"></template>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cul>\n\u003Cli>Compiled React\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight tsx\">\u003Ccode>\u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nc\">KeepAlive\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n  \u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nc\">Component\u003C/span> \u003Cspan class=\"na\">is\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">currentComponent\u003C/span>\u003Cspan class=\"si\">}\u003C/span> \u003Cspan class=\"na\">key\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">componentKey\u003C/span>\u003Cspan class=\"si\">}\u003C/span> \u003Cspan class=\"p\">/>\u003C/span>\n\u003Cspan class=\"p\"></\u003C/span>\u003Cspan class=\"nc\">KeepAlive\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cp>\u003Cstrong>The importance of key\u003C/strong>:\u003C/p>\n\n\u003Col>\n\u003Cli>\n\u003Cstrong>Cache identifier\u003C/strong>: \u003Ccode>key\u003C/code> is used to identify and match cached instances\u003C/li>\n\u003Cli>\n\u003Cstrong>Stable switching\u003C/strong>: Ensures correct cache hits when switching components\u003C/li>\n\u003Cli>\n\u003Cstrong>Performance optimization\u003C/strong>: Avoids unnecessary cache creation and destruction\u003C/li>\n\u003Cli>\n\u003Cstrong>Best practice\u003C/strong>: Always provide a stable \u003Ccode>key\u003C/code> for dynamic components\u003C/li>\n\u003C/ol>\n\n\n\u003Chr>\n\n\u003Ch3>\n  \u003Ca name=\"include-and-exclude-control\" href=\"#include-and-exclude-control\">\n  \u003C/a>\n  Include and exclude control\n\u003C/h3>\n\n\u003Cp>\u003Ccode><KeepAlive>\u003C/code> supports the \u003Ccode>include\u003C/code> and \u003Ccode>exclude\u003C/code> attributes for precise control over which components should be cached.\u003C/p>\n\n\u003Ch4>\n  \u003Ca name=\"include-include-specific-components\" href=\"#include-include-specific-components\">\n  \u003C/a>\n  include: Include specific components\n\u003C/h4>\n\n\u003Cul>\n\u003Cli>Vue\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight html\">\u003Ccode>\u003Cspan class=\"nt\"><template>\u003C/span>\n  \u003Cspan class=\"nt\"><KeepAlive\u003C/span> \u003Cspan class=\"na\">:include=\u003C/span>\u003Cspan class=\"s\">\"['ComponentA', 'ComponentB']\"\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>\n    \u003Cspan class=\"nt\"><component\u003C/span> \u003Cspan class=\"na\">:is=\u003C/span>\u003Cspan class=\"s\">\"currentView\"\u003C/span> \u003Cspan class=\"nt\">/>\u003C/span>\n  \u003Cspan class=\"nt\"></KeepAlive>\u003C/span>\n\u003Cspan class=\"nt\"></template>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cul>\n\u003Cli>Compiled React\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight tsx\">\u003Ccode>\u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nc\">KeepAlive\u003C/span> \u003Cspan class=\"na\">include\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"p\">[\u003C/span>\u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"s1\">ComponentA\u003C/span>\u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"p\">,\u003C/span> \u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"s1\">ComponentB\u003C/span>\u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"p\">]\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n  \u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nc\">Component\u003C/span> \u003Cspan class=\"na\">is\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">currentView\u003C/span>\u003Cspan class=\"si\">}\u003C/span> \u003Cspan class=\"p\">/>\u003C/span>\n\u003Cspan class=\"p\"></\u003C/span>\u003Cspan class=\"nc\">KeepAlive\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Ch4>\n  \u003Ca name=\"exclude-exclude-specific-components\" href=\"#exclude-exclude-specific-components\">\n  \u003C/a>\n  exclude: Exclude specific components\n\u003C/h4>\n\n\u003Cul>\n\u003Cli>Vue\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight html\">\u003Ccode>\u003Cspan class=\"nt\"><template>\u003C/span>\n  \u003Cspan class=\"nt\"><KeepAlive\u003C/span> \u003Cspan class=\"na\">:exclude=\u003C/span>\u003Cspan class=\"s\">\"['GuestPanel', /^Temp/]\"\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>\n    \u003Cspan class=\"nt\"><component\u003C/span> \u003Cspan class=\"na\">:is=\u003C/span>\u003Cspan class=\"s\">\"currentView\"\u003C/span> \u003Cspan class=\"nt\">/>\u003C/span>\n  \u003Cspan class=\"nt\"></KeepAlive>\u003C/span>\n\u003Cspan class=\"nt\"></template>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cul>\n\u003Cli>Compiled React\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight tsx\">\u003Ccode>\u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nc\">KeepAlive\u003C/span> \u003Cspan class=\"na\">exclude\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"p\">[\u003C/span>\u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"s1\">GuestPanel\u003C/span>\u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"p\">,\u003C/span> \u003Cspan class=\"sr\">/^Temp/\u003C/span>\u003Cspan class=\"p\">]\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n  \u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nc\">Component\u003C/span> \u003Cspan class=\"na\">is\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">currentView\u003C/span>\u003Cspan class=\"si\">}\u003C/span> \u003Cspan class=\"p\">/>\u003C/span>\n\u003Cspan class=\"p\"></\u003C/span>\u003Cspan class=\"nc\">KeepAlive\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cp>\u003Cstrong>Matching rules\u003C/strong>:\u003C/p>\n\n\u003Col>\n\u003Cli>\n\u003Cstrong>String matching\u003C/strong>: Exact match on component name\u003C/li>\n\u003Cli>\n\u003Cstrong>Regular expression\u003C/strong>: Matches component names matching the pattern\u003C/li>\n\u003Cli>\n\u003Cstrong>Array combination\u003C/strong>: Supports arrays of strings and regular expressions\u003C/li>\n\u003Cli>\n\u003Cstrong>Key matching\u003C/strong>: Attempts to match both component name and cache key\u003C/li>\n\u003C/ol>\n\n\n\u003Chr>\n\n\u003Ch3>\n  \u003Ca name=\"maximum-cache-instances\" href=\"#maximum-cache-instances\">\n  \u003C/a>\n  Maximum cache instances\n\u003C/h3>\n\n\u003Cp>The \u003Ccode>max\u003C/code> attribute limits the maximum number of cached instances, preventing excessive memory usage.\u003C/p>\n\n\u003Cul>\n\u003Cli>Vue\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight html\">\u003Ccode>\u003Cspan class=\"nt\"><template>\u003C/span>\n  \u003Cspan class=\"nt\"><KeepAlive\u003C/span> \u003Cspan class=\"na\">:max=\u003C/span>\u003Cspan class=\"s\">\"3\"\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>\n    \u003Cspan class=\"nt\"><component\u003C/span> \u003Cspan class=\"na\">:is=\u003C/span>\u003Cspan class=\"s\">\"currentTab\"\u003C/span> \u003Cspan class=\"nt\">/>\u003C/span>\n  \u003Cspan class=\"nt\"></KeepAlive>\u003C/span>\n\u003Cspan class=\"nt\"></template>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cul>\n\u003Cli>Compiled React\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight tsx\">\u003Ccode>\u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nc\">KeepAlive\u003C/span> \u003Cspan class=\"na\">max\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"mi\">3\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n  \u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nc\">Component\u003C/span> \u003Cspan class=\"na\">is\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">currentTab\u003C/span>\u003Cspan class=\"si\">}\u003C/span> \u003Cspan class=\"p\">/>\u003C/span>\n\u003Cspan class=\"p\"></\u003C/span>\u003Cspan class=\"nc\">KeepAlive\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cp>\u003Cstrong>Cache eviction strategy\u003C/strong>:\u003C/p>\n\n\u003Col>\n\u003Cli>\n\u003Cstrong>LRU algorithm\u003C/strong>: Evicts the least recently accessed cached instance\u003C/li>\n\u003Cli>\n\u003Cstrong>Memory management\u003C/strong>: Automatically clears cache exceeding the limit\u003C/li>\n\u003Cli>\n\u003Cstrong>Performance balance\u003C/strong>: Strikes a balance between memory usage and performance\u003C/li>\n\u003Cli>\n\u003Cstrong>Intelligent management\u003C/strong>: Manages cache intelligently based on access frequency\u003C/li>\n\u003C/ol>\n\n\n\u003Chr>\n\n\u003Ch3>\n  \u003Ca name=\"cache-lifecycle\" href=\"#cache-lifecycle\">\n  \u003C/a>\n  Cache lifecycle\n\u003C/h3>\n\n\u003Cp>Components cached by \u003Ccode><KeepAlive>\u003C/code> have special lifecycle hooks that can be observed.\u003C/p>\n\n\u003Ch4>\n  \u003Ca name=\"activated-and-deactivated-lifecycle\" href=\"#activated-and-deactivated-lifecycle\">\n  \u003C/a>\n  Activated and deactivated lifecycle\n\u003C/h4>\n\n\u003Cul>\n\u003Cli>Vue\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight html\">\u003Ccode>\u003Cspan class=\"nt\"><script \u003C/span>\u003Cspan class=\"na\">setup\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>\n\u003Cspan class=\"k\">import\u003C/span> \u003Cspan class=\"p\">{\u003C/span> \u003Cspan class=\"nx\">onActivated\u003C/span>\u003Cspan class=\"p\">,\u003C/span> \u003Cspan class=\"nx\">onDeactivated\u003C/span> \u003Cspan class=\"p\">}\u003C/span> \u003Cspan class=\"k\">from\u003C/span> \u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"s1\">vue\u003C/span>\u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"p\">;\u003C/span>\n\n\u003Cspan class=\"nf\">onActivated\u003C/span>\u003Cspan class=\"p\">(()\u003C/span> \u003Cspan class=\"o\">=>\u003C/span> \u003Cspan class=\"p\">{\u003C/span>\n  \u003Cspan class=\"nx\">console\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nf\">log\u003C/span>\u003Cspan class=\"p\">(\u003C/span>\u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"s1\">Component activated\u003C/span>\u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"p\">);\u003C/span>\n\u003Cspan class=\"p\">});\u003C/span>\n\n\u003Cspan class=\"nf\">onDeactivated\u003C/span>\u003Cspan class=\"p\">(()\u003C/span> \u003Cspan class=\"o\">=>\u003C/span> \u003Cspan class=\"p\">{\u003C/span>\n  \u003Cspan class=\"nx\">console\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nf\">log\u003C/span>\u003Cspan class=\"p\">(\u003C/span>\u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"s1\">Component deactivated\u003C/span>\u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"p\">);\u003C/span>\n\u003Cspan class=\"p\">});\u003C/span>\n\u003Cspan class=\"nt\"></script>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cul>\n\u003Cli>Compiled React\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight tsx\">\u003Ccode>\u003Cspan class=\"k\">import\u003C/span> \u003Cspan class=\"p\">{\u003C/span> \u003Cspan class=\"nx\">useActived\u003C/span>\u003Cspan class=\"p\">,\u003C/span> \u003Cspan class=\"nx\">useDeactivated\u003C/span> \u003Cspan class=\"p\">}\u003C/span> \u003Cspan class=\"k\">from\u003C/span> \u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"s1\">@vureact/runtime-core\u003C/span>\u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"p\">;\u003C/span>\n\n\u003Cspan class=\"kd\">function\u003C/span> \u003Cspan class=\"nf\">MyComponent\u003C/span>\u003Cspan class=\"p\">()\u003C/span> \u003Cspan class=\"p\">{\u003C/span>\n  \u003Cspan class=\"nf\">useActived\u003C/span>\u003Cspan class=\"p\">(()\u003C/span> \u003Cspan class=\"o\">=>\u003C/span> \u003Cspan class=\"p\">{\u003C/span>\n    \u003Cspan class=\"nx\">console\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nf\">log\u003C/span>\u003Cspan class=\"p\">(\u003C/span>\u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"s1\">Component activated\u003C/span>\u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"p\">);\u003C/span>\n  \u003Cspan class=\"p\">});\u003C/span>\n\n  \u003Cspan class=\"nf\">useDeactivated\u003C/span>\u003Cspan class=\"p\">(()\u003C/span> \u003Cspan class=\"o\">=>\u003C/span> \u003Cspan class=\"p\">{\u003C/span>\n    \u003Cspan class=\"nx\">console\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nf\">log\u003C/span>\u003Cspan class=\"p\">(\u003C/span>\u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"s1\">Component deactivated\u003C/span>\u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"p\">);\u003C/span>\n  \u003Cspan class=\"p\">});\u003C/span>\n\n  \u003Cspan class=\"k\">return\u003C/span> \u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">div\u003C/span>\u003Cspan class=\"p\">>\u003C/span>Component content\u003Cspan class=\"p\"></\u003C/span>\u003Cspan class=\"nt\">div\u003C/span>\u003Cspan class=\"p\">>;\u003C/span>\n\u003Cspan class=\"p\">}\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cp>\u003Cstrong>Lifecycle events\u003C/strong>:\u003C/p>\n\n\u003Col>\n\u003Cli>\n\u003Cstrong>useActived\u003C/strong>: Triggered when the component is restored from cache and displayed\u003C/li>\n\u003Cli>\n\u003Cstrong>useDeactivated\u003C/strong>: Triggered when the component is cached\u003C/li>\n\u003Cli>\n\u003Cstrong>Initial render\u003C/strong>: Activated is also triggered on the component's initial render\u003C/li>\n\u003Cli>\n\u003Cstrong>Final unmount\u003C/strong>: Deactivated is triggered when the component is finally destroyed\u003C/li>\n\u003C/ol>\n\n\n\u003Chr>\n\n\u003Ch3>\n  \u003Ca name=\"compilation-strategy-summary\" href=\"#compilation-strategy-summary\">\n  \u003C/a>\n  Compilation strategy summary\n\u003C/h3>\n\n\u003Cp>VuReact's KeepAlive compilation strategy demonstrates a \u003Cstrong>complete component caching conversion capability\u003C/strong>:\u003C/p>\n\n\u003Col>\n\u003Cli>\n\u003Cstrong>Direct component mapping\u003C/strong>: Maps Vue \u003Ccode><KeepAlive>\u003C/code> directly to VuReact's \u003Ccode><KeepAlive>\u003C/code>\n\u003C/li>\n\u003Cli>\n\u003Cstrong>Full attribute support\u003C/strong>: Supports all attributes including \u003Ccode>include\u003C/code>, \u003Ccode>exclude\u003C/code>, \u003Ccode>max\u003C/code>, etc.\u003C/li>\n\u003Cli>\n\u003Cstrong>Lifecycle adaptation\u003C/strong>: Converts Vue lifecycle hooks into React Hooks\u003C/li>\n\u003Cli>\n\u003Cstrong>Cached semantics preserved\u003C/strong>: Fully preserves Vue's caching behavior and semantics\u003C/li>\n\u003C/ol>\n\n\u003Cp>\u003Cstrong>How KeepAlive works\u003C/strong>:\u003C/p>\n\n\u003Col>\n\u003Cli>\n\u003Cstrong>Instance caching\u003C/strong>: Preserves the instance in memory when a component is switched out\u003C/li>\n\u003Cli>\n\u003Cstrong>State preservation\u003C/strong>: Keeps all of the component's state and data\u003C/li>\n\u003Cli>\n\u003Cstrong>DOM retention\u003C/strong>: Retains the component's DOM structure\u003C/li>\n\u003Cli>\n\u003Cstrong>Smart restoration\u003C/strong>: Quickly restores the previous instance when switching back\u003C/li>\n\u003C/ol>\n\n\u003Cp>\u003Cstrong>Performance optimization strategy\u003C/strong>:\u003C/p>\n\n\u003Col>\n\u003Cli>\n\u003Cstrong>On-demand caching\u003C/strong>: Only caches components that truly need it\u003C/li>\n\u003Cli>\n\u003Cstrong>Memory management\u003C/strong>: Intelligently manages cache memory usage\u003C/li>\n\u003Cli>\n\u003Cstrong>Fast restoration\u003C/strong>: Optimizes cache restoration performance\u003C/li>\n\u003Cli>\n\u003Cstrong>Garbage collection\u003C/strong>: Timely cleanup of cache that is no longer needed\u003C/li>\n\u003C/ol>\n\n\u003Cp>\u003Cstrong>Important notes\u003C/strong>:\u003C/p>\n\n\u003Col>\n\u003Cli>\n\u003Cstrong>Single child node\u003C/strong>: \u003Ccode><KeepAlive>\u003C/code> can only have one direct child node\u003C/li>\n\u003Cli>\n\u003Cstrong>Component type\u003C/strong>: Can only cache component elements, not regular elements\u003C/li>\n\u003Cli>\n\u003Cstrong>Key requirement\u003C/strong>: Without a stable key, it degrades to non-cached rendering\u003C/li>\n\u003C/ol>\n\n\u003Cp>VuReact's compilation strategy ensures a smooth migration from Vue to React. Developers do not need to manually implement component caching logic. The compiled code preserves Vue's caching semantics and performance advantages while following React's component design patterns, keeping the migrated application fully capable of component caching.\u003C/p>\n\n\u003Ch2>\n  \u003Ca name=\"related-links\" href=\"#related-links\">\n  \u003C/a>\n  Related Links\n\u003C/h2>\n\n\u003Cul>\n\u003Cli>Docs: \u003Ca href=\"https://vureact.top/en/guide/semantic-comparison/template/keep-alive.html\" target=\"_blank\" rel=\"noopener noreferrer\">https://vureact.top/en/guide/semantic-comparison/template/keep-alive.html\u003C/a>\n\u003C/li>\n\u003Cli>Runtime: \u003Ca href=\"https://runtime.vureact.top/en/guide/components/keep-alive.html\" target=\"_blank\" rel=\"noopener noreferrer\">https://runtime.vureact.top/en/guide/components/keep-alive.html\u003C/a>\n\u003C/li>\n\u003Cli>GitHub: \u003Ca href=\"https://github.com/vureact-js/core\" target=\"_blank\" rel=\"noopener noreferrer\">https://github.com/vureact-js/core\u003C/a>\n\u003C/li>\n\u003C/ul>\n\n","[VuReact](https://vureact.top/en/guide/introduction.html) is a compiler toolchain for migrating from Vue to React — and for writing React with Vue 3 syntax. In this article, we dive straight into the core: how Vue's built-in `\u003CKeepAlive>` component is compiled into React code by VuReact.\n\n## Before We Start\n\nTo keep the examples easy to read, this article follows two simple conventions:\n\n1. All Vue and React snippets focus on core logic only, with full component wrappers and unrelated configuration omitted.\n2. The discussion assumes you are already familiar with Vue 3's `\u003CKeepAlive>` component usage.\n\n## Compilation Mapping\n\n### KeepAlive: Component caching\n\n`\u003CKeepAlive>` is Vue's built-in component for caching component instances. It preserves component state during dynamic component switching, avoiding re-rendering and data loss.\n\n#### Basic KeepAlive usage\n\n- Vue\n\n```html\n\u003Ctemplate>\n  \u003CKeepAlive>\n    \u003Ccomponent :is=\"currentView\" />\n  \u003C/KeepAlive>\n\u003C/template>\n```\n\n- Compiled React\n\n```tsx\nimport { KeepAlive } from '@vureact/runtime-core';\n\n\u003CKeepAlive>\n  \u003CComponent is={currentView} />\n\u003C/KeepAlive>\n```\n\nAs the example shows, Vue's `\u003CKeepAlive>` component is compiled into the [KeepAlive](https://runtime.vureact.top/en/guide/components/keep-alive.html) **adapter component** provided by VuReact Runtime — think of it as \"Vue's KeepAlive for React\".\n\nThe key characteristics of this compilation approach are:\n\n1. **Semantic consistency**: Fully simulates Vue `\u003CKeepAlive>` behavior by implementing component instance caching\n2. **State preservation**: Caches removed component instances, preventing state loss\n3. **Performance optimization**: Reduces unnecessary component re-rendering\n4. **React adaptation**: Implements Vue's caching semantics in the React environment\n\n---\n\n### KeepAlive with key\n\nTo ensure caching works correctly, it is recommended to provide a stable `key` for dynamic components.\n\n- Vue\n\n```html\n\u003Ctemplate>\n  \u003CKeepAlive>\n    \u003Ccomponent :is=\"currentComponent\" :key=\"componentKey\" />\n  \u003C/KeepAlive>\n\u003C/template>\n```\n\n- Compiled React\n\n```tsx\n\u003CKeepAlive>\n  \u003CComponent is={currentComponent} key={componentKey} />\n\u003C/KeepAlive>\n```\n\n**The importance of key**:\n\n1. **Cache identifier**: `key` is used to identify and match cached instances\n2. **Stable switching**: Ensures correct cache hits when switching components\n3. **Performance optimization**: Avoids unnecessary cache creation and destruction\n4. **Best practice**: Always provide a stable `key` for dynamic components\n\n---\n\n### Include and exclude control\n\n`\u003CKeepAlive>` supports the `include` and `exclude` attributes for precise control over which components should be cached.\n\n#### include: Include specific components\n\n- Vue\n\n```html\n\u003Ctemplate>\n  \u003CKeepAlive :include=\"['ComponentA', 'ComponentB']\">\n    \u003Ccomponent :is=\"currentView\" />\n  \u003C/KeepAlive>\n\u003C/template>\n```\n\n- Compiled React\n\n```tsx\n\u003CKeepAlive include={['ComponentA', 'ComponentB']}>\n  \u003CComponent is={currentView} />\n\u003C/KeepAlive>\n```\n\n#### exclude: Exclude specific components\n\n- Vue\n\n```html\n\u003Ctemplate>\n  \u003CKeepAlive :exclude=\"['GuestPanel', /^Temp/]\">\n    \u003Ccomponent :is=\"currentView\" />\n  \u003C/KeepAlive>\n\u003C/template>\n```\n\n- Compiled React\n\n```tsx\n\u003CKeepAlive exclude={['GuestPanel', /^Temp/]}>\n  \u003CComponent is={currentView} />\n\u003C/KeepAlive>\n```\n\n**Matching rules**:\n\n1. **String matching**: Exact match on component name\n2. **Regular expression**: Matches component names matching the pattern\n3. **Array combination**: Supports arrays of strings and regular expressions\n4. **Key matching**: Attempts to match both component name and cache key\n\n---\n\n### Maximum cache instances\n\nThe `max` attribute limits the maximum number of cached instances, preventing excessive memory usage.\n\n- Vue\n\n```html\n\u003Ctemplate>\n  \u003CKeepAlive :max=\"3\">\n    \u003Ccomponent :is=\"currentTab\" />\n  \u003C/KeepAlive>\n\u003C/template>\n```\n\n- Compiled React\n\n```tsx\n\u003CKeepAlive max={3}>\n  \u003CComponent is={currentTab} />\n\u003C/KeepAlive>\n```\n\n**Cache eviction strategy**:\n\n1. **LRU algorithm**: Evicts the least recently accessed cached instance\n2. **Memory management**: Automatically clears cache exceeding the limit\n3. **Performance balance**: Strikes a balance between memory usage and performance\n4. **Intelligent management**: Manages cache intelligently based on access frequency\n\n---\n\n### Cache lifecycle\n\nComponents cached by `\u003CKeepAlive>` have special lifecycle hooks that can be observed.\n\n#### Activated and deactivated lifecycle\n\n- Vue\n\n```html\n\u003Cscript setup>\nimport { onActivated, onDeactivated } from 'vue';\n\nonActivated(() => {\n  console.log('Component activated');\n});\n\nonDeactivated(() => {\n  console.log('Component deactivated');\n});\n\u003C/script>\n```\n\n- Compiled React\n\n```tsx\nimport { useActived, useDeactivated } from '@vureact/runtime-core';\n\nfunction MyComponent() {\n  useActived(() => {\n    console.log('Component activated');\n  });\n\n  useDeactivated(() => {\n    console.log('Component deactivated');\n  });\n\n  return \u003Cdiv>Component content\u003C/div>;\n}\n```\n\n**Lifecycle events**:\n\n1. **useActived**: Triggered when the component is restored from cache and displayed\n2. **useDeactivated**: Triggered when the component is cached\n3. **Initial render**: Activated is also triggered on the component's initial render\n4. **Final unmount**: Deactivated is triggered when the component is finally destroyed\n\n---\n\n### Compilation strategy summary\n\nVuReact's KeepAlive compilation strategy demonstrates a **complete component caching conversion capability**:\n\n1. **Direct component mapping**: Maps Vue `\u003CKeepAlive>` directly to VuReact's `\u003CKeepAlive>`\n2. **Full attribute support**: Supports all attributes including `include`, `exclude`, `max`, etc.\n3. **Lifecycle adaptation**: Converts Vue lifecycle hooks into React Hooks\n4. **Cached semantics preserved**: Fully preserves Vue's caching behavior and semantics\n\n**How KeepAlive works**:\n\n1. **Instance caching**: Preserves the instance in memory when a component is switched out\n2. **State preservation**: Keeps all of the component's state and data\n3. **DOM retention**: Retains the component's DOM structure\n4. **Smart restoration**: Quickly restores the previous instance when switching back\n\n**Performance optimization strategy**:\n\n1. **On-demand caching**: Only caches components that truly need it\n2. **Memory management**: Intelligently manages cache memory usage\n3. **Fast restoration**: Optimizes cache restoration performance\n4. **Garbage collection**: Timely cleanup of cache that is no longer needed\n\n**Important notes**:\n\n1. **Single child node**: `\u003CKeepAlive>` can only have one direct child node\n2. **Component type**: Can only cache component elements, not regular elements\n3. **Key requirement**: Without a stable key, it degrades to non-cached rendering\n\nVuReact's compilation strategy ensures a smooth migration from Vue to React. Developers do not need to manually implement component caching logic. The compiled code preserves Vue's caching semantics and performance advantages while following React's component design patterns, keeping the migrated application fully capable of component caching.\n\n## Related Links\n\n- Docs: \u003Chttps://vureact.top/en/guide/semantic-comparison/template/keep-alive.html>\n- Runtime: \u003Chttps://runtime.vureact.top/en/guide/components/keep-alive.html>\n- GitHub: \u003Chttps://github.com/vureact-js/core>\n",{"name":30,"username":31,"twitter_username":13,"github_username":31,"user_id":32,"website_url":33,"profile_image":34,"profile_image_90":35},"Ryan John","smirk9581",3937044,"https://github.com/smirk9581","https://media2.dev.to/dynamic/image/width=640,height=640,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3937044%2F4b72d2cd-9432-46d4-924e-332cd54382c4.png","https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3937044%2F4b72d2cd-9432-46d4-924e-332cd54382c4.png",1780372426508]