优化组件缓存

Author: konglingwen94

src/App.vue

@@ -11,7 +11,7 @@
     </header>
     <main>
       <transition appear :name="pageTransitionName">
-        <keep-alive :exclude="['resume','resume-editor',]" :max="30">
+        <keep-alive :exclude="['resume','resume-editor','job']" :max="30">
           <router-view :key="$route.path"></router-view>
         </keep-alive>
       </transition>
@@ -118,8 +118,8 @@ footer {
   margin-top: 100px;
 }
 
-#app,
-main {
+header {
   position: relative;
+  z-index: 1000;
 }
 </style>

src/helper/utilities.js

@@ -4,7 +4,7 @@ export const watchScrollDirection = function(scrollElement, callback) {
     directionX: 1,
     directionY: 1,
   };
-
+  let previousTimer;
   function onScroll(e) {
     const scrollTop = scrollElement.scrollTop || scrollElement.pageYOffset;
     const scrollLeft = scrollElement.scrollLeft || scrollElement.pageXOffset;
@@ -19,12 +19,21 @@ export const watchScrollDirection = function(scrollElement, callback) {
     } else {
       scrollDirection.directionX = 1;
     }
+
     callback.call(scrollElement, scrollDirection, scrollPos);
 
     scrollPos.x = scrollLeft;
     scrollPos.y = scrollTop;
   }
-  scrollElement.addEventListener("scroll", onScroll);
+
+  scrollElement.addEventListener("scroll", () => {
+    let now = Date.now();
+    if (!previousTimer) previousTimer = now;
+    if (now - previousTimer > 100) {
+      onScroll();
+      previousTimer = now;
+    }
+  });
   return function() {
     scrollElement.removeEventListener("scroll", onScroll);
   };
@@ -60,7 +69,7 @@ export function formatDate(date, format = true) {
 
 export function getOffsetTop(relativeNode, node, topSum = 0) {
   topSum += node.offsetTop;
-   
+
   if (node.offsetParent !== relativeNode) {
     return getOffsetTop(relativeNode, node.offsetParent, topSum);
   }

src/views/Home.vue

@@ -240,6 +240,7 @@ export default {
       { x: document.body.scrollLeft, y: document.body.scrollTop }
     );
     this.unwatch = watchScrollDirection(window, function(...args) {
+   
       rootVm.$emit("home-scrolling", ...args);
     });
   },

src/views/Jobs.vue

@@ -72,10 +72,11 @@ let searchBarClientHeight = 0;
 export default {
   name: "job",
   data() {
+    const { keyword, job_category_id } = this.$route.params;
     return {
-      searchKeyword: "",
+      searchKeyword: keyword || "",
       currentPage: 1,
-      job_category_id_list: [],
+      job_category_id_list: job_category_id ? [job_category_id] : [],
       jobCategories: [],
       jobCities: [],
       location_code_list: [],
@@ -87,12 +88,6 @@ export default {
     };
   },
 
-  activated() {
-    this.searchKeyword = this.$route.params.keyword || "";
-    if (this.$route.params.job_category_id) {
-      this.job_category_id_list = [this.$route.params.job_category_id];
-    }
-  },
   created() {
     const jobConfigRequest = this.request
       .get("/job-filters")
@@ -113,10 +108,13 @@ export default {
     this.$nextTick(() => {
       positionY = getOffsetTop(document.body, this.$refs.searchBar);
       searchBarClientHeight = this.$refs.searchBar.clientHeight;
-
     });
   },
   activated() {
+    this.searchKeyword = this.$route.params.keyword || "";
+    if (this.$route.params.job_category_id) {
+      this.job_category_id_list = [this.$route.params.job_category_id];
+    }
     const onPageScroll = () => {
       const top = this.$refs.searchBar.getBoundingClientRect().top;
 
@@ -127,6 +125,8 @@ export default {
 
     this.$on("hook:deactivated", () => {
       window.removeEventListener("scroll", onPageScroll);
+      // this.clearFilter();
+      // this.searchKeyword = "";
     });
   },
   computed: {