vue多个相同组件懒加载数据

项目中遇到一个需求，页面中有很多个商品组件，但是商品的数据是通过json给到的静态数据，需要调用另外的商品json去更新以前给到的静态的数据，并且在该商品滑动到界面的时候才去更新，如果商品是下架的状态，商品隐藏不展示。

需求分析

• 如何做到数据懒加载？
  页面挂载后，所有的子组件都会进入mounted生命周期，那如何判断这个组件已经滑动到可视窗口了呢？
  这里用到vue的$refs属性来获取当前的组件，然后找到当前页面滚动的元素，监听滚动，判断当前的组件是否已经出现在可视窗口就可以了。

实现

// product-item.vue
<template>
    <div ref="productDom" v-if="showProductComp">{{data}}</div>
</template>
<script>
    import {inViewport, fetchProduct} from 'utils'
    export default{
        data() {
            showProductComp: true， // 组件默认挂载商品都是显示的
        },
        props: {...item}, // 传入组件的商品静态信息
        mounted() {
           let vm = this;      
           let dom = this.$refs.productDom;
           let flag = dom && inViewport(dom); // 判断组件dom是否在可视窗口内
           if(flag){
            this.fetchProductFn()
          }else{
            let scroll = getScrollview(dom);
            scroll.addEventListener('scroll', this.fetchProductFn);
          }
        },
        methods: {
            fetchProductFn() {
                let dom = this.$refs.productDom;
                let flag = dom && inViewport(dom);
                if (!flag) {
                    scroll.removeEventListener('scroll', this.fetchProductFn)
                    return
                }
                fetchProduct(this.item.code).then(data => { // 通过请求json获取的商品信息更新商品
                      let itemData = {...this.item, ...data}
                      this.item = Object.assign(this.item, itemData);
                      this.showProductComp = this.productListing(this.item); // 判断商品是否是上架状态，如果下架就隐藏该商品
                })
            }
        }
    }
</script>

image.png

总结

原先做法通过获取商品组件的外层class来获取dom判断是否在可视窗口内，后来发现判断的始终是第一个挂载的商品，所以页面一挂载，所有的json都加载出来了；后来想着vue.$ref能获取到组件中的dom，所以能够判断当前的组件中的元素是否在可视范围内，如果在，就去加载json文件，然后判断当前的商品是否是下架的，如果是下架的再通过v-if删掉当前的组件dom。