tl; dr: запрос Vue 3.0: разрешить <keep-alive> указывать, должен ли компонент оставаться в активированном состоянии, чтобы он мог реагировать на его свойства и выполнять действия, даже когда он находится в режиме keep-alive.

Иногда вам нужно поддерживать работоспособность сложного компонента, даже если это не главное, с чем сталкивается пользователь. Например, один из многих элементов в системе вкладок или что-то просто заменено другим через v-if. В любом случае, это компонент, который должен быть снова доступен в ближайшее время.

Для этого <keep-alive> очень хорошо служит цели. Это позволяет компоненту оставаться резидентным без необходимости очистки и повторного прохождения жизненного цикла компонента. Но здесь есть несколько предостережений.

Как только ваш keep-alive будет вызван, компонент перейдет в состояние deactivated (формальный крючок образа жизни, который вы можете уловить вместе с жизненным циклом аналога activated). На данный момент компонент все еще жив в памяти, но любые переданные реквизиты больше не будут реактивными. Итак, внутренне ничего не получено, но как только вы выйдете из этого и сработает activated хук жизненного цикла, все ваши реквизиты будут должным образом гидратироваться. Так что, если вы не особо заботитесь о том, чтобы внутреннее устройство вашего компонента оставалось живым, не о чем беспокоиться. Но если ваш компонент по-прежнему хочет отслеживать состояние своих свойств, потому что он должен делать что-то конкретное, вам нужно будет найти другой способ.

Моя проблема заключалась в том, что я привязывал и откреплял некоторые привязки клавиатуры, когда компонент входил и выходил из фокуса (как определено опорой отслеживания, которую я передавал). Я также случайно использовал ту же переменную, переданную в опору, чтобы решить через v-if, должен ли компонент отображаться или нет. И я хотел, чтобы он оставался живым, поэтому я завернул его в <keep-alive>. Излишне говорить, что, поскольку я использовал ту же переменную, он сначала использовал привязку v-if, чтобы отключить компонент, чтобы отправить его в режим keep-alive, затем попытался передать эту же переменную в качестве опоры компоненту, который бы сказал ему выключить сочетания клавиш. За исключением того, что опора больше не была реактивной, поэтому компонент так и не получил обновленную опору, чтобы сказать ему отключить привязки клавиш, и он остался включенным.

Достаточно простое исправление состояло в том, чтобы переопределить опору путем отслеживания activated/deactivated жизненного цикла и использовать это как переопределение, чтобы разрешить удаление привязки клавиш (активировать ее было бы нормально, поскольку опора будет реактивной). Не идеальное решение, так как оно основано на том, чтобы знать, что нахождение в keep-alive заставляет его отслеживать новые состояния жизненного цикла. И кто знает, какие еще новые функции могут привести к новым состояниям, которые я должен отслеживать.

Другой способ заключался в том, чтобы просто отслеживать v-if и опору с двумя разными варами и просто не забудьте сначала передать переменную, прежде чем переключать v-if.

(Обновление: описанное выше будет сложнее сделать, если все это будет выполняться с помощью естественно реактивных переменных, поскольку вам нужно перехватывать изменения, отслеживать их и выполнять в соответствующем порядке. Много добавленного кода без особых причин)

Не составляет большого труда выяснить, как это обойти, но я бы предпочел, чтобы в таком случае я мог сказать системе keep-alive, чтобы она просто позволяла моим компонентам действовать так, как им нужно, чтобы они оставались полностью живыми, но просто следуйте желания v-if и любые другие директивы управляют визуальной ситуацией.

Компонент не должен заботиться или должен знать, что он находится в keep-alive жизненном цикле, иначе он также был бы обязан знать о любых других потенциальных вещах, которые могут вызвать какой-либо нестандартный жизненный цикл.

И, отключая всякую реактивность, он создает проблему с созданием и предварительной выборкой / кэшированием компонентов, которые инкапсулированы и предназначены для автономной работы: подумайте о загрузке данных на основе переданного свойства :id.

Если бы я хотел попытаться выполнить фоновую загрузку данных на основе :id опоры, переданной в компонент, или чего-то еще в keep-alive, я не смогу сделать это, пока компонент не выйдет из keep-alive, а новый :id не будет гидратирован. Это означает, что будет задержка для подготовки компонента к отображению, которой можно было бы избежать, если бы он мог сделать это незаметно в фоновом режиме.

Да, можно переложить такую ​​подготовку на что-то внешнее, если компонент находится в другой системе (хранилище Vuex и т. Д.), Но иногда есть некоторое удобство дизайна и инкапсуляция, чтобы просто компонент знал вещи близко.

Длинный пункт в том, что, возможно, keep-aliveдолжен иметь возможность разрешить, чтобы его компоненты оставались активными, так же, как у него могут быть фильтры, чтобы решать, какие компоненты включить (и исключить), чтобы они не оставались активными.

Просто кое-что, чтобы пережить тех, кто помогает создавать Vue 3.0 :).