Vue深入 12 手寫lazyload 1

2021-10-11 20:50:48 字數 1324 閱讀 6494

npm i vue-lazyload -s


main.js中引入


import vuelazyload from 'vue-lazyload';


vue.use(vuelazyload,)


使用
編寫指令

vue.user會先執行install方法

main.js

vue.use(mylazyload);
index.js

install方法中會自動傳遞乙個vue例項

第二個options中可以拿到配置項，是在vue.use中第二個引數中傳遞得

export default


}

vue.directive('lazy',mylazyload)
lazy.js

export default (vue) =>)


}return class lazyclass


}add(el,bindinds)


parent = parent.parentnode;


}return parent 


} let parent = findscrollparent();


console.log(parent);


if(!this.ishandlerbind)


const src = bindinds.value;


let listener = new reactivelistener()


this.listenerqueue.push(listener) })}


elrenderer(listener,state) = listener;


let src = '';


switch(state)


el.setattribute('src',src)}}


}
main.js

import vue from 'vue'


import router from './router'


import store from './store'


import vuelazyload from '@/lazyload/index'


vue.config.productiontip = false


vue.use(vuelazyload)


new vue()}}

Vue原始碼解析06 手寫自己的Vue

最近一段時間一直在研究 vue 的原始碼,突然間想寫乙個乞丐的 vue 實現,為了理一下自己的思路,同時也作為乙個階段性的總結.vue 雙向繫結看這裡 vue2.0 1.0 雙向資料繫結簡單來說就是利用了 object.defineproperty 和觀察者模式對 data 資料進行資料劫持.廢話不...

從零手寫RPC

clientstub sereverstub 可以看作乙個 物件，遮蔽rpc呼叫過程中複雜的網路處理邏輯，使rpc透明化，使得呼叫遠端方法想呼叫本地方法一樣。server 服務端提供遠端服務。注 serverstub又叫skeleton。public inte ce ihellopublic cla...

2020 09 15 手寫基本演算法

基本演算法 氣泡排序 兩兩相比，大小決定左右位置。public int bubblesort int arr arr list.toarray int tmp 0 for int outer 0 outer arr.length outer return arr 選擇排序 宣告最值下標，初始值為每次...