1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue</title> 6 </head> 7 <body> 8 <div id="example"> 9 <p>Original message: "{{ message }}"</p> 10 <p>Computed reversed message: "{{ reversedMessage }}" </ p > 11 < p > Reversed message: "{{ reversedMessage2() }}" </ p > 12 </ div > 13 <!-- Development environment version, including Command line warning with help --> 14 < script src ="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></ script > 15 < script type ="text/javascript " > 16 var vm = new Vue({ 17 el: '#example ' , 18 data: { 19 message: ' Hello ' 20 }, 21 computed: { 22 // The getter of the computed property has a cache 23 reversedMessage: function () { 24 // `this` points to the vm instance 25 return this .message.split( '' ).reverse().join( '' ) 26 } 27 }, 28 // In the component, the method is not cached 29 methods: { 30 reversedMessage2: function () { 31 return this.message.split('').reverse().join('') 32 } 33 } 34 }) 35 </script> 36 </body> 37 </html>
We could define the same function as a method instead of a computed property. The end result of both ways is indeed exactly the same. The difference, however, is that computed properties are cached based on their dependencies.
If you don't want caching, use methods instead.