vue2模块懒加载

data() {

????????return {

????????????????observer: null,

?????????????????stopObserverData:[]

????????};

},

mounted(){

????????const observerCallback = (entries) => {

????????????????entries.forEach(entry => {

????????????????????????if (entry.intersectionRatio > 0) { // 被观察者进入视口

? ? ????????????????????????this.getData(entry.target.id);

????????????????????????}

????????????????});

????????}

????????this.observer = new IntersectionObserver(observerCallback)

????????data.map(item => {

????????????????this.observer.observe(document.getElementById(item.id))

????????})

}

methods:{

????????getData(id){

????????????????return new Promise(async (resolve, reject) => {

????????????????????????if (id) {

????????????????????????????????if (this.$refs[`ref-${id}`]) {

????????????????????????????????????????await this.$refs[`ref-${id}`][0]?.init();

????????????????????????????????????????this.stopObserverData.push(id)

????????????????????????????????}

????????????????????????????????resolve(true);

????????????????????????} else {

????????????????????????????????resolve(false);

????????????????????????}

????????????????}).then((res) => {

????????????????????????if (res) {

????????????????????????????????this.observer.unobserve(document.getElementById(id))

????????????????????????}

????????????????});

???????????},

}