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这个问题仍然是没有解决的。在使用的时候还是需要注意。

相关推荐
CherishTaoTao1 天前
Vue3 keep-alive核心源码的解析
前端·vue3
虞泽2 天前
鸢尾博客项目开源
java·spring boot·vue·vue3·博客
前端杂货铺3 天前
简记Vue3(三)—— ref、props、生命周期、hooks
vue.js·vue3
静谧的美4 天前
vue3-element-admin 去掉登录
vue.js·前端框架·vue3·去掉登录
朝阳394 天前
vue3【组件封装】确认对话框 Modal
vue3·组件封装
朝阳394 天前
vue3【组件封装】消息提示 Toast
vue3·消息提示·组件封装
占星安啦5 天前
【electron+vue3】使用JustAuth实现第三方登录(前后端完整版)
electron·vue3·登录·justauth·第三方登录
前端烨5 天前
element-plus版本过老,自写选项弹框增删功能
前端·javascript·css·vue3·element-plus
前端杂货铺5 天前
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
vue·vue3·简记