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

更新时间：2024年01月25日 08:34:15 作者：天渺工作室

这篇文章主要介绍了vue3中Fragment特性的一个bug，需要留意的注意事项示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

vue3中的Fragment 模版碎片特性

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，需要留意的注意事项的详细内容，更多关于vue3中Fragment bug的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Vue实现文本编译详情
这篇文章主要介绍了Vue实现文本编译详情，文章围绕主题展开详细的内容介绍，具有一定的参考价值，感兴趣的小伙伴可以参考一下，希望对你的学习有所帮助
2022-08-08
vue简单封装axios插件和接口的统一管理操作示例
这篇文章主要介绍了vue简单封装axios插件和接口的统一管理操作,结合具体实例形式分析了vue中axios插件安装、配置及接口统一管理具体操作技巧,需要的朋友可以参考下
2020-02-02
Vue自定义表单验证(rule，value，callback)使用详解
这篇文章主要介绍了Vue自定义表单验证(rule，value，callback)使用详解,今天我们讲一讲自定义验证规则具体使用场景和它的三个参数意思和使用，需要的朋友可以参考下
2023-07-07
Vuex的五大核心详细讲解
这篇文章主要为大家介绍了vuex的五个核心概念和基本使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-09-09
详解如何在Vue项目中导出Excel
这篇文章主要介绍了如何在Vue项目中导出Excel，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
Vue页面堆栈管理器详情
这篇文章主要介绍了Vue页面堆栈管理器
2021-10-10
详解为什么Vue中的v-if和v-for不建议一起用
这篇文章主要介绍了面试官：为什么Vue中的v-if和v-for不建议一起用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-01-01
vue中ref()和reactive()区别小结
本文主要介绍了vue中ref()和reactive()区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2025-07-07
Vue中util的工具函数实例详解
本文通过实例代码给大家介绍了Vue中util的工具函数，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-07-07
Vue中el-table条件渲染防止样式乱掉(解决方法)
这篇文章主要介绍了Vue中el-table条件渲染防止样式乱掉问题,通过使用:key="Math.random()" 可解决样式错乱问题,此key属性是vue自带的特殊属性,主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes,依次来提升页面渲染性能,感兴趣的朋友一起看看吧
2023-11-11