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))

                        }

                });

           },

}