16 vue实战常见bug：滚动监听bug和keepalive维持

1.bug分析

从home界面跳转到其他界面时，可能会直接导致一次不必要的网络请求，导致出现不必要的数据请求，

这里打开页面后，看到了一次网络请求
 

const { isReachBottom, scrollTop } = useScroll()

watch(isReachBottom, (newValue) => {
  if (newValue) {
    // console.log("监听到了新值：", newValue);
    homeStore.fetchHouseListData()

    isReachBottom.value = false;
    // homeStore.fetchHouseListData()
  }
})

监听到的是是否到页面，

<template>
  <div class="home">
    <!-- <h2>home</h2> -->
    <home-nav-bar></home-nav-bar>

    <div class="banner">
      <img src="@/assets/img/home/banner.webp" alt="">
    </div>
    
    <home-search-box></home-search-box>

    <home-categories />

    <div class="search-bar" v-if="isShowSearchBar">
      <search-bar :start-date="'09.19'" :end-date="'09.20'" />
    </div>

    <home-content />

    <button @click="loadMoreData">load 跟多数据</button>

  </div>
</template>

在模板中监听的是home，而在useScroll.js中切换到第二页默认是home，home内容很短

如果收藏界面只有600px高，将直接导致 到了底部，useScroll返回的结果判定已经到达底部

所以，在home中加入100%vh高度限定条件：

height: 100vh;
  overflow-y: auto;

在监听函数调用时，也改成传入对home的引用：

const homeRef = ref()
const { isReachBottom, scrollTop } = useScroll(homeRef)
watch(isReachBottom, (newValue) => {
  if (newValue) {
    homeStore.fetchHouselistData().then(() => {
      isReachBottom.value = false
    })
  }
})

这样，结合之前的keepalive组件就可以让他不处罚到底部的事件

 切换到第二页收藏：

再切换回来：

 这样就可以让界面不自动触发重新发起数据请求！

2.keepalive组件

让组件不再切回来，浪费性能：

<template>
  <div class="app">

    <!-- 1直接用view -->
    <!-- <router-view></router-view> -->


    <!-- 2.改为keepAlive组件 -->
    <router-view v-slot="props">
      <keep-alive include="home">
        <component :is="props.Component"></component>
      </keep-alive>
    </router-view>
    

    <tab-bar v-if="!router.meta.hideTabbar" />

    <loading></loading>
    
  </div>
</template>

3.记录home原来的位置

// 可以直接记录原来的top值
// 跳转回home时, 保留原来的位置
onActivated(() => {
  homeRef.value?.scrollTo({
    top: scrollTop.value
  })
})

 这样切换来回的时候就会保持住原位置：