学习笔记-Vue3新增组件

ZJQ
203 阅读3分钟

Vue3推出了一些新的组件和功能，这些组件和功能有助于开发人员更加高效和方便地构建应用程序。以下是Vue 3中新增的一些组件：

Fragment组件

在vue2中，当我们在开发一个组件的时候，需要一个根标签将组件下所有的dom节点包裹起来，否则vue编译过程中会报错的。

<template>
    <p>文本1</p>
    <p>文本2</p>
    <p>文本3</p>
</template>

image.png

而在vue3中，组件允许没有根标签，内部会自动将多个标签包裹在一个Fragment虚拟元素中。

image.png

可以看到，vue3在渲染的过程中，会给组件套上Fragment组件。在dom中，Fragment组件不会被渲染为任何元素，而只是作为多个子组件的容器，这有助于提高应用程序的性能，因为它可以减少dom操作的数量和复杂性，同时可帮助开发人员优化代码可读性。

Suspense组件

Suspense组件作用是可以使在等待异步组件过程中额外渲染一些的内容，提供更好的用户体验。

在vue2中，当我们需要处理由异步数据加载引起的UI更新时，可能需要手动处理各种加载状态，例如：

<div v-if=loading>
    loading...
</div>
<div>
    <!-- 内容 -->
</div>

应用调用api请求服务器数据时，在客户端显示loading效果

image.png

请求完成后，我们需要手动修改loading的值隐藏loading效果，展示内容。

image.png

这种方式需要编写额外的代码去控制状态，并且容易出错。

而在vue3中，Suspense组件允许我们在等待异步数据加载时，自动显示指定的占位符组件，例如loading效果和其他UI元素。

  1. 加载异步组件
<template>
  <div>
    <Suspense>
        <template #default>
            <Child />
        </template>
        <template #fallback>
            <h1>加载中...</h1>
        </template>
    </Suspense>
  </div>
</template>

<script>
import { defineAsyncComponent } from 'vue'
const Child = defineAsyncComponent(() => import('./child.vue'))

export default {
    name: 'SuspenseDemo',
    components: {
        Child
    }
}
</script>
  1. 异步请求
// 父组件
<template>
  <div>
    <Suspense>
        <template #default>
            <Child />
        </template>
        <template #fallback>
            <h1>加载中...</h1>
        </template>
    </Suspense>
  </div>
</template>


// 子组件Child
<template>
  <p>{{msg}}</p>
</template>
<script>
export default {
    name: 'child',
    async setup(){
        const promise = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('success')
            }, 2000);
        })
        const msg = await promise
        return {
            msg
        }
    }
}
</script>

总之，Vue3的Suspense组件通过提供更好的用户体验，而帮助开发人员更容易地处理由异步操作引起的UI更新。

Teleport组件

Teleport组件可以使我们更轻松地处理在应用中的dom元素的位置，尤其是在处理模态框，提示框等常见的UI组件时。

在Vue2中，当我们需要在应用中有效地处理dom元素的位置时，通常需要使用Vue的特殊指令，例如v-if，v-show和v-for等指令来控制dom节点的插入和删除。 但是当我们需要处理可移动的dom元素时，手动管理dom插入和删除操作这样做就变得更加困难和笨拙。

而在Vue3中，使用Teleport组件可以更轻松地解决这个问题。Teleport组件可以将组件的dom元素传送到应用程序的任何位置，使我们可以更灵活地管理dom插入和删除操作，而不必手动处理逻辑。

以下是使用Teleport组件的基本示例：

// index.html
<body>
    <div id="app"></div>
    <div id="footer"></div>
</body>


// vue组件
<template>
    <teleport to="#footer">
        <span style="color: red">这是第一段文字</span>
    </teleport>
    <div style="color: green">这是第二段文字</div>
</template>

image.png

image.png

Teleport组件的to属性可以指定的对象格式：

  • id：
<teleport to="#footer">
  • class:
<teleport to=".className">
  • data:
<teleport to="[data-meta]">
  • 动态
<teleport :to="props">

并且可以通过绑定disabled属性去控制组件是否生效

<template>
    <teleport to="#footer" :disabled="toggle">
        <span style="color: red">这是第一段文字</span>
    </teleport>
    <div style="color: green">这是第二段文字</div>
    <button @click="handler">控制</button>
</template>

<script>
import { ref } from 'vue'
export default {
    name: 'TeleportComponent',
    setup(){
        const toggle = ref(true)

        const handler = () => {
            toggle.value = !toggle.value
        }
        
        return {
            toggle,
            handler
        }
    }
}
</script>

toggle为false：

image.png

toggle为true：

image.png

总之，Vue3的Teleport组件通过提供更灵活地管理dom插入和删除操作，而使开发人员更容易地处理可移动的dom元素，例如模态框，菜单，提示框等常见的UI组件。

总结

Vue 3的新增组件提供了许多强大的功能，这些功能可以帮助开发人员更好地编写可重用的组件和提高应用程序的性能。

avatar
文章
阅读
粉丝