1.新建plugin.js文件：

const LazyLoadPlugin = {
  install(Vue) {
    Vue.directive('lazy', {
      // 在綁定元素插入到 DOM 中
      inserted: function (el, binding) {
        // IntersectionObserver API 檢測元素是否進(jìn)入視口
        const observer = new IntersectionObserver(entries => {
          if (entries[0].isIntersecting) {
            // 加載圖片
            el.src = binding.value;
            // 停止觀察該元素
            observer.unobserve(el);
          }
        });
        // 開始觀察該元素
        observer.observe(el);
      }
    });
  }
};

export default LazyLoadPlugin;

2.在main.js里注冊：

// main.js

import Vue from 'vue';
import App from './App.vue';
import LazyLoadPlugin from './lazyLoadPlugin';

Vue.use(LazyLoadPlugin);

new Vue({
  render: h => h(App)
}).$mount('#app');

<template>
  <img v-lazy="'path_to_your_image.jpg'" alt="Lazy Loaded Image">
</template>