一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第11天，点击查看活动详情。

Nuxt3-学习之路 11，组件-动态加载及懒加载

引言

本系列会以我的一个理解，来介绍并开始学习 Nuxt3。

中间会插入自己所联系到的乱七八糟的 知识点。

组件

Nuxt3 的组件概念与 Vue 的组件概念类似，但是 Nuxt3 还有一个很大的特点，就是 懒加载。

懒加载

相信 懒加载 对大家已经不陌生了，它是我们性能优化方面最可靠的帮手之一。

但是 Nuxt3 组件的 懒加载 是什么？真的有懒加载么？

这里先看官方代码

<template>
  <div>
    <h1>Mountains</h1>
    <LazyMountainsList v-if="show" />
    <button v-if="!show" @click="show = true">Show List</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  }
}
</script>
复制代码

各位能从这里能看出来懒加载吗？

给我的感觉跟我想象的不太一样。这是 v-if 来控制组件的一个渲染吖

Nuxt3 组件的懒加载这块没有太明白，会的同学还望给出好的答案。

动态加载

组件的动态加载，这个还是很实用的。用法与 Vue3 中的动态组件用法是类似的。

但是要注意，我们引入组件并赋值给一个变量，是需要通过 Vue3 里面提供的一个名为 resolveComponent 的这个 Api，用法：

const TheHeader = resolveComponent('TheHeader')
const TheHeader = resolveComponent('the-header')
复制代码

注意，命名是严格的，推荐使用上面的，比较稳妥，不会轻易出错。

下面通过 <component :is="xxx" /> 来进行动态加载组件。

直接在 default.vue 这个页面中，添加相关代码

<template>
    <div>
      <h2>使用 动态加载</h2>
      <button @click="onChange">切换</button>
      <component :is="currentComponent" />
    </div>
</template>
<script setup>
    const TheHeader = resolveComponent('TheHeader')
    const TheFooter = resolveComponent('TheFooter')

    const flag = ref(false)
    const currentComponent = shallowRef(TheHeader)

    const onChange = () => {
      flag.value = !flag.value
      currentComponent.value = flag.value ? TheHeader : TheFooter
    }
</script>
复制代码

这里可以看到我是用了一个 shallowRef，刚开始使用的是ref，但是不推荐，这里就是用了 shallowRef 这个 api。

代码的整体意思，就是默认展示 TheHeader 这个组件，但是通过点击切换按钮，使得组件进行改变。改编成 TheFooter 这个组件。通过变量 flag 来进行控制

点击切换按钮

总结

学习了 Nuxt3 的组件-动态组件及懒加载。可以让我们可以更加灵活的控制页面使用不同的组件，提高开发的效率，及应对复杂交互场景。