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/[email protected]/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

{{title}}

Replies: 1 comment

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Vue

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

Replies: 1 comment

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