特点和区别
vue的computed选项主要用于同步对数据的处理,而watch选项主要用于事件的派发,可异步
这两者都能达到同样的效果,但是基于它们各自的特点,使用场景会有一些区分
computed拥有缓存属性,只有当依赖的数据发生变化时,关联的数据才会变化,适用于计算或者格式化数据的场景
watch监听数据,有关联但没有依赖,只要某个数据发生变化。就可以处理一些数据或者派发事件并同步/异步执行
计算属性
计算属性表现为同步处理数据
金融领域的分期付款,P2P年化收益,带有计算性质的,都可以优先考虑computed
不需要关注点击事件或者其他数据,只要将计算规则写在属性里,就能实时获取对应的数据
例如:
借款金额 6000//输入
分期期数 3期//输入
每期应还 2000.00元//自动计算
电商领域的购物车统计,一个数据依赖于一个或多个数据
- 当购物车数量和产品变化时,自动计算出价格*数量的总和
- 如果有优惠券或者折扣,自动减去优惠和计算折扣金额即可,同上实时计算
- 只要购买数量,购买价格,优惠券,折扣券等任意一个发生变化,总价都会自动跟踪变化
侦听器
- 主要适用于与事件和交互有关的场景,数据变化为条件,适用于一个数据同时触发多个事件
- 如当借款额度大于可借额度时,弹出toast提示,并将当前借款额度调整到最大额度
- 可以看到,数据的变化为触发弹窗提示,有且仅在一定金额条件下才触发,而不是实时触发
watch的例子
export default{
name:'test',
data:{
Amount:100
},
watch:{
Amount:function(newVal,oldVal){
if(newVal>5000){
alert('最大额度可借5000元')
//此时还可以把提交按钮置灰
this.Amount=5000
}
}
}
}
侦听器的应用
<body>
<div id="app">
<p>
你问的问题是:
<input type="text" v-model="question">
</p>
<p>{{answer}}</p>
</div>
//引入AJAX库等等,这儿不再写
<script>
var vm = new Vue({
el:'#app',
data:{
question:'',
answer:'在你没有提出问题之前,我是无法给你回复的'
},
methods:{
getAnswer:function(){
if(this.question.indexOf('?')===-1){
this.answer='问题没有问号怎么问别人呢'
return
}
this.answer='我正在思考中,请稍后...'
var that=this
axios.get('https://yesno.wtf/api').then(function(res){
that.answer=_.capitalize(res.response.data.answer)
})
}
}
watch:{
question:function(){
//防抖处理
//_.debounce就是防抖的封装
this.answer='等待你停止输入'
this.debounceGetAnswer()
}
},
created:function(){
this.debounceGetAnswer=_.debounce(this.getAnswer,500)
}
})
</script>
</body>