Online Web Development Tutorials

Computed properties are typically dependent on other data properties. They behave exactly like the language standard get/set properties. Any change to the dependent properties will trigger the logic for the computed property.Computed properties are cached based on their dependencies so they'll only rerun if a dependency changes. (for ex; a computed property that returns a new Date() will never return because the logic will never run more than 1 time).

<!DOCTYPE html>
<html lang="en">
<head>
   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
	 <div>Here Random number Coming from Method: {{ getRandomNumberByMethod() }}</div>
	 <div>Here Random number Coming from Computed: {{ getRandomNumberByComputed }}</div>
	 <div>Here Random number Coming from Computed: {{ getRandomNumberByComputed }}</div>
	 <div>Here Random number Coming from Method: {{ getRandomNumberByMethod() }}</div>
	 <div>Here Random number Coming from Method: {{ getRandomNumberByMethod() }}</div>
	 <div>Here Random number Coming from Computed: {{ getRandomNumberByComputed }}</div>
    </div>
     <script>
     new Vue ({
        	el: '#app',
			data:{
			},
			methods: {
			  getRandomNumberByMethod:function() {
			      return Math.random();
			  },
			},computed: {
			  getRandomNumberByComputed:function() {
			      return Math.random();
			  },
			}
             })
   </script>
 </body>
</html>

Output

Here Random number Coming from Method: {{ getRandomNumberByMethod() }}

Here Random number Coming from Computed: {{ getRandomNumberByComputed }}

Here Random number Coming from Method: {{ getRandomNumberByMethod() }}

Here Random number Coming from Computed: {{ getRandomNumberByComputed }}

Above code, we've created a method getRandomNumberByMethod() and a computed property with a function getRandomNumberByComputed.Both are returning a random numbers using Math.random().

In above code, we'll see that random numbers returned from the computed property remains the same irrespective of the number of times it is called while getRandomNumberByMethod() returns a different value everytime it is called

VueJs Computed Properties