如何使用Vue.js实现懒加载和预加载？

Vue.js可以通过vue-lazyload和vue-infinite-loading插件实现懒加载和预加载。下面是演示代码：

1.使用vue-lazyload实现懒加载：

安装依赖：

npm install vue-lazyload --save

在main.js中引入并注册：

import Vue from "vue"
import VueLazyload from "vue-lazyload"
Vue.use(VueLazyload)

在需要懒加载的组件中使用：

<template>
  <div>
    <img v-lazy="imgUrl">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgUrl: "需要懒加载的图片地址"
    }
  }
}
</script>

2.使用vue-infinite-loading实现预加载：

安装依赖：

npm install vue-infinite-loading --save

在需要预加载的组件中使用：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
    <infinite-loading @infinite="infiniteHandler"></infinite-loading>
  </div>
</template>

<script>
import InfiniteLoading from "vue-infinite-loading"

export default {
  components: {
    InfiniteLoading
  },
  data() {
    return {
      list: [], // 列表数据
      page: 1 // 当前页数
    }
  },
  methods: {
    // 加载下一页数据
    infiniteHandler($state) {
      // 发送异步请求获取数据
      axios.get("/api/data", {
        params: {
          page: this.page
        }
      })
      .then(res => {
        this.list.push(...res.data.list)
        this.page++
        $state.loaded() // 加载完成
        if (!res.data.hasNext) {
          $state.complete() // 数据全部加载完成
        }
      })
      .catch(() => {
        $state.error() // 加载出错
      })
    }
  }
}
</script>