探索vue中watch在任务执行队列中的执行时间

最新推荐文章于 2025-03-29 21:13:09 发布
原创 最新推荐文章于 2025-03-29 21:13:09 发布
· 2.2k 阅读 · 0 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

   先说本文的结论：watch的处理函数是在同步函数都执行完毕之后，在浏览器更新DOM之前执行

 

首先来看官方

这样子，实际上只会有一个输出：test 10

接着，如果我们在有这样一个html结构：

Watch的结构如上图所示，this.$refs[‘test-watch’]的输出结果是undefined。

如果我们在调用testFun后，执行一些其他的指令，也会发现是后面的指令先执行，再执行watch处理函数。但是控制台是先显示watch之后，再输出test。

所以可以看出，watch的处理函数是在同步函数都执行完毕之后，在浏览器更新DOM之前执行

详细讲解vue3 watch回调的触发时机
每天都要努力学习哦~~
07-22 1719
然而在有些情况下，我们需要在状态变化时执行一些“副作用”：例如更改 DOM，或是根据异步操作的结果去修改另一处的状态。同一个“tick”的意思是，Vue的内部机制会以最科学的计算规则将视图刷新请求合并成一个一个的"tick"，每个“tick”刷新一次视图，比如。Vue 的响应性系统会缓存副作用函数，并异步地刷新它们，这样可以避免同一个“tick”中多个状态改变导致的不必要的重复调用。这意味着如果你尝试在侦听器回调中访问所属组件的 DOM，那么 DOM 将处于更新前的状态。的所属组件的 DOM，你需要指明。
【Vue3】的watch，watchEffect侦听器分析
binqian的专栏
08-12 363
vue3的watch和watchEffect方法的实现分析。watch和watchEffect的一些区别
watch 命令：周期性执行命令
活到老学到老。
06-25 513
watch 命令常用参数。
vue.js中实现方法内某些代码延时执行
热门推荐
付梦伟的博客
03-27 2万+
今天在工作时遇见了某些代码需要延时操作的情况。具体情况为前台grid在执行完增删改操作后需要在增加或者修改弹框点击确定导致弹框消失后，grid内数据能够及时更新以便显示增删改操作后的数据。这里的话使用的是vue.js中的setTimeout函数来解决该问题。代码如下： var that = this; setTimeout(function () { that.modifyDia...
Vue2——常用指令总结、指令修饰符、v-model原理、computed计算属性、watch监听器、ref和$refs
最新发布
m0_74556076的博客
03-29 801
Vue——常用指令总结（内置指令，自定义指令）、指令修饰符、v-model原理、computed计算属性、watch监听器、ref和$refs
watch监听对象里面值的变化_vue3.0 源码解析三 ：watch和computed流程解析
weixin_39607240的博客
11-28 1184
一 前言介绍之前我们分两个章节详细的介绍了vue3.0 数据相应原理，知道了用proxy代替Object.defineProperty 的利与弊，了解了依赖收集和派发更新的大致流程，知道了vue3.0响应式原理，这节我们一起研究vue3.0中的 watch 有那些变化。连载文章是大致是这样的，可能会根据变化随时更改：1 数据绑定原理(上)2 数据绑定原理(下)3 computed和wat...
Vue中methods,computed,watch的调用时机区别
m0_53934275的博客
03-21 1398
1，methods： 当页面引用了vue data关键字的属性，并且这些属性发生改变的时候，就会执行methods中定义的函数，并且不管methods中定义的函数是否依赖了data关键字中的属性，methods中定义的函数都会被执行。 主动调用methods中定义的函数的时候，这些函数每次调用都会执行。 2.computed： 1.函数内依赖了vue的属性，2这些属性发生了改变，3.这些属性被页面引用。这三个条件同时满足，才会触发computed中定义的某个函数的回调。 3.watch watc
vue中watch和computed为什么能监听到数据的改变以及不同之处
10-15
当观察的数据发生变化时，watcher会把回调放入到微任务队列中，在当前执行栈执行完毕后，下一个tick执行watch回调，确保数据的改变已经被确认。watch支持同步与异步的监听，这取决于回调函数的实现。 ### 为什么能...
Vue中computed VS watch
T_iAn_T的博客
03-21 814
Vue中computed VS watch
vue3源码分析 -- watch
triggerV的博客
03-29 1116
1）watch函数实际执行的是doWatch方法，调度器scheduler在watch中很关键2）scheduler两者之间存在互相作用的关系，一旦effect触发了scheduler，那么会导致执行，job方法就被塞入微任务的队列中3）只要job()触发，那么就表示watch触发了一次。
vue生命周期以及watch 、computed 、methods 执行顺序
weixin_53663431的博客
03-01 2397
vue生命周期以及watch 、computed 、methods 执行顺序
深入理解vue的watch触发时机
weixin_43546457的博客
03-24 2961
当所监测的数据发生变化时，Vue 会在下一个更新循环中检测到数据的变化，然后触发 watch 钩子函数。在 watch 钩子函数被触发执行前，Vue 会先执行一个数据变化的队列，将所有变化的数据都执行更新，然后才执行 watch 钩子函数。
vue获取当前时间（与演出时间做出状态比较）
qq_70703397的博客
02-04 299
与演出作比较
Vue进阶（八十九）：watch 用法详解
IT全栈 华强工作室
01-04 3948
在Vue中，用watch来响应数据的变化，示例代码如下， 第一种方式 <input type="text" v-model="userName"/> //监听当userName值发生变化时触发 watch: { userName (newName, oldName) { console.log(newName) } } 第一种方式有一个缺点： 就是当值第一次绑定的时候 不...
开发应该理清的vue2的生命周期（一）——watch在生命周期的触发时机1
weixin_65908792的博客
07-07 902
本文章，将通过vue2父组件和子组件的“created”和“mounted”生命周期。父子组件通过props传值，父组件在“created”和“mounted”生命周期改变了传给子组件的props值。子组件监听该props值，同时设置immediate为true。然后，看看watch在生命周期的触发时机。
Vue学习—选项(三)watch
倾世~茹薇
04-16 453
watch:{ [key: string]: string | Function | Object | Array } ,一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。&lt;body&gt; &lt;h1&gt;watch&lt;/h1&gt; &lt;di...
vue - watch 方法学习及应用
H舞
03-12 1448
最近做了个减肥调查问卷，使用vue将问卷数据（model层，即data里的数据）渲染至view里面，用户在页面上操作使得view改变，view层通过ViewModel将数据同步至model，反过来model层数据改变通过viewMoel渲染数据至view（我所理解的MVVM），相比Jqery传统Dom操作，这种数据量较大的操作使用vue较为方便。上个礼拜五画完页面+基本逻辑梳理，感冒原因，逻辑梳理...
队列时限
cherry7434的博客
12-05 470
队列时限： 对于报表服务，队列时限是指一个请求在所有连接都在使用中时等待报表服务连接的时间上限。该请求将一直排队等候，直到有连接可用，或等候时间达到队列时限设置中规定的配置秒数。如果在配置时限内无连接可用，用户会收到一条系统消息：该请求无法完成，因为在规定的时限内无资源可用。 注意：默认的队列时限是240秒。 ...
详细说一下 Vue3 中 watch 的底层原理
02-23
例如，如果源是一个函数，Vue会在effect中执行这个函数，从而访问到响应式属性，进而收集依赖。 还要提到watch的深层监视（deep选项）是如何实现的。对于对象或数组，Vue会递归地追踪所有嵌套属性，这样任何层次的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值