watch和computed都是监听数据,都是当依赖的数据发生改变时,被依赖的数据就自动发生改变。
他们之间的区别就是:
1.computed是监听多个数据改变一个数据,一般用于计算一些比较复杂的场景,比如购物车计算价格,就是多对一
watch是监听一个数据从而改变多个数据,通过观察一个数据的变化去改变其他数据,比如搜索框提示列表,就是一对多
2.computed用于计算,watch用于观察
3.computed一定要有return
4.computed具有缓存性,当依赖的数据没有发生变化,就会从缓存中取出数据,所以computed的性能比watch要好一点
5.计算属性不能在data中声明
6.watch中可以进行异步或者开销较大的操作
下面举一个非常简单的例子来说明他们的基本使用方法
computed:
name是由 firstName+secondName 计算出来的
当我改变firstName时,name会自动计算出新的值
改变secondName时,同理,name会自动计算
代码如下:
<template>
<div>
<div>
<p>我的名字叫<b>{{name}}</b></p>
<div class="btn" @click="changeFirstName">改firstName(张->王)</div>
<div class="btn" @click="changeSecondName">改SecondName(三四->五六)</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
firstName: "张 ",
secondName: "三四"
};
},
computed: {
name() {
return this.firstName + this.secondName;
}
},
methods: {
changeFirstName() {
this.firstName = '王 ' //通过改变firstName改变name
},
changeSecondName(){
this.secondName = '五六' //通过改变secondName改变name
}
}
};
</script>
watch:
当输入值ipt发生变化时,会通过监听这个数据,来改变其他的各个数据
<template>
<div>
<div>
<input type="text" v-model="ipt">
<p>姓名<b>{{name}}</b></p>
<p>性别<b>{{gender}}</b></p>
<p>年龄<b>{{age}}</b></p>
<p>身高<b>{{height}}</b></p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
name:'小明',
gender:'男',
age:'26',
height:'180',
ipt:'小明'
};
},
watch:{
// 通过输入框文字的变化,来改变下面的数据
ipt(val){
if(val == '小红'){
this.name = '小红'
this.gender = '女'
this.age = 18
this.height = 160
}else{
this.name = '无'
this.gender = '无'
this.age = '无'
this.height = '无'
}
}
},
methods: {
}
};
</script>