{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":" — это специальный "},{"type":"text","marks":[{"type":"bold"}],"text":"встроенный компонент Vue"},{"type":"text","text":", который позволяет "},{"type":"text","marks":[{"type":"bold"}],"text":"кэшировать состояние и DOM компонентов"},{"type":"text","text":", чтобы при повторном отображении они "},{"type":"text","marks":[{"type":"bold"}],"text":"не пересоздавались"},{"type":"text","text":", а восстанавливались из памяти."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Проще говоря:"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","marks":[{"type":"bold"}],"text":" делает компонент “живым”, даже если он временно убран с экрана. Он не уничтожается, а только скрывается."}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Это один из важнейших инструментов оптимизации."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🔥 Зачем нужен "},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":"?"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Обычно, когда компонент скрывается через "},{"type":"text","marks":[{"type":"code"}],"text":"v-if"},{"type":"text","text":":"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"он "},{"type":"text","marks":[{"type":"bold"}],"text":"удаляется из DOM"},{"type":"text","text":","}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"вызывается "},{"type":"text","marks":[{"type":"code"}],"text":"unmounted"},{"type":"text","text":","}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"теряются данные и состояние."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Например, переключение вкладок:"}]},{"type":"codeBlock","attrs":{"language":null},"content":[{"type":"text","text":"Tab A → Tab B → Tab A\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если компонент не кэшировать — он создаётся "},{"type":"text","marks":[{"type":"bold"}],"text":"с нуля"},{"type":"text","text":" каждый раз."},{"type":"hardBreak"},{"type":"text","text":"Это плохо, если внутри:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"тяжёлые вычисления"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"формы с заполненными данными"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"сторонние плагины"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"состояние, которое нужно сохранять"}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":" решает это."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🧪 Пример использования"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"\n \n\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Теперь:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"компонент будет создан один раз"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"при скрытии "},{"type":"text","marks":[{"type":"bold"}],"text":"не уничтожается"},{"type":"text","text":", а “усыпляется”"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"при повторном показе "},{"type":"text","marks":[{"type":"bold"}],"text":"восстанавливается мгновенно"}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🔁 Жизненный цикл с keep-alive"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Компонент получает два специальных хука:"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"⭐ "},{"type":"text","marks":[{"type":"code"}],"text":"activated()"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Компонент снова заработал (показан)."}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"⭐ "},{"type":"text","marks":[{"type":"code"}],"text":"deactivated()"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Компонент скрыт, но "},{"type":"text","marks":[{"type":"italic"}],"text":"не уничтожен"},{"type":"text","text":"."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Пример:"}]},{"type":"codeBlock","attrs":{"language":"js"},"content":[{"type":"text","text":"export default {\n activated() {\n console.log(\"Компонент активирован\");\n },\n deactivated() {\n console.log(\"Компонент скрыт\");\n }\n}\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🎛 Фильтрация компонентов (include / exclude)"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Можно указать, какие компоненты кэшировать:"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"\n \n\n"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"include / exclude принимают:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"строку: "},{"type":"text","marks":[{"type":"code"}],"text":"\"CompA,CompB\""}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"массив: "},{"type":"text","marks":[{"type":"code"}],"text":"['CompA', 'CompB']"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"RegExp: "},{"type":"text","marks":[{"type":"code"}],"text":"/^Admin/"}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🗂 Ограничение размера кэша — "},{"type":"text","marks":[{"type":"code"}],"text":"max"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"\n \n\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Vue хранит только последние 5 компонентов, остальные удаляются."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"⚠️ Когда "},{"type":"text","marks":[{"type":"italic"}],"text":"не стоит"},{"type":"text","text":" использовать "},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":"?"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"когда компонент зависит от URL (например, страницы в роутере)"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"когда нужно выполнять код при каждом входе в компонент (например, обновление данных)"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"когда компонент слишком тяжёлый, и его кэширование будет занимать много памяти"}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🧩 Использование с Vue Router"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Классика — кэширование страниц:"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"\n \n\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Очень ускоряет переходы между роутами."}]}]}

Что такое <keep-alive>?

Комментарии