Svelte中images2意外与images1值相同的问题排查

我遇到一个奇怪的问题：原本期望images2被赋值为galleryData.splice(0, 3)的结果，但实际它和images1的值完全一样。

虽然第二次console.log(images2)确实打印出了galleryData.splice(0, 3)的返回值，但页面上images2的表现却和images1一致，这完全不符合我的预期。

以下是我的代码：

<script>
    export let galleryData

    //Logic for organizing images
    let showAdditionalImages = false
    let images1 = []
    let images2 = []
    if(galleryData.length >= 3) {
        console.log("images2")
        console.log(images2)
        images1 = galleryData.slice(0, 3)
        images2 = galleryData.splice(0, 3)
        console.log("images2")
        console.log(images2)
        console.log("galleryData.splice")
        console.log(galleryData.splice(0, 3))
    } else {
        images1 = galleryData
    }


    let enlargeBool = false
    let enlargedImage
    const enlargeImage = (imageData) => {
        enlargedImage = {
            URL: imageData.URL,
            name: imageData.name
        }
        enlargeBool = true
    }
</script>

<main>
    <div id="gallery" class="gallery">
        <!--Preview for showing the list of images-->
        {#each images1 as imageData}
            <button on:click={() => {enlargeImage(imageData)}} class="gallery-image">
                <span>{imageData.name}</span>
                <img src={imageData.URL} alt={imageData.name}/>
            </button>
        {/each}
        {#if images2.length > 0}
            {#if showAdditionalImages}
                {#each images2 as imageData}
                    <button on:click={() => {enlargeImage(imageData)}} class="gallery-image">
                        <span>{imageData.name}</span>
                        <img src={imageData.URL} alt={imageData.name}/>
                    </button>
                {/each}
            {:else}
                <button class="load-images" on:click={() => {showAdditionalImages = true}}>Load Additional Images</button>
            {/if}
        {/if}
        <!--Code for the enlarged image when clicked-->
        {#if enlargeBool}
            <button on:click={() => {enlargeBool = false}} class="enlarged-image">
                <div>{enlargedImage.name}</div>
                <img src={enlargedImage.URL} alt={enlargedImage.name}/>
            </button>
        {/if}
    </div>
</main>

我已经尝试过两种方法，但问题依然存在：

• 把图片分组的逻辑放到onMount函数里执行
• 用for循环手动给images2赋值

这让我非常困惑，不知道问题出在哪里。

内容的提问来源于stack exchange，提问作者Ant_Pearl