Когда нужно использовать computed, а когда methods во Vue.js? И в чем их разница?

Читал в документации, но ничего не понял. Объясните, пожалуйста, простыми словами. Для каких целей используются каждый из вариантов?

Цитата из документации

Вместо computed property мы можем определить ту же функцию в виде метода. Результат будет одинаковый. Основное отличие в том, что computed property кэшируются на основании значений зависимостей. Computed property будет пересчитано только когда изменится его базовая зависимость. То есть, пока переменная message не менялась, множественные вызовы свойства reversedMessageбудут мгновенно возвращать предварительно полученный результат без очередного запуска функции.
  • Вопрос задан
  • 10347 просмотров
Решения вопроса 1
Decadal
@Decadal
Если результат вашей функции не опирается на внутренние данные, используйте methods.
Например, у вас есть внутри vue некая range, которая служит верхней границей для Math.random. Если реализовать при помощи метода, то каждый раз он будет возвращать новое значение Math.random.
Реализация через computed будет ожидать изменений вашего range, а иначе вернет то же число, которое сгенерилось первый раз
js:
var app = new Vue({
        el: '#content',
        data: {
            range: 1
        },
        computed: {
            rand: function () {
                return Math.random() * this.range ; //ожидалось что app.rand будет давать случайное число
            }
        },
        methods: {
            show: function (event) {
                alert('Случайное число: ' + this.rand); // но нет, число одно и то же
            },
       }
});

html:
<div id="content">
<button v-on:click="show">показать число</button>
</div>


В итоге оно сгенерирует число один раз и будет выводить его постоянно при клике на кнопку. Если вы введете в консоли app.range = 2; то генерируемое число разово изменится.

Пример для лайков, упомянутый в комментарии:
new Vue({
   el: '#content',
   data: {
      likes: 0,
   },
});

<div id="content"><button v-on:click="likes += 1">+1</button></div>
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@ewars Автор вопроса
Нашел хорошее объяснение, с примером:
ютюб
Ответ написан
@lega
Методы используются для изменения данных, при кликах и событиях.
computed для вывода данных в DOM, т.к. vue криво отслеживает изменения если выводить через методы.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
14 мая 2021, в 17:34
100000 руб./за проект
14 мая 2021, в 17:19
25000 руб./за проект
14 мая 2021, в 17:15
30000 руб./за проект