vue2.x，watch监听的一个变量在一个function中被连续多次赋值,watch会触发几次？vue源码

已于 2023-01-29 09:47:33 修改
阅读量1.4k 收藏 1
点赞数
分类专栏： vue vue源码 文章标签： vue.js 前端 javascript
于 2021-03-15 16:59:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HeMister/article/details/114839810
版权
微笑边缘的金元宝
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决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用watch监听对象之后，调用方法执行多次的问题
weixin_52936828的博客
08-09 3313
问题描述：用watch监听的过程中发现，如果监听的是一个对象或者一个数组，会导致多次调用watch里面的方法，如下接口调用了两次，浪费资源。以上方法可以解决watch监听导致多次调用的问题。大家如果有好的方法也可以留言，互相学习，嘻嘻☺。
vue监听路由变化时watch方法会执行多次的原因及解决
qq_43086723的博客
09-25 3707
vue监听路由变化时watch方法会执行多次的原因及解决
vue watch重复触发
phhz的博客
02-28 1442
可以看看，对被监控的变量是不是用了map()等返回的是新地址的方法 返回的是新地址的话虽然看上去没有变化，实际上地址改变了，如： y.data=y.data.map(function (item, index) { return item.value; }) ...
vue中使用watch监听路由导致多次请求问题解决方法
weixin_45357661的博客
10-26 8166
vue中使用watch监听路由导致多次请求问题解决方法
在vue中多次调用同一个定义全局变量的实例
01-19
在Vue开发中，有很多场景会用到多次重复的API请求。 例如： '//192.168.1.117:1009/' 在多个地方调用，每次书写很麻烦，后期项目维护也不好管理。...以上这篇在vue中多次调用同一个定义全局变量的实例就是小
Vue使用watch监听一个对象中的属性的实现方法
10-17
主要介绍了Vue使用watch监听一个对象中的属性的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
基于vue2.x和ElementUI插件的ui项目源码.zip
09-27
基于vue2.x和ElementUI插件的ui项目源码.zip基于vue2.x和ElementUI插件的ui项目源码.zip基于vue2.x和ElementUI插件的ui项目源码.zip基于vue2.x和ElementUI插件的ui项目源码.zip基于vue2.x和ElementUI插件的ui项目...
解决vue bus.$emit触发第一次$on监听不到问题
10-15
主要介绍了解决vue bus.$emit触发第一次$on监听不到问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue data、watch 等多次执行
qq_44989936的博客
08-12 1345
添加了:key后 其内组件跳转到其它界面data重复执行，建议使用watch 监听 $route
Vue 中watch监听对象，对象中有多个属性同时改变时，会多次触发执行函数
Merryhyl的专栏
04-21 4657
Vue 中watch监听对象，对象中有多个属性同时改变时，会多次触发执行函数 现象 <script> export default { data() { return { obj: { A: 'aaa', B: 'bbb', C: 'ccc', }, } }, watch: { // 同时改变obj中 A,B 会触发两次console.
记录vue watch监听到两次改变的问题
qq_26270127的博客
06-03 8874
记录vue watch监听到两次改变的问题是v-if重新渲染导致的？更改赋值 是v-if重新渲染导致的？ ... //子组件 <dataBaseFormView v-if="show" :databaseType="databaseType" :databaseData="databaseData"/> ... //显示子组件的函数 openDatabaseLink(data){ this.databaseType=data.dbtype; this.databaseData=dat
Vue中父组件传递给子组件一个对象的时候，子组件监听调用多次问题
yw00yw的博客
11-24 2723
界面效果 传递方式 <Col span="16"> <Card class="mg_left5"> <p class="title themeBackground">拆回原因分析</p> <div class="panel_content"> <FaultAnalysis :paramsGroup="{deptCode, statisDateStart: startDate, stat
vue3 watch重复调用问题
lianlin21212411的博客
03-17 5623
在使用vue3 watch监控数据的时候出现执行2次的情况 watch( () => overviewStore.selectModule,//pinia数据 function (newV) { loadState(newV); } ); 操做说明： 监听的是pinia中的state 加载当前页面 切换路由到其他页面 再切换回来 overviewStore.selectModule执行2次 如果watch的对象为props则不会出现执行2次情况 目前还没搞明白为什么出现2次
vue封装的echarts组件多次被同一个页面调用（带源码）
m0_49714202的博客
03-02 706
子组件之间复制到编译器查看效果，别忘了全局安装echarts 将我们封装的组件中的id选择器删掉，换成ref，下面是组件修改部分 <div class="page_basicLine"> <div id="main_basicLine main_basicLine2" style="width: 500px; height: 500px" ref="echarts" ></div> </div>
vue父组件传数据给子组件，子组件watch这个数据第一次有效，刷新页面就无效（同时解决请求数据时间过长，导致子组件过早渲染而无法获取到最新数据的问题）
m0_46694056的博客
09-23 2801
需求&问题 本文废话有点多，但我觉得有些业务场景应该也会有人遇到，索性还是把需求和问题都写详细点，看各位路过的朋友不说能解决你的问题，哪怕是对你有一点点帮助的，我也就很高兴了的????，嫌废话多的，直接看图应该就懂我的意思，我只留了关键的代码… 问题1：本来是要向后台请求数据的，但是由于数据过大，后台需要处理，所以整个请求时间过长，可是我就是要拿到这个请求数据传给子组件，但实际上假如请求时间需要5s，而子组件渲染完成只需要3s，那就取不到数据了，我想到的解决办法有： 法1： 在子组件使用
vue watch监听为什么第二次不会触发？
weixin_63456913的博客
05-20 2131
要解决这个问题，你可以使用一个简单的技巧：在每次传递值给子组件之前，先将其设置为一个不同的值。例如，你可以将其设置为null，然后再设置回你想要传递的值。这样，每次点击编辑按钮时，Vue 将检测到currentPlantPartName的变化并触发子组件的watcher。根据你的描述，问题可能是你在点击编辑按钮时未更改传递给子组件的值。你想要解决这个问题的一个方法是确保每次点击编辑按钮时都更新传递给子组件的值。按钮，在父组件向子组件传递一个值，字符串或对象，在子组件中使用。按钮，打开弹窗，此时子组件的。
【Vue3】watch监听的五种情况
最新发布
球球博客
12-21 2544
在vue3中，watch监听的五种情况
vue 打开页面自动获取数据_前端面试准备笔记系列之vue(02)
weixin_39907591的博客
12-20 561
目录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的作用主要...
vue2watch监听多个变量
07-28
在Vue2中，watch本身无法直接监听多个变量。但是我们可以通过计算属性返回一个包含需要监听的多个变量的对象，然后再监听这个对象来实现"监听多个变量"的效果。具体的代码如下所示： ```javascript export default { data() { return { msg1: 'apple', msg2: 'banana' } }, computed: { msgObj() { const { msg1, msg2 } = this return { msg1, msg2 } } }, watch: { msgObj: { handler(newVal, oldVal) { if (newVal.msg1 !== oldVal.msg1) { console.log('msg1 has changed') } if (newVal.msg2 !== oldVal.msg2) { console.log('msg2 has changed') } }, deep: true } } } ``` 在上述代码中，我们通过计算属性`msgObj`返回一个包含`msg1`和`msg2`的对象。然后在`watch`选项中监听`msgObj`，并在`handler`中判断`msg1`和`msg2`的变化情况进行相应的处理。通过设置`deep: true`来深度监听对象的变化。 这样，当`msg1`或`msg2`发生变化时，就会触发相应的处理逻辑。 #### 引用[.reference_title] - *1* [VUE的watch监听多个变量](https://blog.csdn.net/CSDN877425287/article/details/115709040)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [vue watch监听多个数据](https://blog.csdn.net/weixin_51033461/article/details/128728364)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值