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

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

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

Вместо computed property мы можем определить ту же функцию в виде метода. Результат будет одинаковый. Основное отличие в том, что computed property кэшируются на основании значений зависимостей. Computed property будет пересчитано только когда изменится его базовая зависимость. То есть, пока переменная message не менялась, множественные вызовы свойства reversedMessageбудут мгновенно возвращать предварительно полученный результат без очередного запуска функции.
  • Вопрос задан
  • 13556 просмотров
Решения вопроса 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>
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
@ewars Автор вопроса
Нашел хорошее объяснение, с примером:
ютюб
Ответ написан
Комментировать
@lega
Методы используются для изменения данных, при кликах и событиях.
computed для вывода данных в DOM, т.к. vue криво отслеживает изменения если выводить через методы.
Ответ написан
@Yar-nikita
Computed это тоже самое что и methods
Разница лишь в том что в methods, методы нужно вызывать в ручную
А в computed методы сами выполняются, это происходит из-за изменений в переменных ( которые проинициализированных в data)
К примеру
new Vue({
   el: '#content',
   data: {
      counter: 0,
   },
   computed: {
   message(){  
        let res = '';
        if(this.counter === 5){
            res = 'Здесь число 5'
       }
        return res
    }
}
});

При изменение counter будет автоматически выполняться метод message

Те кто хорошо знает что message в computed используются как переменные, это я знаю привёл такой пример потому что так легче понять, а в практике проясниться что где и как.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы