22/09/26 vue3 watch监听多个参数&&达到条件后停止监听

最新推荐文章于 2025-04-10 11:41:12 发布

原创最新推荐文章于 2025-04-10 11:41:12 发布 · 444 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

vue3 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用flag来控制监听机制的方法，当特定条件满足时（包括产品ID存在、动图加载完成及分享图片就绪），将取消监听，以此确保资源加载完毕并避免不必要的持续监听。

代码

const flag = watch(() => [boxOriData.value.productId, openImgLoaded.value, shareImgSrc.value], ([newPrpId, newGifLoaded, newShareImg], [oldPrpId, oldGifLoaded, oldShareImg]) => {
  // console.log('id', newPrpId, oldPrpId);
  // console.log('gif', newGifLoaded, oldGifLoaded);
  // console.log('shareimg', newShareImg, oldShareImg);
  if (newPrpId && newGifLoaded && newShareImg) {
    // console.log('yes');
    fetchInfoLoading.value = false;
    //停止监听
    flag();
  }
  { deep: true }
})

用flag声明一下，达到条件后，停止监听