computed:
Is computed attribute, usage data and used as the assembly can be directly {{xxx}}
Use: any computing complex logic data
Similarly, there is a getter function, when calling a function of the value of the first call Getter
<body>
<div id="app">
<H3> This is the data attributes - {{message}} </ h3>
<H3> This attribute is computed in the computing - {{reversedMessage}} </ h3> // computed directly using the calculated attributes
</div>
<script>
new view ({
el:"#app",
data:{
message:"hello"
},
computed:{
reversedMessage: function () {// the attribute data is data calculated no data.
return the this .message.split ( "") Reverse () the Join.. ( "" ); // reversedMessage wherein the message is responsive dependent.
}
}
})
</script>
</body>
Comparative properties and methods of calculation methods;
And calculation method is basically the same properties, mainly calculated responsive property is dependent on the cache, only if the re-evaluation of the relevant changes in response to the time dependence of formula. I.e., cached data, when the formula is not dependent response does not change, nor need to be reevaluated reduces the computation.
watch：
Listener Properties
Use: When you need to perform asynchronous data changes during operation or large overhead, this approach is most useful .
<div id="app">
<input type="text" name="" v-model="firstname" id="">
<input type="text" name="" v-model="lastname" id="">
<h3>{{ fullname }}</h3>
</div>
<script>
new view ({
el:"#app",
data:{
firstname:"ddd",
lastname: 'IGC' .
fullname:""
},
watch: {
// only be modified when the firstname watch function will be called, and modify the specified data
// wherein firstname attribute data is data present
firstname: function (newValue, oldValue) {// can be used to record the path history
// wherein newValue data after revision, oldValue data value is modified before
the this .fullname = the this .lastName + "-" + newValue;
},
lastname:function(){
this.fullname = this.lastname+"-"+this.firstname
}
}
})
</script>