vue3中Fragment特性的一個bug需要注意事項
更新時間：2024年01月25日 08:34:15 作者：天渺工作室
這篇文章主要介紹了vue3中Fragment特性的一個bug，需要留意的注意事項示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
vue3中的Fragment 模版碎片特性
vue3中的Fragment 模版碎片特性是什么，簡單的理解就是template模板代碼不在像vue2中那樣必須在根節(jié)點在包裹一層節(jié)點了。
vue2寫法
<template>
<div>
<h1>標(biāo)題</h1>
<p>正文內(nèi)容</p>
</div>
</template>vue3寫法
<template>
<h1>標(biāo)題</h1>
<p>正文內(nèi)容</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.
利用開發(fā)者模式看dom結(jié)構(gòu)，發(fā)現(xiàn)v-show的display:none屬性完全是沒有的。
解決方法
還是遵循vue2的寫法那樣，根節(jié)點在包裹一層就行了。
組件：
<template>
<div>
<h1>標(biāo)題</h1>
<p>正文內(nèi)容</p>
</div>
</template>dom結(jié)構(gòu)發(fā)現(xiàn)v-show的display:none屬性有了。
目前vue3.4.15這個問題仍然是沒有解決的。在使用的時候還是需要注意。
以上就是vue3中Fragment特性的一個bug，需要留意的注意事項的詳細(xì)內(nèi)容，更多關(guān)于vue3中Fragment bug的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
公共Hooks封裝useTableData表格數(shù)據(jù)實例
這篇文章主要為大家介紹了公共Hooks封裝useTableData表格數(shù)據(jù)實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
Vue配置marked鏈接添加target="_blank"的方法
這篇文章主要介紹了Vue配置marked鏈接添加target="_blank"的方法，文中給大家提到了vue實現(xiàn)類似target="_blank"打開新窗口的代碼,感興趣的朋友參考下吧2019-07-07
這篇文章主要介紹了keep-alive不能緩存多層級路由菜單問題解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
Vue.js中使用${}實現(xiàn)變量和字符串的拼接方式
這篇文章主要介紹了Vue.js中使用${}實現(xiàn)變量和字符串的拼接方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要為大家詳細(xì)介紹了Vue標(biāo)尺插件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要介紹了Vuex的actions屬性的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
VUE3中h()函數(shù)和createVNode()函數(shù)的使用解讀
這篇文章主要介紹了VUE3中h()函數(shù)和createVNode()函數(shù)的使用解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Pinia是一個專為Vue3設(shè)計的現(xiàn)代化狀態(tài)管理庫,本文主要介紹了vue3項目使用pinia狀態(tài)管理器的使用,具有一定的參考價值,感興趣的可以了解一下2024-05-05
這篇文章主要介紹了vue項目中如何引入cesium問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vue中動態(tài)select的使用方法,結(jié)合實例形式分析了vue.js使用動態(tài)select創(chuàng)建下拉菜單相關(guān)實現(xiàn)技巧與操作注意事項,需要的朋友可以參考下2019-10-10