vue中watch与事件回调的顺序,被console.log欺骗的我

最新推荐文章于 2023-04-28 11:45:53 发布
最新推荐文章于 2023-04-28 11:45:53 发布
阅读量812 收藏
点赞数 2
分类专栏： vue项目 文章标签： 回调函数 watch 异步执行 引用类型 数据同步
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yunbabac/article/details/123906201
版权

今天给你们分享一个工作中遇到的bug,公司前辈留的代码,提前声明我是菜鸟,勿笑

问题描述:父组件给子组件一个函数,子组件监听事件调用函数,同时watch侦听到改变,函数中要使用watch侦听后的值

废话不多说,先上代码为敬

 

 

 好了,代码就是这样

问题来了

每次触发回调函数,获取分页列表函数中,data在console.log中打印都是正确的

但在网络请求中,都是慢一步,也就是都是上次的值

我就纳闷了,打印都是对的,为啥你非得用错的呢

如果,watch比回调函数后执行,打印也不能正确啊

然后我就测试了watch,回调函数谁先执行

分别在两者中打印

回调函数先于watch

????

这,console.log骗我

思考:是因为引用类型吗,后续watch做了修改回调函数中打印的都是新的值,而异步请求时watch还没有修改,

解决,那就让watch先于网络请求执行吧

然后就都正确了

 浪费我一个小时

有不同看法留言教教我

拜拜

是云呀！
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue子组件上传图片 watch监听回显 watch 没更新问题 已解决
web全栈开发的博客
01-08 762
请求回来的数据是res.data 将数据复制多一份为newdata 然后遍历将watch没显监听到的值设置为空 然后再将复制的数据赋值给你要显示customerlist 即可 以下例子 get(){ //请求回来的数据是res.data 显示的列表数据为 this.customerlist this.customerlist=res.data var newdata=JSON.parse( JSON.stringify(res.data)) res...
vue.js中$watch的用法示例
11-23
Vue实例中的数据可以通过`v-model`指令与DOM元素进行双向绑定，而`$watch`是一个非常重要的功能，用于监听并响应Vue实例上数据的变化。 `$watch`的基本用法是作为一个对象，其中键是你想要观察的表达式，值是对应回...
vue.js第一课，console.log()无法输出
weixin_40441194的博客
06-13 9419
vue.js第一课，console.log()无法输出 vue第一课中，对于 vue()对象中的watch()属性介绍，可以监听页面元素变化，此处为message的变化。代码如下，但通过页面运行，发现并没有在console中输出，或者说watch()里面的console.log()并没有执行。 解决方法：实测发现将app.$data.message=“这是新数据!!!”; 这一行，也就是页面元素变化这一行移动到watch()操作后面，然后在console中就可以看到console.log()的输出了。
VUE中watch的详细使用教程
热门推荐
qq_59917539的博客
11-28 5万+
watch监听器的用法和作用，非常详细，简单易懂
vue watch 的使用方式
qq_35363709的博客
04-28 500
vue watch 的使用方式。
Vue如何正确使用watch监听属性变化
无声告白
02-18 8226
Vue中可以使用监听器监听属性的变化，并根据属性变化作出响应。但一旦涉及到复杂数据的监听（如Object，但数组一般不需要，因为Vue针对数组做了特殊处理）时就比较复杂了，本文解释了使用watch监听属性变化的方法，包括复杂数据。 基本用法 Vue watch最重要的使用场景是根据某属性的变化执行某些业务逻辑: <template> <input type="number" ...
Vue.js watch监视属性知识点总结
01-19
这个属性用来监视某个数据的变化，并触发相应的回调函数执行 1.基本用法 (1)添加watch属性，值为一个对象。对象的属性名就是要监视的数据，属性值为回调函数，每当这个属性名对应的值发生变化，就会触发该回调函数...
关于vue中watch检测到不到对象属性的变化的解决方法
08-28
Vue 中的 Watch 机制与深层监视对象属性的变化 在 Vue 开发过程中，我们经常会遇到一个问题：在改变 Vue 实例中的对象属性时，Watch 无法检测到变化。这篇文章将介绍解决这个问题的方法，并详细解释 Vue 中的 Watch...
Vue.js 中的 $watch使用方法
12-11
在Vue.js中，`$watch`是一个非常关键的特性，用于监听并响应数据的变化。当数据发生变化时，`$watch`会自动触发指定的回调函数，从而更新视图。下面我们将详细探讨`$watch`的工作原理及其在Vue实例中的应用。 首先...
vue配置项---watch的使用
weixin_46545002的博客
08-10 1092
vue的配置项--watch的使用
vue中watch的使用
weixin_42216094的博客
12-27 1142
vue中watch的使用分享。
vue侦听器watch的使用方法详解
m0_61476911的博客
08-19 1276
watch监听器详解
vue等待请求后的数据到了在执行下一步操作
独角戏top的博客
08-30 4827
在created生命周期函数中发起的请求，在后面需要使用请求后的数据完成下一步操作，但因为发起的请求是异步的所以这时候返回的数据可能还没到。使用vue中的watch方法，监听数据变化后在执行操作。如果大佬有更好的方法欢迎在评论区指正。...
Vue中watch的详细用法（三种）
seimeii的博客
07-21 1万+
watch的三种用法
console.log无法打印问题
weixin_45773788的博客
06-26 1万+
本人遇到情况：vue项目中watch监听器监听绑定事件，console.log在控制台无显示，尝试alert正常。可能原因一：浏览器过滤条件问题（网上最常见的原因但本人并不是） 解决方案：左侧top栏选择info，默认级别（Default levels）中信息选项（info选项）要勾选，筛选器中清空。可能原因二（本人遇到的原因查了很久）：浏览器扩展程序问题。解决方案：亲测删除多余扩展后（云文档等）功能恢复正常，在另一浏览器上也是如此，都是存在云文档这一扩展程序导致console.log打印失效。...
vue中watch事件监听（watch使用方法·作用）
m0_57884221的博客
05-24 2331
一：基本使用--直接代码（直观） watch: { name(nv, ov) { // nv:新值，ov:旧值 console.log(nv, ov); }, }, 作用：用于侦听指定的属性值的变化，只要侦听的属性值发生了变化就会触发侦听器，进行相应事件处理 二：进阶：深度监听 <template> <div> <input type="text" v-model="username" /> &
Vue之watch高级用法
一只路过的小码农
01-08 1941
在vue中，使用watch来响应数据的变化。普通用法就不过多说，本文主要介绍下高级用法，immediate、handler以及deep， 一、immediate（首次绑定） 我们想要最初绑定的时候也执行函数，就用到immediate。监听的数据后面写成对象形式，包含handler方法和immediate，之前我们写的函数其实就是在写这个handler方法； immediate表示在watch中首次...
Vue.js中 watch 的高级用法
weixin_34113237的博客
05-02 3004
假设有如下代码： &lt;div&gt; &lt;p&gt;FullName: {{fullName}}&lt;/p&gt; &lt;p&gt;FirstName: &lt;input type="text" v-model="firstName"&gt;&lt;/p&gt; &lt;/div&gt; new Vue({ el:
vue使用watch(监听属性)
GuAng
08-26 2568
监听属性(watch)：vue数据是响应式数据:指的是数据可以进行跟踪和监听。 1.比较常用的使用方法 watch:{ // 属性是要监听变化的数据，属性值是监听函数 msg:function(newValue,oldValue){ console.log(newValue); // 变化之后的值 console.log(oldValue); // 变化之前的值 } } 2.直接写一个监听函数
watch: { hzd_name() { console.log('数据有变') }
最新发布
06-12
这是Vue.js中的一个watch选项，用于监测数据的变化并做出相应的响应。 在上面的代码中，我们监测了一个名为hzd_name的数据，当该数据发生变化时，会触发回调函数，并在控制台中输出“数据有变”。 watch选项的语法如下： ```javascript watch: { // 监测的数据 dataName: { // 深度监测 deep: true, // 立即触发回调函数 immediate: true, // 数据发生变化时的回调函数 handler(newVal, oldVal) { // 处理逻辑 } } } ``` 其中，dataName为要监测的数据名称，handler为数据发生变化时的回调函数。在回调函数中，我们可以根据数据的变化做出相应的响应。另外，为了提高性能，我们可以设置deep选项为true，表示进行深度监测，这样可以监测到对象或数组中元素的变化。同时，我们还可以设置immediate选项为true，表示在组件初始化时立即触发回调函数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值