Вычисленные значения и методы сильно отличаются в Vue и в большинстве случаев однозначно не являются взаимозаменяемыми.
Компьютерная собственность
Более подходящим именем для вычисляемого значения является вычисляемое свойство . Фактически, когда создается экземпляр Vue, вычисленные свойства преобразуются в свойство Vue с помощью метода получения, а иногда и установки. По сути, вы можете рассматривать вычисленное значение как производное значение, которое будет автоматически обновляться всякий раз, когда обновляется одно из базовых значений, используемых для его вычисления. Вы не вызываете вычисленное, и оно не принимает никаких параметров. Вы ссылаетесь на вычисленное свойство так же, как на свойство данных. Вот классический пример из документации :
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
Который упоминается в DOM, как это:
<p>Computed reversed message: "{{ reversedMessage }}"</p>
Вычисленные значения очень важны для манипулирования данными, которые существуют в вашем Vue. Всякий раз, когда вы хотите отфильтровать или преобразовать ваши данные, обычно вы будете использовать вычисленное значение для этой цели.
data:{
names: ["Bob", "Billy", "Mary", "Jane"]
},
computed:{
startsWithB(){
return this.names.filter(n => n.startsWith("B"))
}
}
<p v-for="name in startsWithB">{{name}}</p>
Вычисленные значения также кэшируются, чтобы избежать повторного вычисления значения, которое не нужно пересчитывать, если оно не изменилось (например, оно может не находиться в цикле).
метод
Метод - это просто функция, связанная с экземпляром Vue. Он будет оцениваться только при явном вызове. Как и все функции JavaScript, он принимает параметры и будет переоцениваться при каждом вызове. Методы полезны в тех же ситуациях, что и любая функция полезна.
data:{
names: ["Bob", "Billy", "Mary", "Jane"]
},
computed:{
startsWithB(){
return this.startsWithChar("B")
},
startsWithM(){
return this.startsWithChar("M")
}
},
methods:{
startsWithChar(whichChar){
return this.names.filter(n => n.startsWith(whichCharacter))
}
}
Документация Vue действительно хороша и легко доступна. Я рекомендую это.
