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

betgar · 2022-05-27T01:12:56Z

betgar
May 27, 2022

I use @vue/reactivity independently. I want use reactive array as a data store , when store change do some sync task, then clear the store.

<!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>

The console log is :

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 ???

edison1105 · 2022-05-31T06:05:47Z

edison1105
May 31, 2022
Collaborator

sfc repro
this is because in splice will call deleteProperty then trigger the effect. at this time, the length is not change yet.

see https://tc39.es/ecma262/multipage/indexed-collections.html#sec-array.prototype.splice
Perform ? DeletePropertyOrThrow(O, to).
is before
Perform ? Set(O, "length", 𝔽(len - actualDeleteCount + itemCount), true).

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vue

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

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Vue

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

Uh oh!

betgar May 27, 2022

Replies: 1 comment

Uh oh!

Uh oh!

edison1105 May 31, 2022 Collaborator

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

betgar
May 27, 2022

edison1105
May 31, 2022
Collaborator