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

相关推荐
sen_shan10 小时前
Vue3+Vite+TypeScript+Element Plus开发-04.静态菜单设计
前端·javascript·typescript·vue3·element·element plus·vue 动态菜单
qq_308562312 天前
vue3 中引入tinymce富文本
vue3·富文本·tinymce
sen_shan3 天前
Vue3+Vite+TypeScript+Element Plus开发-02.Element Plus安装与配置
前端·javascript·typescript·vue3·element·element plus
路光.4 天前
Vue3实现锚点定位
前端·javascript·vue.js·vue3
wocwin7 天前
uniapp微信小程序封装navbar组件
微信小程序·uni-app·vue3·组件封装·navbar
留白声10 天前
uniapp主题切换功能,适配H5、小程序
前端·css·小程序·uni-app·vue3·主题切换
dr李四维13 天前
uniapp从 vue2 项目迁移到 vue3流程
javascript·vue.js·uni-app·vue3·vue2·vuex·vue迁移
Jiaberrr17 天前
Vue 3 中使用 vue - pdf - embed + vue3 - pdfjs 在线预览 PDF
前端·javascript·vue.js·前端框架·pdf·vue3
努力做大神19 天前
uniapp vue3项目定义全局变量,切换底部babar时根据条件刷新页面
uni-app·vue3
柒@宝儿姐20 天前
如何判断一个项目用的是哪个管理器
前端·javascript·vue.js·vue3