data vs props and methods vs computed in Vue.js

<script>
export default {
data() {
return {
firstName: 'Binod',
lastName: 'Mahto',
fullName:'',
methodcount:0,
computedcount:0
}
},

methods : {
mtdCalculateFullName() {
this.$data.methodcount++;
this.$data.fullName = this.$data.firstName + ' ' + this.$data.lastName;
}
},

computed : {
cmptCalculateFullName() {
this.$data.computedcount++;
this.$data.fullName = this.$data.firstName + ' ' + this.$data.lastName;
}
}

}
</script>
<template>
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
<div>
<button @click='mtdCalculateFullName()'>
Click Me
</button>
<p>Full Name:</p><p>{{fullName}}</p>
<p>count: {{methodcount}}</p>
</div>
<div>
<button @click='cmptCalculateFullName'>
Click Me
</button>
<p>Full Name:</p><p>{{fullName}}</p>
<p>count: {{computedcount}}</p>
</div>
</template>
data() {
return {
firstName: 'Binod',
lastName: 'Mahto',
fullName:'',
methodcount:0,
computedcount:0
}
}
this.$data.{datamembername} 
//not necessary to use $data instead you do this.{datamembername} but i'm doing this for readability purpose.

Hence, as the name says data(), the purpose of it is to maintain the data for throughout the component life cycle.

<template>
<div>
<p>{{greetingMessage}}</p>
</div>
</template>
<script>
export default {
props: ['greetingMessage']
}
</script>
<script>

import MyComp from './MyComp.vue' //import it first
export default {
components: {
MyComp
//define the component
}
,
data() {
return {
message: 'Hi This is a message for props',
}
},


}
</script>
<template>
<MyComp greetingMessage ='Hi This is props'></MyComp>
<MyComp greeting-Message ='Hi This is props'></MyComp>
<MyComp :greeting-Message ='message'></MyComp>

</template>
<template>
<div>
<p>{{greetingMessage}}</p>
</div>
</template>
<script>
export default {
props: {
greetingMessage : String,
}

}
</script>

Hence, props are a way of one-way data binding technique to pass value from parent to child and not vice versa.

methods:{
mymethod1(payload: any){
//logic goes here
}

//syntax to define async methods
async mymethod2(payload: any){
//logic goes here
}
}

Hence, methods provides to define functions which perform certain action, logic etc. These functions you can call within a function or you can bind to action event also. i.e.

<button @click='mtdCalculateFullName()'>

Hence, computed allows you to create property or function which works with reactive dependencies of data member by caching the output until data changes.

export default {
data() {
return {
firstName: 'Binod',
lastName: 'Mahto'
}
},
computed: {
computedFullName: {
// getter
get() {
return this.$data.firstName + ' ' + this.$data.lastName
},

// setter
set(newValue) {
// Note: we are using destructuring assignment syntax here.
[this.$data.firstName, this.$data.lastName] = newValue.split(' ')

}
}
}
}
this.computedFullName = 'James Bond';//to set the new value
this.computedFullName; // to get the value.
//this is not allowed
computed:{
cmptCalculateFullName(payload : string)
{
}
}
computed: {
computedFullName: {
// setter
set(newValue) {
// Note: we are using destructuring assignment syntax here.
[this.$data.firstName, this.$data.lastName] = newValue.split(' ')
}
}
}

Hence saying that, computed doesn’t allow payload input parameter is partially true because though it is not possible through computed function but by computed member’s setter you can achieve the same.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store