vue中watch同时监听多个数据，多个数据的执行顺序

最新推荐文章于 2024-07-19 15:53:40 发布

蓦然 ...

最新推荐文章于 2024-07-19 15:53:40 发布

阅读量3.9k

点赞数 1

文章标签： vue vue.js

本文链接：https://blog.csdn.net/felicity_zll/article/details/112916164

版权

本文记录了在 Vue 开发中遇到的一个问题，即在 watch 监听多个父组件传递过来的数据时，执行顺序依赖于数据获取的速度。通过示例代码展示，当 idList 的获取时间快于 goodsData 时，idList 相关的代码会先执行。这表明 Vue 的 watch 会按照数据就绪的顺序执行异步任务。对于开发者来说，理解这一行为有助于更好地控制组件的响应逻辑。

摘要由CSDN通过智能技术生成

vue中watch同时监听多个数据，多个数据的执行顺序

工作中遇到的小问题，在此记录一下，代码如下：
在这里插入图片描述
goodsData和idList都是从父组件传递过来的值。
下面是父组件中发送请求消耗的时间，idList消耗8ms,所以在子组件之中，先执行idList里面的代码。

所以得出结论：watch 里面的顺序执行异步任务，
如果watch监听父组件传递过来的数据，
数据执行的顺序依据数据接收快慢执行，（即速度快的先执行，速度慢的后执行！）

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

蓦然 ...

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue关于watch和methods值执行顺序问题，以及解决方案

九日的博客

07-01

4880

问题父组件： <GroupTransform :is-show.sync="selectPeopleDialogVisible" @callback="getSelectedPeople" ></GroupTransform> watch: { selectGroupRight: { handler(val) { }, deep:

vue监听多个input改变_vue 完美监听input值变化

weixin_42628846的博客

12-31

3926

1、vue中实时监听input值的变化，停止输入300ms后去请求，而不是时时请求数据2、解决异步请求可能会发生先请求后返回问题，导致结果列表不是预料展示的效果一、问题做搜索功能时，监听input的value值变化实时请求数据，每增加一个字符，就发送一次请求。例如输入12345，会监听到5次变化1 12 123 1234 12345，导致连续请求5次。这是没必要的，增加服务器负担，可能出现卡顿的情...

参与评论您还未登录，请先登录后发表或查看评论

vue watch怎样同时监听两个值的变化并执行方法？

CatEatApple的专栏

11-01

1万+

用computed定义一个address对象吧，然后再去watch addres data() { return { city: '', country: '' } }, computed: { address() { const { city, country } = this return { city, country ...

一张图搞懂vue3 watch监听props值的先后顺序

shanlirenya的博客

12-04

939

一张图搞懂vue3 watch监听props值的先后顺序

【vue】vue2和vue3 watch监听（监听多个数据；监听对象属性变化，新旧值相同；等情况处理）

热门推荐

dandelion_zjw的博客

07-23

2万+

在写地址选择器时，选择省份显示对应的城市，监听省份和城市的变化，代码如下，主要研究watch <script> import { defineComponent, reactive, toRefs, watch } from "vue"; export default defineComponent({ setup(props, { emit }) { const state = reactive({ province: '',// 省份 country: '

vue watch侦听器有无immediate的运行顺序

qq_41206305的博客

07-22

1095

刚写项目的一个需求中遇到了watch运行顺序的坑，本打算把项目弄完再来看看，结果leader说产品还在改需求（高强度学习开始！！>_>） watch普通监听属性（无immediate）在初始化时不会执行watch created() { this.id = 1; console.log(this.id); console.log(this.name); }, watch: { id: function (val) { if (val

vue3watch监听多个参数

05-15

在Vue 3中，可以使用 `watch` 函数来监听多个参数的变化。具体实现方法如下： 1. 在 `setup` 函数中使用 `watch` 函数来监听多个参数的变化： ```javascript import { watch } from 'vue'; export default { ...

vue3watch监听多个方法

09-20

在Vue3中，可以使用数组来监听多个参数。例如，如果需要同时监听name和cont两个参数，可以这样写： ```javascript const name = ref(0); const cont = ref(0); watch([name, cont], (newVal, oldVal) => { // ...

vue中注意watch的执行顺序

weixin_30832983的博客

05-15

4257

1.在组件由v-if和watch同时监听一个值来做一些操作时，需要对watch进行进一步修改，比如增加immedita 2、在组件使用v-if时且判断类型为boolean值，需要在组件内部的watch里添加immediate否则watch不会执行转载于:https://www.cnblogs.com/alww/p/10869836.html...

vue父组件的watch比子组件的watch先触发

前端工程师，博文都是自己学习到的，或者开发中遇到的点，记录一下

12-18

527

解决方案：在子组件定义一个方法直接用 props.传过来的值，在父组件中传递的值发生变化的时候直接调用子组件中的这个方法即可，

vue，watch created mounted computed执行顺序

yusun1234的博客

10-20

4715

vue 方法执行顺序

watch监听

weixin_53488675的博客

02-11

352

vue3中watch监听多个动态传值

weixin_47483275的博客

11-08

665

父组件传值给子组件时，动态监听父组件的值，然后调用监听的值。

vue中watch监听，ajax异步问题解决

xy405580364的博客

11-20

6920

1.组装参数调方法 getResult(){ //组装requestParam1和requestParam2参数 let requestParam1 = {} let requestParam2 = {} requestParam1.screen = this.screenData; requestParam1.dimension = [this.dimensionData[0]]; ...

vue3之watch多个源

weixin_45346457的博客

12-07

5586

watchAPI 与选项式 APIthis.$watch(以及相应的watch选项) 完全等效。watch需要侦听特定的数据源，并在单独的回调函数中执行副作用。默认情况下，它也是惰性的——即回调仅在侦听源发生变化时被调用。与watchEffect相比，watch允许我们：惰性地执行副作用；更具体地说明应触发侦听器重新运行的状态；访问被侦听状态的先前值和当前值。 api： watch(WatcherSource, Callback, [WatchOptio...

vue watch监听多个值

韩瑜的博客

03-12

3725

有时我们需要监听多个值而执行同一个方法，如果分开监听，该方法会被执行多次，用以下方法监听多个值就可以解决该问题。 computed: { watchObj () { let { id, selectTime } = this return { id, selectTime } } }, watch: { watchObj:{ ha...