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():

by definition, it is a function that returns the initial reactive state for the component instance.
Technically it is a data placeholder which keeps the state of data throughout the component/page life cycle. For backend programmer, it is like class variables which holds the data state for the class.
In above example here, I have five data members to capture the data state for my vue page and they are defined as:

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.
<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>
methods:{
mymethod1(payload: any){
//logic goes here
}

//syntax to define async methods
async mymethod2(payload: any){
//logic goes here
}
}
<button @click='mtdCalculateFullName()'>
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(' ')
}
}
}

--

--

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
Binod Mahto

Binod Mahto

141 Followers

Solution Architect & Full Stack Developer. Passionate about Software designing & development and Learning Technologies and Love to share what I learn.