Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

watchEffect BUG #9408

Closed
llch20181014 opened this issue Oct 16, 2023 · 1 comment
Closed

watchEffect BUG #9408

llch20181014 opened this issue Oct 16, 2023 · 1 comment

Comments

@llch20181014
Copy link

Vue version

3.3.4

Link to minimal reproduction

https://cn.vuejs.org/api/reactivity-core.html#watcheffect

Steps to reproduce

import { ref, watchEffect } from 'vue'
const r = ref(0)
function sleep(time){ return new Promise((resolve)=>{ setTimeout(() => { resolve() }, time); }) }
watchEffect(async ()=>{
await sleep(500)
console.log('watch1',r.value)
})
setTimeout(() => { r.value = 2 }, 3000);

What is expected?

Should listen for changes in r

What is actually happening?

Only printed:
watch1 0

System Info

No response

Any additional comments?

I changed the code:
import { ref, watchEffect } from 'vue'
const r = ref(0)
function sleep(time){ return new Promise((resolve)=>{ setTimeout(() => { resolve() }, time); }) }
watchEffect(async ()=>{
console.log('watch1',r.value)
await sleep(500)
})
setTimeout(() => { r.value = 2 }, 3000);
Printed:
watch1 0
watch1 2

@Alfred-Skyblue
Copy link
Member

watchEffect cannot be used to watch data within asynchronous queues. If you specifically need to watch a variable, you should use watch. If you use watchEffect, you need to access the variable before entering the asynchronous queue.

@github-actions github-actions bot locked and limited conversation to collaborators Oct 31, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants