Fragments

vue3.0支持了多根节点的组件，也就是片段(Fragments)

<template>
  <header>header</header>
  <main>main</main>
  <footer>footer</footer>
</template>

 Fragment好处

1>减少了很多无意义的div
2>实现组件递归

我们定义一个组件fragment.vue

<template>
    <div>
        <honey></honey>
    </div>
</template>

<script>
    export default {
        name:'honey'
    }
</script>
<style scoped>
</style>

app.vue

<template>
   <div>
      <fragment></fragment>
   </div>
</template>

<script>
import fragment from "./components/fragment.vue"
   export default {
      components:{
         fragment
      }
   }
</script>
<style scoped>
</style>

此时浏览器会报错：超出了浏览器最大堆栈，要使用递归组件需要有条件判断

 

 

 因为再这里我们实现的是一个组件的递归，在当前组件中无限制的调用当前的自身，这就成了死递归，要是用递归组件，必须要有条件判断

app.vue

<template>
   <div>
      <fragment :data="[4,1,56,123,4,9,51,3,]"></fragment>
   </div>
</template>

 fragment.vue

<template>
    <horintal :data="leftarr" v-if="leftarr.length"></horintal>
    <div>{{m}}</div>
    <horintal :data="rightarr" v-if="rightarr.length"></horintal>
</template>
<script>
export default {
    name:'horintal',
    props:{
        data:Array
    },
    setup(props){
        // 获取数组中第一个值作为一个中间值
        let m=props.data[0]
        // 存放比m小的值
        const leftarr=[];
         // 存放比m大的值
        const rightarr=[];
        props.data.slice(1).forEach(v=>{
            v>m?rightarr.push(v):leftarr.push(v)
        })
        return {m,leftarr,rightarr}
    }
}
</script>
<style scoped>
</style>