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 天前
UNIAPP如何自定义全局方法?
javascript·typescript·uni-app·vue·vue3·vite·hooks
路光.5 天前
统一配置管理根据不同域名展现不同信息或相近信息 Vue3类单例模式封装
前端·单例模式·typescript·vue3
Wiktok14 天前
【pure-admin】pureadmin的登录对接后端
vue3·pureadmin
Wiktok15 天前
【Wit】pure-admin后台管理系统前端与FastAPI后端联调通信实例
前端·vue3·pureadmin
Wiktok16 天前
前后端开发Mock作用说明,mock.ts
前端·mock·vue3
知识分享小能手16 天前
React学习教程,从入门到精通,React AJAX 语法知识点与案例详解(18)
前端·javascript·vue.js·学习·react.js·ajax·vue3
Wiktok17 天前
pureadmin的动态路由和静态路由
前端·vue3·pureadmin
Jinuss17 天前
Vue3源码reactivity响应式篇之watch实现
前端·vue3
知识分享小能手17 天前
React学习教程,从入门到精通,React 组件生命周期详解(适用于 React 16.3+,推荐函数组件 + Hooks)(17)
前端·javascript·vue.js·学习·react.js·前端框架·vue3
哆啦A梦158818 天前
uniapp分包实现
前端·vue.js·uni-app·vue3