vue懒加载和子组件懒加载的区别详解

<template>  
  <div>  
    <div v-for="image in images" :key="image.id">  
      <img v-lazy="image.src" alt="">  
    </div>  
  </div>  
</template>  
  
<script>  
import Vue from 'vue';  
import VueLazyload from 'vue-lazyload';  
  
Vue.use(VueLazyload, {  
  preLoad: 1.3,  
  error: 'dist/error.png',  
  loading: 'dist/loading.gif',  
  attempt: 1  
});  
  
export default {  
  data() {  
    return {  
      images: [  
        { id: 1, src: 'dist/image1.jpg' },  
        { id: 2, src: 'dist/image2.jpg' },  
        { id: 3, src: 'dist/image3.jpg' }  
      ]  
    };  
  }  
};  
</script>

<template>  
  <div>  
    <button @click="loadComponent">Load Component</button>  
    <div v-if="isComponentLoaded">  
      <my-component></my-component>  
    </div>  
  </div>  
</template>  
  
<script>  
import MyComponent from './MyComponent.vue';  
  
export default {  
  data() {  
    return {  
      isComponentLoaded: false,  
    };  
  },  
  components: { MyComponent },  
  methods: {  
    loadComponent() {  
      this.isComponentLoaded = true; // 手动触发组件加载逻辑，如从服务器请求数据等。  
    }  
  }  
};  
</script>