Сначала sync 2, затем watch 2 один раз. Обычный watcher пакетирует синхронные изменения; он не обязан вызываться отдельно на каждый промежуточный инкремент.
Сколько раз сработает Vue watch после двух инкрементов?
Сначала sync 2, затем watch 2 один раз. Обычный watcher пакетирует синхронные изменения; он не обязан вызываться отдельно на каждый промежуточный инкремент.
Короткий ответ
Что ответить на собеседовании
Подробный разбор
Ответ с пояснениями
Условие
Во Vue 3 есть count = ref(0), watch(count, v => console.log('watch', v)) с настройками по умолчанию. Обработчик одного клика выполняет count.value++; count.value++; console.log('sync', count.value);. До клика очередь обновлений пуста. Что будет выведено?
Ответ
Сначала sync 2, затем watch 2 один раз. Обычный watcher пакетирует синхронные изменения; он не обязан вызываться отдельно на каждый промежуточный инкремент.
Оба изменения происходят в одном синхронном обработчике, поэтому чтение count.value сразу даёт 2. Планируемый callback watcher увидит итоговое значение. С flush:'sync' поведение было бы иным: обработчик реагировал бы на каждую мутацию немедленно. Watch по умолчанию не запускается сразу при регистрации, если не указан immediate.
Источник: vuejs.org.