vue3中Fragment特性的一个bug，需要留意的注意事项

本文主要是介绍vue3中Fragment特性的一个bug，需要留意的注意事项，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

vue3中的Fragment 模版碎片特性是什么，简单的理解就是template模板代码不在像vue2中那样必须在根节点在包裹一层节点了。

vue2写法

<template><div><h1>标题</h1><p>正文内容</p></div>
</template>

vue3写法

<template><h1>标题</h1><p>正文内容</p>
</template>

vue3中Fragment特性的一个bug（需要留意的问题）

组件HelloWorld:

<template><h1>2333</h1><h1>666</h1>
</template>

组件HelloWorld的使用

<template><HelloWorld v-if="showBool" /> <!--v-if正常--><HelloWorld v-show="showBool" /> <!--v-show异常,showBool为false还是显示了-->
</template>
<script lang="ts" setup>
import HelloWorld from '../components/HelloWorld.vue'
const showBool = ref(false);
<scrip>

同时控制台waring :

 [Vue warn]: Runtime directive used on component with non-element root node. The directives will not function as intended. 

利用开发者模式看dom结构，发现v-show的display:none属性完全是没有的。

解决方法

还是遵循vue2的写法那样，根节点在包裹一层就行了。
组件：

<template><div><h1>标题</h1><p>正文内容</p></div>
</template>

dom结构发现v-show的display:none属性有了。

目前vue3.4.15这个问题仍然是没有解决的。在使用的时候还是需要注意。

这篇关于vue3中Fragment特性的一个bug，需要留意的注意事项的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---