【报Bug】vue3 watchEffect 监听到的值有问题

分类：uni-app

bug反馈

产品分类： uniapp/小程序/抖音

PC开发环境操作系统： Mac

PC开发环境操作系统版本号： 13.4.1

第三方开发者工具版本号： vscode 1.91.1

基础库版本号： 3.0.0-alpha-4020120240618002

项目创建方式： CLI

CLI版本号： @vue/cli@5.0.8

示例代码：

 <PaiVideoSeries v-model="seriesModle" key="1" type="douyin1" @select="changeCurrentSwiperVideo"></PaiVideoSeries>  
        <!-- 充值解锁 -->  
        <PaiRechargeNew v-model="rechargeModle" key="2" type="douyin2" @success="go2UnlockVideo"></PaiRechargeNew>

分别使用监听
PaiVideoSeries
const Props2= defineProps({
// 充值弹窗显示
modelValue: {
type: Boolean,
default: false,
},
type: {
type: String,
default: 'weixin',
},
});
const stopModelValueWatch = watchEffect(() => {
console.log('我要打印的值:充值组件watchEffect', Props2.modelValue);
});

PaiRechargeNew
const Props1= defineProps({
// 充值弹窗显示
modelValue: {
type: Boolean,
default: false,
},
type: {
type: String,
default: 'weixin',
},
});
const stopModelValueWatch = watchEffect(() => {
console.log('我要打印的值:充值组件watchEffect', Props1.modelValue);
});

操作步骤：

页面更改 rechargeModle 值

预期结果：

不触发 PaiVideoSeries 组件内部的 watchEffect 监听

实际结果：

触发 PaiVideoSeries 组件内部的 watchEffect 监听

bug描述：

 <PaiVideoSeries v-model="seriesModle" key="1" type="douyin1" @select="changeCurrentSwiperVideo"></PaiVideoSeries>  
        <!-- 充值解锁 -->  
        <PaiRechargeNew v-model="rechargeModle" key="2" type="douyin2" @success="go2UnlockVideo"></PaiRechargeNew>

页面同时存在两个组件
两个组件内分别使用 watchEffect 监听 defineProps 的返回值，修改 rechargeModle ，触发 PaiVideoSeries 的 watchEffect 监听，导致赋值错误，请查看

2024-07-17 19:55 负责人:无分享

2 个回复

爱豆豆 - 办法总比困难多

没复现出来组件不同绑定的变量也不同改rechargeModle 怎么会触发PaiVideoSeries中的监听呢
可以上传一个复现的demo吗帮你排查下

t***@163.com (作者)

不用，在抖音小程序里，你写两个子组件，在父组件引入下，在子组件内使用 watchEffect 来检测 moduleValue 的值，就能复现

2024-07-25 14:17

t***@163.com (作者)

在Vue3的项目中测试过了，不会触发这个问题，Vue3框架没有问题，只触发一次，Uni-app框架触发了多次

要回复问题请先登录或注册

【报Bug】vue3 watchEffect 监听到的值有问题

操作步骤：

页面更改 rechargeModle 值

预期结果：

不触发 PaiVideoSeries 组件内部的 watchEffect 监听

实际结果：

触发 PaiVideoSeries 组件内部的 watchEffect 监听

bug描述：

2 个回复

公告

相关问题

【报Bug】vue3 watchEffect 监听到的值有问题

操作步骤： 页面更改 rechargeModle 值

预期结果： 不触发 PaiVideoSeries 组件内部的 watchEffect 监听

实际结果： 触发 PaiVideoSeries 组件内部的 watchEffect 监听

bug描述：

与内容相关的链接

2 个回复

公告

相关问题

操作步骤：

页面更改 rechargeModle 值

预期结果：

不触发 PaiVideoSeries 组件内部的 watchEffect 监听

实际结果：

触发 PaiVideoSeries 组件内部的 watchEffect 监听