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

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

需求分析

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

实现

// product-item.vue

image.png

总结

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