我碰到了一个v-if和自定义指令挺有趣的问题，不知道是不是bug

[yuanzengding-1234]

我们项目中需要自定义指令通过权限来判断这个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，但是没有理解为什么内部两个元素的时候就没有报错了，就很奇怪

[JohnieXu]

跟踪了一下发现 Cannot read properties of null 报错是patchBlockChildren这里 container 为 null 导致

对比了一个 <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 v-if="status === 0">
    <div v-del-dom>aaa</div>
    <div>ccc</div>
  </template>
...

我猜测与 vue 的模板编译器对 template 里面只有一个直接元素这个场景的处理逻辑有关，不是很理解这是为什么，有人能解答一下吗？

[JohnieXu]

A reproduction for this https://stackblitz.com/edit/vitejs-vite-jazt6epq?file=src%2Fcomponents%2FDemoCompunent.vue