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

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

vue2写法
html 复制代码
<template>
  <div>
    <h1>标题</h1>
    <p>正文内容</p>
  </div>
</template>
vue3写法
html 复制代码
<template>
    <h1>标题</h1>
    <p>正文内容</p>
</template>
vue3中Fragment特性的一个bug(需要留意的问题)

组件HelloWorld:

html 复制代码
<template>
    <h1>2333</h1>
    <h1>666</h1>
</template>

组件HelloWorld的使用

html 复制代码
<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的写法那样,根节点在包裹一层就行了。

组件:

html 复制代码
<template>
  <div>
    <h1>标题</h1>
    <p>正文内容</p>
  </div>
</template>

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

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

相关推荐
叫我阿柒啊2 天前
从Java全栈到前端框架的全面实战:一次真实面试的深度解析
java·spring boot·缓存·微服务·消息队列·vue3·rest api
叫我阿柒啊2 天前
从Java全栈到Vue3实战:一次真实面试中的技术探索
java·数据库·spring boot·微服务·typescript·vue3·restful
叫我阿柒啊2 天前
从Java全栈到前端框架:一位程序员的实战之路
java·spring boot·微服务·消息队列·vue3·前端开发·后端开发
叫我阿柒啊3 天前
从Java全栈到云原生:一场技术深度对话
java·spring boot·docker·微服务·typescript·消息队列·vue3
叫我阿柒啊3 天前
从Java全栈到Vue3实战:一次真实面试的深度复盘
java·spring boot·微服务·vue3·响应式编程·前后端分离·restful api
叫我阿柒啊3 天前
从Java全栈到前端框架:一次真实的面试对话
java·spring boot·微服务·前端框架·vue3·全栈开发
叫我阿柒啊3 天前
Java全栈开发工程师面试实战:从基础到微服务的完整技术演进
java·spring boot·微服务·前端框架·vue3·全栈开发·面试技巧
Lsx-codeShare4 天前
前端数据可视化:基于Vue3封装 ECharts 的最佳实践
前端·javascript·echarts·vue3·数据可视化
叫我阿柒啊5 天前
从全栈开发到微服务架构:一位Java工程师的实战经验分享
java·ci/cd·kafka·mybatis·vue3·springboot·fullstack
叫我阿柒啊5 天前
Java全栈工程师的面试实战:从基础到复杂问题的完整解析
java·数据库·spring boot·微服务·vue3·测试·全栈开发