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

Question

[Ewars]

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

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

Вместо computed property мы можем определить ту же функцию в виде метода. Результат будет одинаковый. Основное отличие в том, что computed property кэшируются на основании значений зависимостей. Computed property будет пересчитано только когда изменится его базовая зависимость. То есть, пока переменная message не менялась, множественные вызовы свойства reversedMessageбудут мгновенно возвращать предварительно полученный результат без очередного запуска функции.

Comments

[Александр Калинин]

Какие-то странные ответы. Все гораздо проще.
Методы (methods) это просто ваши методы
А computed - это результат некой функции, которая будет вызываться всегда когда будет обновляться переменная (ные) которая внутри неё.
Например у вас в data если есть 2 переменные x и y
Пишем computed z() внутри которого вычисление return this.x + this.y
изменяя x или y вы можете использовать переменную this.z (результат работы computed), которая будет автоматом меняться всегда

Answer 1

[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>

Comments

[Ewars]

Спасибо, более менее понял. Методы использовать для функций, которые не зависят от данных, а computed наоборот.
То есть, если мне по клику нужно вывести модалку, то это метод, а если поставить лайк (со счетчиком), то computed?

[Decadal]

Андрей Климаш я сейчас дополню ответ примером) если поставить лайк, то есть смысл использовать кое-что попроще: +1
а объект будет выглядеть так:
new Vue({
el: '#demo',
data: {
likes: 0,
},
});
и при нажатии на кнопку likes будет увеличиваться)
Computed стоит использовать как поле для сложного "украшения" данных.
Например, у вас есть радиус круга, но вам нужна его площадь. Площадь и будет таким вот вычисляемым значением - s : function() { Math.PI * this.radius * this.radius; }

[Decadal]

вырезало html. В общем, следите за обновлением ответа)

[Ewars]

Вот сейчас я запутался) Для сложных математических вычислений использовать computed. Но почему не метод?

[Decadal]

Андрей Климаш да можно и метод) Вычисляемое значение - просто особенный вид методов.

[Decadal]

Андрей Климаш если для получения значения нужно перебрать много массивов, сделать много расчётов, то computed вычислит результат один раз и будет его хранить, а method будет выполняться каждый раз, когда его вызывают.

[Ewars]

Вроде бы понял теперь. Спасибо большое вам! Можно в будущем к вам обращаться?

[Decadal]

Андрей Климаш да, обращайтесь, не знаю, правда, как) почту дать?

[Ewars]

Decadal: да, давайте! или напишите на мой ящик, указан в контактах

Answer 2

[Ewars]

Нашел хорошее объяснение, с примером:
ютюб

Answer 3

[lega]

Методы используются для изменения данных, при кликах и событиях.
computed для вывода данных в DOM, т.к. vue криво отслеживает изменения если выводить через методы.

Comments

[Ewars]

То есть, если мне по клику нужно вывести модалку, то это метод, а если поставить лайк (со счетчиком), то computed?

[lega]

Андрей Климаш:
> если мне по клику нужно вывести модалку, то это метод,
да, клик - меняем данные

> а если поставить лайк (со счетчиком), то computed?
нет, ставим лайк - т.е. меняем данные - метод - @click="method"

а вот вывод кол-ва лайков - либо computed либо переменную - {{likeValue}}

по простому:
@click - тут использовать только методы
{{variable/computed}} - в скобках использовать перемененные либо computed

[Ewars]

lega: вроде бы понял. методы для изменения данных, а вычисляемые свойства, собственно, для вычисления и последующего хранения данных?

[Александр Веселов]

Андрей, Думаю computed это операции над данными которые будут изменяться действиями пользователя
Methods - зависит от действий пользователя, Computed - от данных которые изменил Methods

Answer 4

[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 используются как переменные, это я знаю привёл такой пример потому что так легче понять, а в практике проясниться что где и как.