Vue採坑（持續更新）

setInterval路由跳轉繼續運行並沒有及時進行銷燬

比如一些彈幕，走馬燈文字，這類需要定時調用的，路由跳轉之後，因爲組件已經銷燬了，但是setInterval還沒有銷燬，還在繼續後臺調用，控制檯會不斷報錯，如果運算量大的話，無法及時清除，會導致嚴重的頁面卡頓。

解決辦法：在組件生命週期beforeDestroy停止setInterval

//組件銷燬前執行的鉤子函數，跟其他生命週期鉤子函數的用法相同。
beforeDestroy(){
     //我通常是把setInterval()定時器賦值給this實例，然後就可以像下面這麼停止。
    clearInterval(this.intervalId);
},

監聽窗口變化

需求

響應窗口變化做一些事情

實現

// 1. 在mounted鉤子中創建監聽事件
mounted() {
    // 監聽窗口寬度變化
    window.onresize = () => {
      this.$store.commit(
        "SETCLIENTWIDTH",
        document.documentElement.clientWidth
      );
    };
}
// 2. 存儲視口信息（本次項目使用的是vuex，非必須）
SETCLIENTWIDTH(state, width) {
    state.clientWidth = width
},
// 3. 監聽視口信息變化
computed: {
    clientWidth() {
      return this.$store.state.clientWidth;
    }
}
// 4. 根據變化做相應操作
...

只提供大體思路，根據實際情況可做變動

進入路由需要滾動到瀏覽器指定位置

注意: 這個功能只在支持 history.pushState 的瀏覽器中可用。

const router = new VueRouter({
   mode: 'history',
 scrollBehavior (to, from, savedPosition) {
     if (savedPosition) { //如果savedPosition存在，滾動條會自動跳到記錄的值的地方
       return savedPosition
     } else {
       return { x: 0, y: 0 }//savedPosition也是一個記錄x軸和y軸位置的對象
      }
     }，
   routes: [...]
 })

路由變化頁面數據不刷新

原因

出現這種情況是因爲依賴路由的params參數獲取寫在created生命週期裏面,因爲相同路由二次甚至多次加載的關係 沒有達到監聽，退出頁面再進入另一個文章頁面並不會運行created組件生命週期,導致文章數據還是第一次進入的數據

解決辦法

• 方法一：watch監聽路由是否變化

 watch: {
 // 方法1
  '$route' (to, from) { //監聽路由是否變化
    if(this.$route.params.articleId){// 判斷條件1  判斷傳遞值的變化
      //獲取文章數據
    }
  }
  //方法2
  '$route'(to, from) {
    if (to.path == "/page") {    /// 判斷條件2  監聽路由名 監聽你從什麼路由跳轉過來的
       this.message = this.$route.query.msg     
    }
  }
  
}

• 方法二：使用beforeRouteUpdate 守衛：

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

# 路由組件懶加載

// 方式一
component: () => import("@/views/Login.vue")
// 方式二
component: resolve => require(["@/views/Register.vue"], resolve)