New components of VUE3.0_Xavier-Xiao’s Blog

class=”markdown_views prism-atom-one-dark”>

1.Fragment (fragment)

• In Vue2: Components must have a root tag
• In Vue3: components can have no root tag, and multiple tags will be included in a Fragment virtual element
• Benefits: Reduce label levels, reduce memory usage

<template
     h2aaaa</h2>
     h2aaaa</h2>
 </template
 

2. Teleport

• Teleport provides a clean way to insert and display the html of the component under a specific label (probably body) outside the interface of the parent component

2.1App.vue

<template
   h2App</h2>
   modal-button</modal-button
 </template

 script lang="ts"
 import ModalButton from './ModalButton.vue'

 export default {
      
   setup() {
      
     return {
      
     }
   },

   components: {
      
     ModalButton
   }
 }
 </script>
 

2.2 Subcomponents

<template
   h1Subcomponent</h1>
   button @click  ="modalOpen = true">Display dialog box</button  span>
   
   Teleport to="body"
     div class="modal" v-if=  "modalOpen"
       pDialog box</p>
       button @click  ="modalOpen = false"Close dialog</button
     </div
   </Teleport
 </template

 script
 import {
       ref } from "  vue";

 function useFeatureX(foo) {
      
   const length = computed(() =>  {
      
     return foo.value * 2;
   });

   return length;
 }
 export default defineComponent({
      
   name: "test component",
   props: {
      },
   setup(props, {
       attrs, emit, slots }) {
      
     //Control dialog box display or hide
     let modalOpen = ref(false);
     return {
      
       modalOpen,
     };
   },
   mounted() {
      },
   methods: {
      },
 });
 </script>
 

3.Suspense (not sure)

• They allow our application to render some fallback content while waiting for an asynchronous component, allowing us to create a smooth user experience

3.1App.vue

<template
   Suspense
     template v-slot:default
       AsyncComp
       <!--  -->
     </template

     template v-slot:fallback
       h1LOADING...</h1
     </template
   </Suspense
 </template

 script lang="ts"
 /*
 Asynchronous Components + Suspense Components
 */
 // import synchronously
 // import AsyncComp from './AsyncComp.vue';
 // import synchronously
 import AsyncAddress from './AsyncAddress.vue';
 import {
       defineAsyncComponent } from '  vue';
 // Vue3.0 dynamically imports component writing method
 const AsyncComp = defineAsyncComponent(() =>  import('./AsyncComp.vue'));
 export default {
      
   setup() {
      },
   components: {
      
     AsyncComp,
     AsyncAddress
   }
 }
 </script>
 

3.2AsyncComp.vue

<template
   h2AsyncComp22</h2>
   p{
    {msg}}</p>
 </template

 script lang="ts"

 export default {
      
   name: 'AsyncComp',
   setup () {
      
     // return new Promise((resolve, reject) => {
      
     // setTimeout(() => {
      
     // resolve({
      
     // msg: 'abc'
     // })
     // }, 2000)
     // })
     return {
      
       msg: 'abc'
     }
   }
 }
 </script>
 

3.3AsyncAddress.vue

<template
 h2{
    {data}}</h2>
 </template

 script lang="ts"
 import axios from 'axios'
 export default {
      
   async setup() {
      
     const result = await axios.get('/data/address  .json')
     return {
      
       data: result.data
     }
   }
 }
 </script>
 

></template

script lang=“ts“
import axios from ‘axios’
export default {

async setup() {

const result = await axios.get(‘/data/address .json’)
return {

data: result.data
}
}
}
</script>