vue data、watch 等多次执行

最新推荐文章于 2024-04-30 10:47:34 发布
最新推荐文章于 2024-04-30 10:47:34 发布
阅读量1.3k 收藏
点赞数
分类专栏： 如此迷惑行为
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44989936/article/details/119645643
版权

原因使用了keepalive ，其缓存内部所有组件，如果多个相同组件，那么均会被缓存，watch 监听$route 那么都会执行
参考：脚本之家

data执行了两次 ，这个就很莫名奇妙， 由于懒得代码重现， 可能原因，是可能，因为当时确实有效，仅供参考

route-view 中的 key，去掉key就有用了，

兔子也发飙
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3中监听路由，被重复执行问题
wangyuiba1314的博客
05-11 3132
vue3中监听路由，被重复执行问题 项目场景：监听route变化，当已经离开了页面，watch却还在被触发 问题描述 本来我是在Layout文件中监听了路由 但是我发现我前往非Layout下的路由,比如404页面，watch依旧被触发，并且从404页面返回时，watch会一直执行两次，除非刷新 Layout/index.vue watch(() => route, (val) => { // ... }, { immediate: true, deep: true
vue监听路由变化时watch方法会执行多次的原因及解决
qq_43086723的博客
09-25 3899
vue监听路由变化时watch方法会执行多次的原因及解决
【vue3】入门系列—vue3父组件传值给子组件
最新发布
An滴饭儿的博客
04-30 397
vue3父组件传值给子组件
Vue3 中 使用watch 监听路由中的值 会执行多次
qq_38758763的博客
06-24 3433
Vue3 中 使用watch 监听路由中的值 会执行多次
vue中使用watch监听路由导致多次请求问题解决方法
小白的博客
07-07 3402
首先想到的做法就是：直接监听，例： 但是这种方法在页面被缓存的情况下，成倍的调用watch里面的方法，多次向后端请求数据，可能会导致溢出有了第一种错误的出现，会想着是否可以将路径存在vuex中统一管理，例：vuex代码 监听路由，将最后路由的结果存进vuex，再使用computed获取这个值：changeRoute，最后再次监听：changeRoute， 结果并没有什么用直接使用watch监听地址栏，和上面的方法相同，依旧是computed获取，watch监听，就不会出现多次请求的情况了
vue用watch监听对象之后，调用方法执行多次的问题
weixin_52936828的博客
08-09 3430
问题描述：用watch监听的过程中发现，如果监听的是一个对象或者一个数组，会导致多次调用watch里面的方法，如下接口调用了两次，浪费资源。以上方法可以解决watch监听导致多次调用的问题。大家如果有好的方法也可以留言，互相学习，嘻嘻☺。
router跳转两次
xiaojinglyd的博客
03-10 4078
环境： vue cli3项目 问题： 路由的参数没有，导致页面报错，实际是路由跳转两次，第一次有参数，第二次没有 分析： 既然跳转了两次首先应该想发起路由跳转的事件里面是否出现重复的this.$router.push，查看一番并没有，于是想到全局的路由守卫中或许出现重复跳转，结果发现还是没有，结果只能打断点调试查看，发现路由跳转的事件没有执行两次，但是路由守卫执行了两次，这说明肯定有地方多调用...
vue 中使用 watch 出现了如下的报错的原因分析
10-16
正确的做法是将`watch`作为一个独立的对象，与`data`、`methods`等平级地放在组件选项中。以下是一个修正后的示例： ```javascript export default { data() { return { flag: true, // 其他数据属性... }; }...
vue首次赋值不触发watch的解决方法
12-01
在Vue.js中，`watch` 是一种非常重要的特性，它允许我们监听数据的变化并在变化发生时执行相应的处理函数。然而，有时候我们可能会遇到一个情况，那就是当我们初次赋值给一个被监视的数据时，对应的`watch`处理器并...
vue 点击加载更多vue 点击加载更多
04-26
"点击加载更多"是网页中常见的功能，尤其在显示大量数据如小说列表、文章列表或评论区时，为了优化用户体验，通常不会一次性加载所有内容，而是分页或者按需加载。本篇文章将深入探讨如何在Vue.js项目中实现“点击...
解决vue watch数据的方法被调用了两次的问题
01-21
背景： 路由结构/video/1.mp4,即/video是父路由，/1.mp4是/video的动态子路由，在/video父路由中会通过url的params获取视频信息,即通过/1.mp4获取对应的视频完整信息，然后通过props传到动态子路由中，然后子路由通过接受到的视频对象，进行展示 问题： 当路由切换时，即当我点击其他视频时，导致动态子路由变化时，我监听了/video父路由的变化并重新根据url的params获取视频对象，并自动通过props传入子路由中，我在子路由中通过watch 视频对象来进行一些操作，结果 watch: { video () { console.log(tes
Vue.js中关于侦听器（watch）的高级用法示例
10-18
Vue.js中的侦听器（watch）是一个强大的特性，它允许开发者在数据变化时执行自定义逻辑，特别是处理异步操作或者复杂的数据依赖。在本文中，我们将深入探讨Vue.js中watch的高级用法，以及如何有效地利用它们来优化你...
vue中各选项及钩子函数执行顺序详解
12-11
Vue实例的生命周期中包含了多个选项和钩子函数，这些在不同的阶段自动执行，帮助开发者管理组件的状态和行为。以下是Vue中各选项及钩子函数的详细解释和执行顺序： 1. **beforeCreate**：在实例化过程完成，但数据...
vue 打开页面自动获取数据_前端面试准备笔记系列之vue(02)
weixin_39907591的博客
12-20 562
目录01. vue中 key 值的作用？02. v-if 和 v-show 区别03. v-if 和 v-for是否可以一起使用？04. vue常用的修饰符？05. vue的computed methods watch06. watch监听引用类型，能否拿到oldVal？07. watch深度监听引用类型。08. computed计算属性优点正文01. vue中 key 值的作用？key的作用主要...
vue开启watch无限循环_好程序员web前端教程分享之vue常见问题答疑
weixin_39637545的博客
11-20 651
　　好程序员web前端教程分享之vue常见问题答疑，vue是一套用于构建用户界面的渐进式JavaScript框架，也是初创项目的首选前端框架。很多企业在招聘前端工程师时都会考察其对vue的了解，接下来好程序员Web前端培训小编就给大家分享常见的vue面试题答疑。1、如何watch监听一个对象内部的变化？如果只是监听obj内的某一个属性变化，可以直接obj.key进行监听。watch: { 'obj...
watch监听中重复触发如何解决？
m0_65069237的博客
11-29 1745
在实际开发工程中通过获取后端数据监听判断数组中长度是否大于0从而调用其他的方法，但是如果data域中的数据出现变化的话。
VUE3 中的 Watch
热门推荐
weixin_64222137的博客
03-31 3万+
当加上了第三个参数 { deep: true }，那么就不仅仅是监听对象的子属性了，它还会监听 孙属性，曾孙属性 ...如上代码，监听 demo 对象的 name 属性，那么只有当 demo 对象的 name 属性发生变更时，才会触发 watch 方法，其他属性变更不会触发 watch 方法。举个例子，比如我想同时监听 demo 对象的 name 属性，和基础类型 nums，只要他们其中任何一个发生变更，那么就触发 watch 方法。，且第二参数箭头函数的参数也是数组的形式。4. 监听对象的所有属性。
vue watch重复触发
phhz的博客
02-28 1452
可以看看，对被监控的变量是不是用了map()等返回的是新地址的方法 返回的是新地址的话虽然看上去没有变化，实际上地址改变了，如： y.data=y.data.map(function (item, index) { return item.value; }) ...
vue watch 执行多次
11-24
在Vue中，watch是用来监听数据变化并执行相应操作的。当数据发生变化时，watch会被触发执行。但是有时候我们会发现watch会执行多次，这是因为Vue在执行watch时会对数据进行深度遍历，如果数据是一个对象或数组，那么当对象或数组中的某个属性发生变化时，watch会被触发执行。因此，如果我们监听的是一个对象或数组，就会导致watch执行多次。 解决这个问题的方法有两种： 方法一：使用immediate选项。immediate选项可以让watch在初始化时立即执行一次，而不是等到数据发生变化才执行。这样可以避免watch在初始化时执行多次。 ```javascript watch: { countHeight: { immediate: true, handler: function (data) { if (data) { this.函数名() } } } } ``` 方法二：使用lock变量。lock变量可以记录watch被执行的次数，当lock变量的值大于等于2时，才执行相应操作。这样可以避免watch在数据变化时执行多次。 ```javascript watch: { countHeight: function (data) { if (data) { this.lock+= 1 if (this.lock>= 2) { this.函数名() } } } } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值