Вычисляемое значение или функция?

В уроке «Условия и списки» функция, которую вызывал шаблон, делала то же, что shownMenu в предыдущем упражнении. Оба показывают один и тот же список, так зачем нужно вычисляемое значение? Есть две причины.

Первая — так проще читать. v-for="item in shownMenu" прямо говорит, что это за список: значение, как любое другое, которое используют без () — в шаблоне и в других вычисляемых значениях.

Вторая причина заметна хуже. Vue заново отрисовывает шаблон компонента всякий раз, когда меняются любые данные, которые этот шаблон показывает, и при каждой отрисовке снова вызывает все функции в шаблоне, даже те, которые не связаны с изменением. Вычисляемое значение, напротив, Vue запоминает и вычисляет заново, только когда меняется то, что оно использует. Разницу видно, если поставить в функцию console.log():

function sortedMenu() {
    console.log("Сортировка меню");
    return [...menu].sort((a, b) => a.price - b.price);
}

Рядом с меню приложение из этого упражнения здоровается с клиентом по имени. Введите имя в поле: каждая буква меняет name, из-за приветствия Vue отрисовывает шаблон заново, и в консоли снова появляется Сортировка меню, хотя меню совсем не изменилось. С шестью позициями это не важно, но с тысячей позиций или с долгой работой страница начала бы тормозить, пока вы печатаете.

Как и в уроке «Условия и списки», функция сортирует копию, [...menu], потому что sort() не создаёт новый массив, а переставляет элементы того, который сортирует. Без копии menu.sort() переставил бы само меню, а вместе с ним и всё остальное, что его показывает.

Поэтому, когда шаблону нужно значение, вычисленное из данных, делайте его вычисляемым значением, а функции оставляйте для действий, например для обработчиков.