vue使用watch监听数据变化来发请求,vue什么时候监听watch
本文主要介绍了vue监控路由变化时会多次执行watch方法的原因和解决方法，帮助大家更好的理解和学习使用vue框架。感兴趣的朋友可以了解一下。
目录
要求描述：
需求分析：
解决需求
问题解决
我是前端的菜鸟，一直致力于后台不间断的生产和管理bug，也一直鼓励自己。最近几天接到一个需求，网上搜了很多例子，但是没有从根本上解决。在这里，我将记录下自己的求解过程。这也是我第一次在掘金发声，求轻虐。
需求描述：
有a和b两个页面，a页面的orderId需要通过路由传输到b页面，然后显示在b页面进行数据关联查询。
需求解析：
如果是你，你得到了这个需求，应该很容易想到在B页观看路由变化，然后获取参数执行查询数据的方式。
解决需求
第一页：
恒定路线={
名称： BpageName ，
params:{ orderId:this . table data[index]。id }，
元：{
标题：“第二页”
}
}
这个。$router.push(路由)
推送一条路线重新打开b页。
然后，接受页面B中的路由参数：
@ Watch( $ route . params . package id )
routeparamschanged(new params:any，old params:any):void {//通过监听参数的变化再次复制参数。
if (newParams) {
this.getList(newParams)
}
}
看起来简单吗？
但问题来了，因为B页是keep-alive缓存的，第一次路由切换时只执行了一次routeParamsChanged方法，达到了预期的效果。但是，如果您关闭页面B或从页面A跳转到页面B而没有关闭页面B，routeParamsChanged方法将被触发两次或更多次。
查了很多资料，这里解释一下vue项目手表中功能的反复触发。
解决方案1:确定fullPath是否是页面。
如果(这个。$route.fullPath===一个页面路由路径){
//做点什么
}
我兴奋地试了一下。
@Watch($route )
routeparamschanged(new params:any，old params:any):void {//通过监听参数的变化再次复制参数。
if (newParams===/Apage) {
this.getList(newParams)
}
}
结果还是不行，routeParamsChanged方法还是会执行两次以上。解决方案2:添加一个flag参数来判断页面是否活动。使用keep-alive缓存的组件只会触发激活和停用的事件，所以只要在这两个事件被触发时将标志设置为true和false就可以了，只有当标志为true时才执行getList()。
private activated flag:boolean=false
已激活(){
this.activatedFlag=true
}
停用(){
this.activatedFlag=false
}
@Watch($route )
routeparamschanged(new params:any，old params:any):void {//通过监听参数的变化再次复制参数。
if(new params this . activated flag){
this.getList(newParams)
}
}
这次解决了吗？结果还是不行，routeParamsChanged方法还是会执行两次以上。倒塌..
问题解决
参考上面的解决方案2，最后可以获取实现的参数，调用activated()生命周期钩子函数中获取数据的方法。不用监控路线的变化，只要得到这个就可以得到数据。$route.params.orderId
private activated flag:boolean=false
已激活(){
this.activatedFlag=true
如果(这个。$ route . params . orderid this . activated flag){
this.getList(this。$route.params.orderId)
}
}
停用(){
this.activatedFlag=false
}
做完了，终于解决了。我们正在寻找一个轻代码，并有更好的意见或建议。请评论留言指导。
以上是vue监控路线变化时会多次执行watch方法的原因及解决方法的详细说明。更多关于vue手表法的原因和解决方法，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。