Nuxt3-Learning Road 11, Components-Dynamic Loading and Lazy Loading

Get into the habit of writing together! This is the 11th day of my participation in the "Nuggets Daily New Plan · April Update Challenge", click to view the details of the event .

Nuxt3-Learning Road 11, Components-Dynamic Loading and Lazy Loading

introduction

This series will introduce and start learning Nuxt3 with one of my understandings .

In the middle, I will insert the messy knowledge .

components

Nuxt3 's component concept is similar to Vue 's component concept, but Nuxt3 also has a big feature, which is lazy loading .

lazy loading

I believe that lazy loading is no stranger to everyone. It is one of the most reliable helpers in our performance optimization.

But what is lazy loading of Nuxt3 components ? Is there really lazy loading?

Look at the official code here

<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>
复制代码

Can you see lazy loading from here?

It didn't feel the same to me as I imagined. This is a v-if to control the rendering of the component acridine

I don't quite understand the lazy loading of Nuxt3 components, and the students who meet will also hope to give a good answer.

dynamic loading

Dynamic loading of components, this is still very practical. Usage is similar to dynamic component usage in Vue3.

However, it should be noted that when we introduce a component and assign it to a variable, we need to pass this Api named resolveComponent provided in Vue3 . Usage:

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

Note that the naming is strict, it is recommended to use the above, which is more secure and will not make mistakes easily.

The following is <component :is="xxx" />used to dynamically load components.

Add the relevant code directly in the default.vue page

<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>
复制代码

Here you can see that I used a shallowRef . I used ref at the beginning , but it is not recommended. Here I use the api of shallowRef .

The overall meaning of the code is to display the TheHeader component by default, but by clicking the toggle button, the component is changed. Adapted to TheFooter this component. Controlled by the variable flag

Click the toggle button

Summarize

Learned Nuxt3 components - dynamic components and lazy loading. It allows us to more flexibly control the use of different components on the page, improve the efficiency of development, and deal with complex interactive scenarios.