vue中监视多个属性,执行同一个方法,初次加载只执行一次

本文介绍了如何在Vue中通过计算属性和watch的组合使用来优化表单数据初始化时的多次请求。当表单多项内容改变时,通常会触发接口请求。然而,在页面加载时,由于数据反显,会导致初始化阶段请求被多次触发。为解决这个问题,可以将表单中多个需要监视的属性整合到一个计算属性中,然后在watch中监听这个计算属性,确保只在数据首次变化时执行请求,避免了重复执行。
摘要由CSDN通过智能技术生成

Vue中监视多个属性,执行同一个方法,初次加载只执行一次,防止重复执行

需求:
当form表单的多项内容每一项改变后,都会去请求接口返回实时的数据。

原解决方法:
在watch中分别监视改变的数据,当数据改变时就触发请求的方法。如:
在这里插入图片描述
问题:
这样做其实需求功能可以正常实现,但是因为表单中的数据在初始化的时候会反显,所以此时监视到数据变化就会多次触发同一个方法。其实初始化只需要执行一次就可以。

优化方法:
首先将表单中多个需要监视的属性放到计算属性中如:
在这里插入图片描述
然后去监视这个添加的计算属性,触发后执行请求的方法,watch中就变成了如下:
在这里插入图片描述
这样计算属性和侦听属性的组合使用就优化了我们初始化加载页面时多次请求的问题。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值