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.

Sign up for GitHub

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

Jump to bottom

When clear a reactive array object in effect function, the array.length is not 0, all ways has a element in it. #6018

Closed
betgar opened this issue May 27, 2022 · 4 comments · Fixed by #5912
Closed

When clear a reactive array object in effect function, the array.length is not 0, all ways has a element in it. #6018

betgar opened this issue May 27, 2022 · 4 comments · Fixed by #5912
Labels
🐞 bug Something isn't working 🔩 p2-edge-case

Comments

@betgar
Copy link

betgar commented May 27, 2022

Vue version

3.2.22

Link to minimal reproduction

#6017

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>

image

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.53

Any additional comments?

Maybe I use it in the wrong way.
@edison1105 edison1105 mentioned this issue May 31, 2022
Closed
@edison1105 edison1105 added 🐞 bug Something isn't working 🔩 p2-edge-case labels May 31, 2022
@tangjinzhou
Copy link
Contributor

same issue https://sfc.vuejs.org/#eNp9kcFugzAMhl/FywUqpaBut4qiTdphb7DDsgMFU+hCEiWh1YR49zlhrapO2iWK7d/fn9gTezEmO43Itqxwte2NB4d+NKVQ/WC09TDBufJ1x8FiG46q9v0JYYbW6gES6k2EEqrWynkY3AF2QZkmbyilhndtZfOQrC6CytooWCjpx4Y/8qdPKkeTlMoc0tWuhEkogNCjJWZSH9IkKgIg4eHMnOxrTFfUO3OYWjm6bguJ+1Z1Ml/9uko1El9RokcyTldwYUeEiYwN31DDnd3VKBgIVeTLeGgwFHgcjKw8UgRQdJtymuLf57nIKYrZ/ei9VvBck8fXTrDbpwhWNvFS5IuMWor8SmWcLdNfD5XJjk4r2k98tfgtOMG2yz9CjpYQYvLw3rhtnru2Dls9ukzbQ063zI7K9wNm6Ib13uqzQ0tgwfgNI6fkCe3aomrQov2PeSf9ww1YGtvM5h/o7dGM

@dattn
Copy link

dattn commented Sep 15, 2022

I got exactly the same problem.
When splicing an element out of an reactive Array, computed values are triggered too early.
The item has been sucessfully removed, but the array.length is unchanged when the computed value recompution is triggered.
Which causes errors when looping over that array.

@SinBirb
Copy link

SinBirb commented Aug 3, 2023 •
edited

This isn't really an edge-case. There should be a warning somewhere in the docs, that you should not use watch with flush: sync, or computedEager for large arrays.

And that splice(), shift(), etc. are not atomic operations with Vue.

The JSBench example here is 10 million times slower with Proxy, on my machine: #3541 (comment)

@edison1105 edison1105 mentioned this issue Sep 27, 2023
Merged
@sxzz sxzz linked a pull request Sep 27, 2023 that will close this issue
feat(reactivity): more efficient reactivity system #5912
Merged
johnsoncodehk added a commit to johnsoncodehk/core that referenced this issue Sep 27, 2023
@johnsoncodehk
test: add test for vuejs#6018
3170eff
yyx990803 pushed a commit that referenced this issue Oct 27, 2023
@johnsoncodehk
feat(reactivity): more efficient reactivity system (#5912)
4a25e25 
fix #311, fix #1811, fix #6018, fix #7160, fix #8714, fix #9149, fix #9419, fix #9464
sxzz pushed a commit that referenced this issue Oct 27, 2023
@johnsoncodehk @sxzz
feat(reactivity): more efficient reactivity system (#5912)
16e06ca 
fix #311, fix #1811, fix #6018, fix #7160, fix #8714, fix #9149, fix #9419, fix #9464
@johnsoncodehk
Copy link
Member

Fixed by #5912.

@github-actions github-actions bot locked and limited conversation to collaborators Nov 11, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
🐞 bug Something isn't working 🔩 p2-edge-case
Projects
None yet
Milestone
No milestone
6 participants
@dattn @edison1105 @SinBirb @tangjinzhou @betgar @johnsoncodehk