最近在使用Vue框架的時(shí)候，遇到了一個(gè)關(guān)于圖片懶加載的問題。當(dāng)初項(xiàng)目中使用了vue-lazyload插件，一開始運(yùn)行起來都很流暢，但是后來發(fā)現(xiàn)當(dāng)頁面進(jìn)行刷新時(shí)，插件不能正常工作了，尤其在首次刷新時(shí)，頁面上的圖片不能實(shí)現(xiàn)懶加載。

經(jīng)過觀察，發(fā)現(xiàn)首次刷新時(shí)，插件的deferring屬性被默認(rèn)設(shè)置成了false。在Vue2的data中，我們可以通過定義一些Vue實(shí)例屬性來存儲數(shù)據(jù)，達(dá)到響應(yīng)式更新數(shù)據(jù)的目的，因此就從這個(gè)方面著手，嘗試通過改變Vue實(shí)例屬性來解決懶加載刷新的問題。

Vue.component('lazyload', {
props: {
src: {
type: String
},
offset: {
type: Number,
default: 200
},
tagName: {
type: String,
default: 'div'
}
},
data() {
return {
deferring: true
}
},
mounted() {
const bgImg = this.$el.getAttribute('data-bg-image');
const img = new Image();
img.onload = () =>{
this.deferring = false;
this.$el.classList.add('lazyloaded');
};
img.src = bgImg;
}
});

這里簡單演示一下用Vue的data屬性來解決懶加載首次刷新問題的方法。我們可以利用Vue的鉤子函數(shù)，在mounted生命周期時(shí)，以異步的形式來加載圖片，并設(shè)置deferring屬性的狀態(tài)。在圖片加載完畢之后，再將deferring設(shè)置為false，觸發(fā)Vue的響應(yīng)式更新，在頁面上實(shí)現(xiàn)懶加載功能。

以上是本人的一點(diǎn)小小心得，僅供大家參考學(xué)習(xí)。雖然方法不一定完美，但相信可以幫你更好的理解Vue實(shí)例屬性的應(yīng)用場景，以及在Vue框架下如何解決一些常規(guī)問題。