Closed
Description
Vue version
3.2.22
Link to minimal reproduction
Steps to reproduce
just copy the code to HTML file, load page in browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>reactivity test</title>
<script src="https://unpkg.com/@vue/reactivity@3.2.36/dist/reactivity.global.js"></script>
<script>
const store = VueReactivity.ref([])
// const store = VueReactivity.reactive({
// value: []
// })
let counterForRun = 0
const effectRunner = VueReactivity.effect(() => {
console.log(`effect run times is ${counterForRun}`)
if (store.value.length > 0) {
// do some thing...
console.log(`store value is ${JSON.stringify(store.value)}`)
// clear store
// store.value.length = 0
store.value.splice(0) // trigger effect again
}
counterForRun += 1
})
let intervalTimes = 0
const intervalId = setInterval(() => {
if (intervalTimes === 2) {
clearInterval(intervalId)
// VueReactivity.stop(effectRunner)
return
}
store.value.push(intervalTimes)
intervalTimes += 1
}, 1000)
</script>
</head>
<body>
</body>
</html>
store.value.splice(0) trigger effect callback run again, but in the effect callback, store.value.length is not 0.
Did I use @vue/reactivity it in the right way ???
What is expected?
When clear store.value, the store.value.length=0 .
What is actually happening?
Clear reactive array store, but the store.value.length=1, not 0.
System Info
5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.64 Safari/537.36 Edg/101.0.1210.53Any additional comments?
Maybe I use it in the wrong way.