vue的computed选项主要用于同步对数据的处理,而watch选项主要用于事件的派发,可异步.
这两者都能达到同样的效果,但是基于它们各自的特点,使用场景会有一些区分.
computed拥有缓存属性,只有当依赖的数据发生变化时,关联的数据才会变化,适用于计算或者格式化数据的场景.
watch监听数据,有关联但是没有依赖,只要某个数据发生变化,就可以处理一些数据或者派发事件并同步/异步执行.
计算属性
计算属性表现为同步处理数据.
金融领域的分期付款,P2P年化收益,带有计算性质的,都可以优先考虑computed,不需要关注点击事件或者其他数据,只要将计算规则写在属性里,就能实时获取对应的数据.
电商领域的购物车统计,一个数据依赖于一个或者多个数据,当购物车数量和产品变化时,自动计算出价格*数量的总和,如果有优惠券或者折扣,自动减去优惠和计算折扣金额即可,同上实时计算,只要购买数量,购买价格,优惠券,折扣券等任意一个发生变化,总价都会自动跟踪变化.
侦听器
主要适用于与事件和交互有关的场景,数据变化为条件,适用于一个数据同时触发多个事物.
如当借款额度大于可借额度时,弹出toast提示,并将当前借款额度调整到最大额度,可以看到,数据的变化为触发弹框提示,有且仅在一定金额条件下才触发,而不是实时触发.
实例
computer
一个姓输入框,一个名输入框,实时展示全名.
<div id="name"> {{fullName}} </div>
<script>
export default {
name: 'test',
data() {
return {
firstName: 'da',
lastName: 'shixiong',
};
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
full:{
get(){
return this.firstName + '-' + this.lateName
},
set(value){
const nameArr = value.split('-')
this.firstName = nameArr[0]
this.lateName = nameArr[1]
}
}
}
}
</script>
watch
一个金额输入框,监听金额数值大小,达到条件时给出温馨提示
<div id="Amount">
<input v-model="Amount" />
</div>
<script>
export default {
name: 'test',
data() {
return {
Amount: 100,
num: 20,
obj:{
a:1
},
}
},
watch: {
Amount: function (newVal,oldVal) {
if(newVal>5000) {
alert("最大额度可借5000元")
this.Amount=5000
}
},
num: {
handler(newval,oldval){
console.log(newval,oldval)
},
immediate: true //页面首次加载会立即执行
},
obj:{
handler(newName,oldName){
//执行代码
},
deep:true //为true,表示深度监听,这时候就能监测到a值变化
},
//优化deep
'obj.a':{
handler(newName,oldName){
//执行代码
},
deep:true //为true,表示深度监听,这时候就能监测到a值变化
}
}
}
</script>