methods,watch,computed之间的区别
computed:
是计算属性，使用方式和组件中的data的使用方式一样，可以直接{{ xxx }}
使用范围：任何计算复杂的逻辑数据
类似于，有一个getter函数，当调用某个值的时候先调用Getter函数
<body>
<div id="app">
<h3>这是data中的属性--{{message}}</h3>
<h3>这是computed中的计算属性-{{reversedMessage }}</h3> //直接使用computed中的计算属性
</div>
<script>
new Vue({
el:"#app",
data:{
message:"hello"
},
computed:{
reversedMessage :function(){ //该计算属性数据是data中没有的数据。
return this.message.split("").reverse().join(""); //其中message是 reversedMessage的响应式依赖。
}
}
})
</script>
</body>
计算属性和methods方法的比较;
计算属性和method方法基本相同，主要是计算属性是基于响应式依赖进行缓存的，只有在相关的响应式依赖发生改变的时候才会重新求值。即存在缓存数据，当不响应式依赖不改变的时候，也不需要重新求值减少了计算量。
watch：
侦听属性
使用范围：当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
<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 Vue({
el:"#app",
data:{
firstname:"ddd",
lastname:'kkk',
fullname:""
},
watch:{
// 只有在firstname被修改的时候才会调用watch函数，并修改指定的数据
//其中firstname是 data属性中存在的数据
firstname:function(newValue,oldValue){ //可以用来记录路径历史
//其中newValue 是修改之后的数据， oldValue是修改之前的数据值
this.fullname = this.lastname+"-"+newValue;
},
lastname:function(){
this.fullname = this.lastname+"-"+this.firstname
}
}
})
</script>
