在methods中定义方法
我们可以在使用methods属性定义方法
<div id="root">
姓:<input type="text" v-model="firstName"> <br/><br/>
名:<input type="text" v-model="lastName"> <br/><br/>
<!-- 注意这里不要丢掉(),methods中定义的都是方法 -->
全名:<span>{{fullName()}}</span>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三'
},
methods: {
fullName(){
//fullName可以访问data中元素的值
return this.firstName + '-' + this.lastName
}
},
})
</script>
计算属性的使用
顾名思义,计算属性就是通过对属性的计算加工得来的属性,因此它的本质也是属性,接下来我们实现一下
<div id="root">
姓:<input type="text" v-model="firstName"> <br/><br/>
名:<input type="text" v-model="lastName"> <br/><br/>
<!-- 注意这里一定不要加(),计算属性也是属性 -->
全名:<span>{{fullName}}</span> <br/><br/>
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三',
},
computed:{
fullName(){
return this.firstName + '-' + this.lastName
}
}
})
</script>
监视属性的使用
<div id="root">
姓:<input type="text" v-model="firstName"> <br/><br/>
名:<input type="text" v-model="lastName"> <br/><br/>
全名:<span>{{fullName}}</span> <br/><br/>
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三',
fullName:'张-三'
},
watch:{
firstName(val){
this.fullName = val + '-' + this.lastName
},
lastName(val){
this.fullName = this.firstName + '-' + val
}
}
})
</script>
既然以上三种方法都能实现功能,那么他们之间有什么区别呢?
首先,methods中定义的都是方法,每次vue解析模板时它都会被调用,而computed是根据属性的变化而调用的,只有其内部属性发生改变时才会调用,但是computed却有局限,不能实现异步操作,比如我们希望修改的数据延迟1s再更新到页面
<div id="root">
姓:<input type="text" v-model="firstName"> <br/><br/>
名:<input type="text" v-model="lastName"> <br/><br/>
全名:<span>{{fullName}}</span> <br/><br/>
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三',
fullName:'张-三'
},
watch:{
firstName(val){
setTimeout(()=>{
this.fullName = val + '-' + this.lastName
},1000);
},
lastName(val){
this.fullName = this.firstName + '-' + val
}
}
})
</script>
这里如果使用计算属性的话
<div id="root">
姓:<input type="text" v-model="firstName"> <br/><br/>
名:<input type="text" v-model="lastName"> <br/><br/>
全名:<span>{{fullName}}</span> <br/><br/>
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三',
fullName:'张-三'
},
computed:{
fullName(){
setTimeout(()=>{
return this.firstName + '-' + this.lastName
},1000)
}
}
})
</script>
我们发现,fullName的返回值被箭头函数所征用了,而计算属性恰恰就是靠return来返回数据的,这样写fullName无疑是废了。
总结
methods与computed的区别在于computed的效率会更高,
computed和watch之间的区别:
1.computed能完成的功能,watch都可以完成。
2.watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作。