vue中watch和data和computed计算属性的区别?

简单记录一下.
vuex中使用store和data和computed计算属性的先后对比
例子:计算结果的案例:
data:
初始组件的时候data拿到的是store的值是还没有输入过的原始值,
点击按钮的时候,取data中的值是原始值,不能自己更新。
computed:
换成计算属性时,是当值发生变化的时候,从新计算,不变化的时候拿到的是之前缓存的值。

两个数相加求和:
代码:(可以翻看上一个vuex详细了解的完整例子)

data:

//这里只记录小部分
data(){//只能获取到原始值
return{
ha:this.$store.state.s_a;
hb:this.$store.state.s_b;
 }
}

computed:

computed:{//计算属性,获取监听变化后的值
m(){//自定义一个方法,获取到输入后变化后的值
  return (this.$store.state.s_a-0)+(this.$store.s_b-0)
  //这里用减号(-0)是相加在一起,当不用减号时(两个数字会拼接在一起)
}

}

watch:也可以实现实时监听.
computed和watch区别?

Computed特点:
需要主动调用,具有缓存能力只有数据再次改变才会重新渲染,
否则就会直接拿取缓存中的数据。

Watch特点:
无论在哪只要被绑定数据发生变化Watch就会响应,
这个特点很适合在异步操作时用上。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值