core

Vue version 3.6.0-rc.3 Link to minimal reproduction https://play.vuejs.org/#eNqNVE1P3DAQ/SujXHbRLskiqh7SdFuKOLSHFlHEKVJlkslicJzIH8uiVf57xx8JUD7UU+yZN/abN8/ZJyd9n24tJnlS6Erx3oBGY3sQTG4+l4nRZQJb1ndqXUre0tfAHiTuzCWv7pagsIEBGtW1MKNjZhPo9IaLOibSzO/cPQQoZdVJbaDqrDTw2R0xXx08RtteoMH69KESqF/klZWSy02MN0xopFwpmX6QFTRWVoZ30sHmB7AvJQBvYB6r0i0TFg+o1FhFRS79LEXHGmXRxZtOwZyYQOWIUGL1KS4LOFqNm8Ui3gKhn+kYgqxCnN0zbibJ5p7tS/yb4AB9JkooWixccnitBy9LKSlXZGGqND3aGKRzmEHaARQt49KvaH1ztL5yU/ZXdRJpMttDJwFJRRuStMgIE9HX1hgSOa+5ZtcCazJKpEBu+VoJoh5CZRJLAPb7aXZfYHYRGafpDHK/dYrBDo6WJBy0TpvMSv8NSusZDL5Zuj8LBEY6/fp0FChic3fdv1YahiLrH2tOjGHVjStx5lQoY5G7cYRGcDCzF4T64rLGHXAZsNRxfocPY9xt/eJJIAt6Z1HwIpvmkCzphZGxG75Jb3Un6Rl6N5WJI88Fql+9E59eIbELbMqECdHd//Ax59blGKduqrtX4reaWOS0OFeoUW2xTKacYWqD1IRLn/3+ScZ7kmy72gpCv5O8QN0J6zgG2Dcra6L9BOfZfvd/BZr4pT7bkaP02NT43AaPLxP6R7hhvtX6I93j9EP0/0AqTj+Y//qR1dhwieeq63Wxp0nSmHKQtr1GBcPavbr33k10f80MO/TeWZNvgimcbyZvPp/zny0q1zURPE4/pqtDVaXHLm701ZShOAWHv0Zc3YY= Steps to reproduce 1. Open the reproduction in Chrome. 2. Open DevTools and select Memory. 3. Select Heap snapshot and take a snapshot. 4. Click Run 100 x 1,000 mount/unmount cycles. 5. Wait until is and is . 6. Click Collect garbage three times. 7. Take another heap snapshot. 8. Select Objects retained by detached DOM nodes, or filter for . The second snapshot contains detached buttons from the removed components. What is expected? Removing an item from should unmount the child component and release the component instance and its DOM. Running the same mount/unmount cycle multiple times should not increase the number of retained DOM nodes. What is actually happening? The child components are unmounted, but the parent scope still retains their component instances and DOM blocks. Retained nodes increase after every cycle and are released only when the parent app is unmounted. I also tested this in a separate Vite production build. Each sample used a new browser context and three calls before reading . also increases after every component cycle. The heap snapshot contains detached child buttons after 100 pure Vapor cycles. The retaining path is: System Info Any additional comments? The issue occurs when a item is a child component. An inline native element does not show the same growth. In , the direct component path in does not create a per-item . registers this cleanup in the active enclosing scope: Removing the item unmounts the child, but the cleanup closure remains in the parent scope. The closure retains the unmounted instance and its until the parent scope stops. The heap retaining path matches this ownership chain. Relevant source: I did not find an open or closed issue with the label for this case. Issues #15234, #15236, #14773, and #15276 cover different lifecycle, Teleport, directive, and dynamic-slot problems.

close #15282 When a v-for item is a component, skipped the per-item effect scope on the assumption that the component instance already owns one. The unmount callback that registers through then landed on the enclosing parent scope, and nothing removed it when the item was unmounted. Every add/remove cycle appended another closure holding a dead instance and its DOM, so retained nodes kept climbing until the parent scope stopped. Component items now get the same item scope as every other block, and unmounting a block stops it. Teardown of the whole list on parent disposal still works because the fragment stops any remaining item scopes. Summary by CodeRabbit Bug Fixes** Fixed cleanup handling when repeatedly mounting and unmounting component items in lists. Prevented cleanup scopes from accumulating during list updates. Improved recovery when rendering a list item fails. Ensured effects and unmount callbacks are disposed of in the correct order. Fixed cleanup behavior for dynamically rendered components and visibility changes.

#15230 fixed #15227 ("Vapor: class on a component is not normalized, so a declared prop receives an Array") by adding a guard in : I checked the compiler side (, /) and it treats and completely symmetrically: when a component receives both a static and a dynamic binding for either (`["color:red", dynamicObj]getAttrFromRawPropscomponentProps.tskey === 'class' key === 'style'normalizeRawPropdefineProps({ style: Object })classkey === 'style'normalizeStylestylenormalizeStylepackages/runtime-core/src/vnode.tsprops.style = normalizeStyle(style)stylestyle["font-weight:bold", { color: "red" }]`.