Как же устал это слышать: «React для создания сложных приложений, а Vue так уж…»

Это да. Но во vue ты можешь управлять сам моментом начала рендера чего-то тяжёлого. Смысл тот же, но просто ты сам выносишь планировщик рендера наружу из системы реактивности:

import { ref, watch, nextTick } from ‘vue’;

function useDeferredValue(value, delay = 100) {

const deferredValue = ref(value.value);

watch(value, (newVal) => {

setTimeout(() => { deferredValue.value = newVal; }, delay); });

return deferredValue;

}

Но в реальной разработке на vue это требуется редко. В отличие от React, где при изменении стейта пересчитывается весь Virtual DOM компонента, система реактивности Vue (Dependency Tracking) обновляет только конкретные DOM-узлы, затронутые изменением. Поэтому там, где в React нужно либо прерывать рендер (Concurrent Mode), либо вручную оборачивать всё в useMemo/React.memo, во Vue обновления просто происходят быстрее и точечнее, не блокируя интерфейс.

Как же устал это слышать: «React для создания сложных приложений, а Vue так уж…»

deleted

Как же устал это слышать: «React для создания сложных приложений, а Vue так уж…»

keep-alive во Vue — это инструмент для кеширования состояния и экземпляров, он удаляет компоненты из DOM, освобождая ресурсы рендеринга.
То, что ты описываешь в React (Activity / hidden rendering) — это про пререндеринг. Во Vue это делается просто через v-showи это было под капотом с первых версий.
Что касается ресурсов: keep-alive хранит только JS-объект в памяти, а не живой DOM. Да, надо ручками чистить таймеры, подписки и тд, но это ответственность и дисциплина разраба писать чисто и убирать за собой)) Так что претензии к инструменту keep-alive тут беспочвенны)

Как же устал это слышать: «React для создания сложных приложений, а Vue так уж…»

Чтобы такая возможность была, код надо сделать асинхронным, например вот так:

Я бы сделал так:

setTimeout(() => console.log(a second passed'), 1000);

function* heavyProcessGenerator(totalIterations) {

  const chunkSize = 1e10;

  for (let i = 0; i < totalIterations; i += chunkSize) {

    const end = Math.min(i + chunkSize, totalIterations);

    for (let j = i; j < end; j++) {

    }

    yield i;

  }

}


function runGenerator(iterator) {

  function step() {

    const result = iterator.next();

    if (!result.done) {

      setTimeout(step, 0);

    } else {

      console.log('for loop done');

    }

  }

  step();

}

runGenerator(heavyProcessGenerator(1e10));

При желании можно и на vue написать кастомный хук с соответствующим функционалом "магических" хуков реакта (наверное), чтобы не только React считать

более пригодным для по-настоящему сложных приложений

Как же устал это слышать: «React для создания сложных приложений, а Vue так уж…»

Vue берёт лучшее из всех миров)

И в одну сторону со Svelte в том числе тоже смотрит. В последней версии появился экспериментальный (пока) Vapor Mode.