In a page when we don’t have to browse some data, but this time is don’t need to send the request from the server, otherwise may be you will not see the content, but still made a request, creates the resources waste, so in order to solve this problem, we can load the data by means of lazy loading. Today, I will introduce a method to realize lazy loading of data in VUe3: useIntersectionObserver in @vueuse/ Core can be used to monitor the behavior of entering the visual area, but it must be combined with the combined API of Vue3.0 to achieve this.

useIntersectionObserver 

Const {stop} = useIntersectionObserver(target, fn, options) const {stop} = useIntersectionObserver(target, fn, options) // The first parameter of the callback function isIntersecting indicates that the monitored element has entered the viewable area. // The first parameter of the callback function isIntersecting indicates that the monitored element has entered the viewable area. // The configuration option // Stop is to stop observing whether to enter or move out of the viewable area UseIntersectionObserver (target is the target DOM container to be observed, and it must be a DOM container and a TARGET of the DOM object bound by Vue3.0. // DOM ([{isIntersecting}], observerElement) => {// It can be judged by isIntersecting. Then do business},)Copy the code

2. Start working on the home-new component we want to optimize: get the data after entering the viewable area

<div ref="box" style="position: relative; height: 406px;" > // omit... <script> import HomePanel from './home-panel' import HomeSkeleton from './home-skeleton' import { findNew } from '@/api/home' import { ref } from 'vue' import { useIntersectionObserver } from '@vueuse/core' export default { name: 'HomeNew', components: { HomePanel, HomeSkeleton }, setup () { const goods = ref([]) const target = ref(null) const { stop } = useIntersectionObserver( target, ([{ isIntersecting }]) => { if (isIntersecting) { stop() findNew().then(data => { goods.value = data.result }) } } ) Return {goods, target}}} </script> listens for DOM elements to enter the visual area, stops listening once inside, and calls the interface to get the dataCopy the code

3. Since lazy data loading is required for panel data loading on the home page, a hook function is encapsulated to obtain data

Import {useIntersectionObserver} from '@vueuse/core' import {ref} from 'vue' export const 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) // Data returned by lazy loading interface const result = ref([]) // Const {stop} = useIntersectionObserver(target, ([{isIntersecting}]) => {// If the DOM corresponding to target enters the viewable area, If (isIntersecting) {// If (isIntersecting) {// If (isIntersecting) {// If (isIntersecting) {// If (isIntersecting) {// If (isIntersecting) { Stop () apiFn(). Then (data => {result.value = data.result})}}) // result indicates the service data obtained by lazy loading of the interface. // target indicates the DOM element monitored. Return {result, target}}Copy the code

4. Modify the home-new component again:

import { findNew } from '@/api/home'
import { useLazyData } from '@/hooks'
export default {
  name: 'HomeNew',
  components: { HomePanel, HomeSkeleton },
  setup () {
    const { target, result: goods } = useLazyData(findNew)
    return { goods, target }
  }
}
Copy the code

5. Bind the DOM element we want to listen on

<div ref="target" style="position: relative; height: 426px;" >Copy the code

conclusion

  1. The whole process code of lazy loading is encapsulated as Hook
  2. The lazy loading effect of fresh good things and popular recommendation modules is realized based on hook method