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属性有了。
文章来源：https://www.toymoban.com/news/detail-814553.html
目前vue3.4.15这个问题仍然是没有解决的。在使用的时候还是需要注意。文章来源地址https://www.toymoban.com/news/detail-814553.html
到了这里，关于vue3中Fragment特性的一个bug，需要留意的注意事项的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
