前言

vue如今可謂是一匹黑馬，github star數已居第一位！前端開發對于vue的使用已經越來越多，它的優點就不做介紹了，本篇是我對vue使用過程中以及對一些社區朋友提問我的問題中做的一些總結，幫助大家踩坑。如果喜歡的話可以點波贊，或者關注一下，希望本文可以幫到大家！

1.路由變化頁面數據不刷新問題

出現這種情況是因為依賴路由的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   } } }

2.異步回調函數中使用this無法指向vue實例對象

//setTimeout/setInterval ajax Promise等等data(){ return{ ... }},methods (){  setTimeout(function () { //其它幾種情況相同  console.log(this);//此時this指向并不是vue實例 導致操作的一些ma'f },1000);}

解決方案：變量賦值和箭頭函數。（參考：var和let的區別：//m.survivalescaperooms.com/article/134704.htm）

 //使用變量訪問this實例let self=this;  setTimeout(function () {   console.log(self);//使用self變量訪問this實例 },1000);  //箭頭函數訪問this實例 因為箭頭函數本身沒有綁定this setTimeout(() => {  console.log(this); }, 500);

3.setInterval路由跳轉繼續運行并沒有及時進行銷毀

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

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

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

4.vue 滾動行為用法，進入路由需要滾動到瀏覽器底部、頭部等等

使用前端路由，當切換到新路由時，想要頁面滾到頂部，或者是保持原先的滾動位置，就像重新加載頁面那樣。 vue-router 能做到，而且更好，它讓你可以自定義路由切換時頁面如何滾動。

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