preface

Lazy data loading is one of the most common scenarios in web pages, which can improve the response speed of web pages and avoid loading all resources as soon as the web page is opened, which can bring users a good experience. How to implement lazy loading of component data

Why do we need lazy loading of component data?

The viewport that the user can see just after opening the web page is limited, load the components that appear in the user viewport, and do not load those that do not enter the viewport.

  • The speed of web page loading is improved, and users load whatever part of resources they see
  • Improve user experience

How to implement lazy loading of component data?

1. Prepare

UseIntersectionObserver in @vueuse/ Core can be used to monitor the behavior of entering the visible area, but it must be implemented in conjunction with the combined API of Vue3.0.

Liverpoolfc.tv: vueUse

Note: Version 5.3.0 is used here, and you can choose according to your own situation.

Run NPM i@vueuse /[email protected] on any terminal in the root directory of the project

2. The analysis

First analyze the useIntersectionObserver function

The code is as follows (example) :

// const {stop} = useIntersectionObserver(target, fn, options)
// target specifies the DOM element to be listened on
// The first parameter of the callback function isIntersecting indicates that the monitored element has entered the viewable area.
// 3. Indicates the configuration option
// stop is the action of stopping to see whether to enter or move out of the viewable area
const { stop } = useIntersectionObserver(
  // Target is the dom container to observe. It must be a DOM container and a VUe3.0 bound DOM object
  target,
  // Whether isIntersecting enters the visible area. If true, it enters and if false, it moves out
  // observerElement the DOM to observe
  ([{ isIntersecting }], observerElement) = > {
    // It can be judged by isIntersecting and then do business},)Copy the code

3. Code demonstration

Code examples (below) :

// Encapsulates a generic method to implement lazy loading of data
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'

export const useLazyData = (apiFn) = > {
  // Target represents the outermost div element of the component
  const target = ref(null)
  // Lazily load the data returned by the interface
  const result = ref([])
  // Listen for the component to enter the viewable area
  const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) = > {
    // If the DOM corresponding to target is visible, the callback is fired
    if (isIntersecting) {
      // The DOM being listened to enters the viewable area: the interface is called to retrieve the data; Stop listening
      stop()
      apiFn().then(data= > {
        result.value = data.result
      })
    }
  })
  // result Indicates the service data obtained by lazy loading on the interface
  // Target represents the DOM element being listened on and needs to be bound by the ref attribute in the template
  return { result, target }
}
Copy the code

Three, how to use?

In any component, when you need to send a request, you can use the encapsulated lazy load function.

The result returned by the setup function can be used directly in the template. Code examples (below) :

// Introduce component lazy loading functions
import { useLazyData } from 'xxx/xxx.js'
// Introduce an API for sending requests
import { xxx } from 'xxx/xxx.js'

export default {
  name: 'APP',
  setup () {
    const { target, result} = useLazyData(findNew)

    return { result, target }
  }
}
Copy the code

conclusion

Useful oh ~ quick praise to collect