快捷導航

vue3中Fragment特性的一個bug需要注意事項

更新時間：2024年01月25日 08:34:15 作者：天渺工作室

這篇文章主要介紹了vue3中Fragment特性的一個bug，需要留意的注意事項示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

vue3中的Fragment 模版碎片特性

vue3中的Fragment 模版碎片特性是什么，簡單的理解就是template模板代碼不在像vue2中那樣必須在根節(jié)點在包裹一層節(jié)點了。

vue2寫法

<template>
  <div>
    <h1>標題</h1>
    <p>正文內(nèi)容</p>
  </div>
</template>

vue3寫法

<template>
    <h1>標題</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>標題</h1>
    <p>正文內(nèi)容</p>
  </div>
</template>

dom結(jié)構(gòu)發(fā)現(xiàn)v-show的display:none屬性有了。

目前vue3.4.15這個問題仍然是沒有解決的。在使用的時候還是需要注意。

以上就是vue3中Fragment特性的一個bug，需要留意的注意事項的詳細內(nèi)容，更多關(guān)于vue3中Fragment bug的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

Vue實現(xiàn)文本編譯詳情
這篇文章主要介紹了Vue實現(xiàn)文本編譯詳情，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，感興趣的小伙伴可以參考一下，希望對你的學習有所幫助
2022-08-08
vue簡單封裝axios插件和接口的統(tǒng)一管理操作示例
這篇文章主要介紹了vue簡單封裝axios插件和接口的統(tǒng)一管理操作,結(jié)合具體實例形式分析了vue中axios插件安裝、配置及接口統(tǒng)一管理具體操作技巧,需要的朋友可以參考下
2020-02-02
Vue自定義表單驗證(rule，value，callback)使用詳解
這篇文章主要介紹了Vue自定義表單驗證(rule，value，callback)使用詳解,今天我們講一講自定義驗證規(guī)則具體使用場景和它的三個參數(shù)意思和使用，需要的朋友可以參考下
2023-07-07
Vuex的五大核心詳細講解
這篇文章主要為大家介紹了vuex的五個核心概念和基本使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-09-09
詳解如何在Vue項目中導出Excel
這篇文章主要介紹了如何在Vue項目中導出Excel，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-04-04
Vue頁面堆棧管理器詳情
這篇文章主要介紹了Vue頁面堆棧管理器
2021-10-10
詳解為什么Vue中的v-if和v-for不建議一起用
這篇文章主要介紹了面試官：為什么Vue中的v-if和v-for不建議一起用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-01-01
vue中ref()和reactive()區(qū)別小結(jié)
本文主要介紹了vue中ref()和reactive()區(qū)別小結(jié),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
2025-07-07
Vue中util的工具函數(shù)實例詳解
本文通過實例代碼給大家介紹了Vue中util的工具函數(shù)，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-07-07
Vue中el-table條件渲染防止樣式亂掉(解決方法)
這篇文章主要介紹了Vue中el-table條件渲染防止樣式亂掉問題,通過使用:key="Math.random()" 可解決樣式錯亂問題,此key屬性是vue自帶的特殊屬性,主要用在 Vue 的虛擬 DOM 算法,在新舊 nodes 對比時辨識 VNodes,依次來提升頁面渲染性能,感興趣的朋友一起看看吧
2023-11-11