YouTip

# Vue.js Computed Properties Computed property keyword: computed. Computed properties are very useful when dealing with complex logic. Let's look at the following example of reversing a string: ## Example 1 [Try it Yourself »](#) In Example 1, the template becomes complex and difficult to understand. Next, let's look at an example using computed properties: ## Example 2 var vm = new Vue({ el: '#app', data: { message: 'Tutorial!' }, computed: { // getter of the computed property reversedMessage: function () { // `this` points to the vm instance return this.message.split('').reverse().join('') } } }) [Try it Yourself »](#) In Example 2, a computed property reversedMessage is declared. The provided function will be used as the getter for the property vm.reversedMessage. vm.reversedMessage depends on vm.message, so when vm.message changes, vm.reversedMessage will also be updated. * * * ## computed vs methods We can use methods to replace computed, and both will produce the same result. However, computed is based on its dependency cache and will only re-evaluate when its dependencies change. Whereas with methods, the function will be re-executed every time during re-rendering. ## Example 3 methods: {reversedMessage2: function(){return this.message.split('').reverse().join('')}} [Try it Yourself »](#) It can be said that using computed has better performance, but if you don't want caching, you can use the methods property instead. * * * ## computed setter Computed properties have a getter by default, but you can also provide a setter when needed: ## Example 4 var vm = new Vue({el: '#app', data: {name: 'Google',