Vue3 Development Solutions(Ⅱ)

Vue series of articles

• Understanding v-memo in Vue3
• Understanding Suspense in Vue3
• Understanding reactive, isReactive and shallowReactive in Vue3
• Understanding defineModel in Vue3
• Understanding Fragment in Vue3
• Understanding Teleport in Vue3
• Understanding Async Components in Vue3
• Understanding v-model in Vue3
• Understanding watch and watchEffect in Vue3
• Understanding and Practice of the Vue3 Composition API
• Understanding Hooks in Vue3 (Why use hooks)
• Vue3- Use and Encapsulation Concept of Custom Hooks Functions
• Understanding the various ref in Vue3: toRef, toRefs, isRef, unref, etc
• Vue3 Development Solutions(Ⅰ)
• Vue3 Development Solutions(Ⅱ)
• The details about Vue3 that you didn’t know
• Vue3 develop document
• 28 Vue Interview Questions with Detailed Explanations

Previous：Vue3 Development Solutions(Ⅰ)

10. Long list loading component

Mainly by monitoring whether the bottom DOM appears in the visible area, and then making data requests to handle some special situations. Usevue’s useIntersectionObserver api is used, which simply encapsulates the IntersectionObserver api, allowing us to more easily implement cross-monitoring of the visible area.

It mainly provides isLoading to display and load more dynamic icons, isFinished to determine whether the data request is completed, and load to request data props for the event.

<script setup>
import { useVModel, useIntersectionObserver } from '@vueuse/core'
import { onUnmounted, ref, watch } from 'vue'

const props = defineProps({
  isLoading: {
    type: Boolean,
    default: false
  },
  isFinished: {
    type: Boolean,
    default: false
  }
})

// Define loading binding event, load more event
const emits = defineEmits(['update:isLoading', 'load'])

const loading = useVModel(props, 'isLoading', emits)
// Load more
const loadingRef = ref(null)
//…