Khandaker Toihidul Islam
Software Engineer
Backend : PHP | Mysql | Symfony | CakePhp | Wordpress | Drupal
Frontend : Node js | Vue js | React Js | Javascript | HTML | CSS | Bootstrap
Tools , Server : Nginx | Apache | Git | Jenkins | Jira | Asana | Silenium | Spira

Vue – reacting to changes with computed properties

	<div id="app">
		<button v-on:click="count++"> Increment</button>
		<button v-on:click="count--"> Decrement</button>
		<p> Count: {{ count }}</p>
		<button v-on:click="count2++"> Increment Count 2</button>
		<p> Count2: {{ count2 }}</p>
		<p class="color-red"> Odd / even for count :   {{ output }} - {{ result() }} </p>		


	</div>
<script type="text/javascript">
	new Vue({
		el: "#app",
		data:{
			count : 0,
			count2 : 0
		},
		computed:{
			output: function(){
				console.log('computed');
				return this.count % 2 == 0 ? 'Even' : 'Odd' ; 
			}
		},
		methods:{
			result: function(){
				console.log('methods');
				return this.count % 2 == 0 ? 'Even' : 'Odd' ; 
			}
		}		

	});
</script>

Demo http://vue.toihid.com/section-2/reacting_with_computed_properties.php

According to the above code, if we do inspect in a browser then we can see

  1.  click  Increment button :  executes    computed and method
  2. click  Decrement button :  executes   computed and method
  3. click  Increment count 2 button :       executes    only method not the computed properties. Because the output computed.property is related to count property not the count2
  4. Note:  result methods executes every time whereas, computed properties only executes for related changes of own property.
  5. So computed property is more efficient for performance and space.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *