The `el.vnode` is equal to the last `el.vnode` after hmr(setupRenderEffect update), but `el.__vueParentComponent.subTree` is not equal to the last

FoxDaxian

Dec 10th 2021

Version

3.2.24

Reproduction link

Steps to reproduce

<template>
  <div @click="log">after</div>
 // and then modify as below
 // <div @click="log">after</div>
</template>

<script setup>
let lastVnode;
let lastChildren;

function log (e) {
    const el = e.target;
    if (lastVnode) {
        console.log(lastVnode === el.__vnode, '__vnode');
        console.log(lastChildren === el.__vueParentComponent.subTree.children, 'children');
    }
    lastVnode = el.__vnode;
    lastChildren = el.__vueParentComponent.subTree.children;
}
</script>

<style>
</style>

What is expected?

before:

true '__vnode'

true 'children'

after:

false '__vnode'. <- this line

false 'children'

What is actually happening?

before:

true '__vnode'

true 'children'

after:

true '__vnode' <- this line

false 'children'

I'm making dev tool, this tool need find index of the child vnode in the parent vnode. it is works when first render. but after hmr it is not work. since subTree changed but el.__vnode is not

posva