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…