Vue.js и планирование рендеринга в разных средах
Мне интересно понять, генерирует ли конкретная среда/реализация этот тип состояния гонки и почему. После изучения этих случаев я выбрал реализацию, показанную ниже:
Мой сценарий
Я создаю сложный переход при появлении компонента Vue. Основная идея состоит в том, чтобы дождаться монтирования компонента с помощью перехватчика жизненного цикла, а затем поместить различные изменения в очередь задач черезsetTimeout. Таким образом, браузер сможет отобразить элемент со стилем по умолчанию, прежде чем применять какие-либо новые стили.
<script setup>
// ...
onMounted(() => {
setTimeout(() => {
// All style manipulation logic
}, 0);
});
</script>
Вот ДЕМО, разоблачающее ситуацию (Логика полностью внутриComp.vue).
Это работает в моей локальной среде, однако имеет неожиданное поведение на игровой площадке Vue SFC (где анимация не происходит при загрузке страницы). Поэтому я обеспокоен тем, что этот тип подхода тесно связан со средой выполнения и серьезно влияет на возможность повторного использования моего компонента.
Переходы?
Vue использует встроенный компонент для предсказуемого управления эффектами, связанными с появлением компонента. Однако в моем случае я хотел бы иметь более императивный подход к своему компоненту, и это не ограничивается только внешним видом. Вот пример:
// Inside myComp's parent
onMounted(() => {
myComp.doSomething();
});
Проблема здесь в том, что родительский элемент не может знать, произошел ли уже рендеринг или переход.
Самое элегантное решение, которое я придумал, — это обнажить внутреннюю частьmyComp, что решаетсяTransitionперехватите появившийся компонент. ЗатемawaitтотPromiseвнутри родителяonMountedкрючок - будет ли это иметь смысл? Есть ли недостатки?