Deleting el via a custom directive and patching throws an error due to parent being null. #13743
Description
Vue version
3.5.18
Link to minimal reproduction
无，需要自己创建项目复现
Playground
Steps to reproduce
我们项目中需要自定义指令通过权限来判断这个dom存不存在，当权限没有的时候会调用el.remove()来删除这个dom，这个问题就是出在没有权限的时候，我极度简化代码后大概是这样
图片中的status控制着template渲染，v-del-dom会在mounted后删除div。
<template>
<template v-if="status === 0">
<div v-del-dom>aaa</div>
</template>
<template v-if="status === 1">
<div v-del-dom>bbb</div>
</template>
</template>
<script setup lang="ts">
const props = withDefaults(
defineProps<{
status?: 0 | 1;
}>(),
{
status: 0,
}
);
const vDelDom = {
mounted(el) {
el.remove();
},
};
</script>
<style lang="scss" scoped></style>下面是调用这个组件的代码
<script setup lang="ts">
import { ref } from "vue";
import DemoCompunent from "./DemoCompunent.vue";
const status = ref<0 | 1>(0);
setTimeout(() => {
status.value = 1;
}, 1000);
</script>
<template>
<DemoCompunent :status="status" />
</template>
<style scoped></style>就是status状态在1秒后变成状态1
现在会有报错下面是报错截图
当DemoCompunent组件中代码调整为下面这样，他就不报错了
<template>
<template v-if="status === 0">
<div v-del-dom>aaa</div>
<div v-del-dom>aaa</div>
</template>
<template v-if="status === 1">
<div v-del-dom>bbb</div>
<div v-del-dom>bbb</div>
</template>
</template>
<script setup lang="ts">
const props = withDefaults(
defineProps<{
status?: 0 | 1;
}>(),
{
status: 0,
}
);
const vDelDom = {
mounted(el) {
el.remove();
},
};
</script>
<style lang="scss" scoped></style>我跟了代码后发现vue的这行代码会把那个v-if所在的template当成一个元素
当我改变status后 找这个template父元素的时候发现这个父元素是个null，但是没有理解为什么内部两个元素的时候就没有报错了，就很奇怪
What is expected?
控制台无报错
What is actually happening?
现在控制台报错
System Info
Any additional comments?
No response