如何用Vue开发一个图片懒加载插件？

本文共计1779个文字，预计阅读时间需要8分钟。

前言+图片懒加载是一个常用的功能，特别是一些电商平台，这个性能优化至关重要。今天就用vue来实现一个图片懒加载的插件。这篇博客采用三步走战术——Vue.use()、Vue.directive()。

前言

图片懒加载是一个很常用的功能，特别是一些电商平台，这对性能优化至关重要。今天就用vue来实现一个图片懒加载的插件。 这篇博客采用“三步走”战略——Vue.use()、Vue.direction、Vue图片懒加载插件实现，逐步实现一个Vue的图片懒加载插件。

Vue.use()

就像开发jQuery插件要用$.fn.extent()一样，开发Vue插件我们要用Vue.use()。其实就是官方内部实现的一个方法，供广大开发者灵活开发属于自己的插件。只需要按照约定好的规则开发就行。

用法

安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。

该方法需要在调用 new Vue() 之前被调用。

当 install 方法被同一个插件多次调用，插件将只会被安装一次。

注：install方法或者被当做install方法的方法它的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象。