Объяснение викторины Vue Fes Japan 2025

Здравствуйте, это Мизусако, Сибаяма и Фукуда, веб-разработчики.

Состоялось на днях,Посмотреть Фес Япония 2025“, LINE Yahoo! Co., Ltd. участвовала в качестве золотого спонсора по итогам прошлого года. На корпоративном стенде LINE Yahoo мы провели викторину о Vue.js. В этой статье я объясню все 5 вопросов, которые были заданы на этот раз.

Вопрос 1

вопрос

Что из следующего является правильной разницей между компьютером и часами? (выберите один)

(1) Computing кэширует результаты вычислений, но Watch не кэширует их.
(2) просмотр всегда выполняется синхронно
(3) расчет допускает побочные эффекты, а часы — нет.
(4) Оба могут быть заменены точно таким же поведением.

отвечать

（1）

Объяснение

Вычисляемые свойства в Vue.js переоцениваются только тогда, когда изменяется реактивное значение, от которого они зависят, а результат кэшируется. ПодробностиОфициальная документация (расчетная)Он указан в.

С другой стороны, watch — это API для мониторинга изменений конкретных значений и выполнения обработки с побочными эффектами. О работе часовОфициальный документ (смотреть)полезно. watch выполняет обратный вызов каждый раз, когда значение изменяется, но не кэширует результаты. Кроме того, Vue внутренне объединяет несколько изменений, которые происходят за короткий период времени.

Кроме того, не рекомендуется иметь побочные эффекты внутри вычисляемых геттеров. Лучше всего использовать часы, когда вы хотите выполнить обработку побочных эффектов.

Вопрос 2

вопрос

Выберите тот, который приводит к реактивному изменению при увеличении счетчика. (Возможно несколько вариантов выбора)

（1）

const state = reactive({ count: 0 });
let { count } = state;
count++;

（2）

const state = reactive({ nested: { count: 1 } });
const { nested } = state;
nested.count++;

（3）

const state = reactive({ count: 0 });
const { count } = toRefs(state);
count.value++;

（4）

const number = ref(1);
const state = { count: number.value * 2 };
state.count++;

（5）

const state = { nested: reactive({ count: 1 }) };
state.nested.count++;

отвечать

（2）、（3）、（5）

Объяснение

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

(1) невозможно отследить, поскольку деструкторизованный счетчик является примитивным значением
(2) означает, что реактивный также преобразует вложенные объекты в реактивные, поэтому вложенный является реактивным прокси-сервером, и его можно отслеживать.
(3) предназначен для деструктуризации примитивных значений при сохранении реактивности.toRefs Я конвертирую его в ссылку, используя
(4) не отслеживается, поскольку state — это простой объект, а state.count — примитивное значение.
В (5) state.nested является реактивным прокси, поэтому можно обнаружить изменения вnested.count.

Вопрос 3

вопрос

Среди следующих реализаций (1)–(5) выберите ту, которая не рекомендована официальным представителем Vue. (Возможно несколько вариантов выбора)

отвечать

（1）、（2）、（5）

Объяснение

В (1) в v-for не указан ключ. Ключевая настройка – этоофициальная документацияЭто также рекомендуется. Если ключ отсутствует, состояние может быть неправильно унаследовано при повторном использовании DOM.
(2) использует v-for и v-if вместе в одном и том же элементе. Это официально устарело.v-if но v-for Поскольку он оценивается ранее, он может работать не так, как предполагалось. ПодробностиОфициальный документ «Внесение списка»Он указан в.
(5) использует деструктивный метод sort() внутри вычисления. Вычисляемые геттеры должны быть чистыми функциями без побочных эффектов. ОбъяснениеОфициальная документация (расчетная)Он указан в. Функция sort() устарела, поскольку она перезаписывает исходный массив. В качестве примера улучшения,[...fruits.value].sort((a, b) => a.name.localeCompare(b.name)) Существует способ копирования, а затем сортировки с использованием синтаксиса распространения, например:

Вопрос 4

вопрос

Что будет выведено на консоль, если вы смонтируете следующий компонент и один раз нажмете кнопку?

Child.vue

выбор

（1）

Child onUpdated
Parent onUpdated
Child onUpdated
Parent onUpdated
Child onUpdated
Parent onUpdated

（2）

Child onUpdated
Child onUpdated
Parent onUpdated
Child onUpdated
Child onUpdated
Parent onUpdated
Child onUpdated
Child onUpdated
Parent onUpdated

（3）

Parent onUpdated
Child onUpdated
Parent onUpdated
Child onUpdated
Parent onUpdated
Child onUpdated

（4）

Parent onUpdated
Child onUpdated
Child onUpdated
Parent onUpdated
Child onUpdated
Child onUpdated

отвечать

（1）

Объяснение

Существуют компоненты «родитель-потомок», и каждый перехватчик onUpdated выводит журнал. Давайте подробнее рассмотрим процесс обновления компонента при обновлении оценки.

Сначала поговорим об обновлении дочернего компонента.Оптимизация обновлений VueКомпонент не будет обновляться, если полученные реквизиты не изменятся. Два дочерних компонента рисуются, но реквизиты меняются. :label="score.toString()" Только для тех, кто. Поэтому при обновлении оценки сообщение «Child onUpdated» выводится только один раз.

Далее в обновленном хуке родительского и дочернего компонента: