前言

前端開發對於vue的使用已經越來越多，它的優點就不做介紹了, 本篇是我對vue使用過程中遇到的問題中做的一些總結,幫助大家踩坑。如果喜歡的話可以點波贊，或者關註一下，希望本文可以幫到大家!!!

本篇介紹的問題大概如下:

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

2. setTimeout/setInterval(泛指異步回掉函數的this指向)this指向改變，無法用this訪問VUe實例

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

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

5. 實現vue路由攔截瀏覽器的需求,進行 一系列操作 草稿保存等等

6. v-once 只渲染元素和組件一次，優化更新渲染性能

7. vue本地代理配置 解決跨域問題,僅限於開發環境

8. 本地開發 沒有任何問題 部署服務器 就404啊這些問題

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的區別

//使用變量訪問this實例
let self=this;   
    setTimeout(function
 
 () {  
      console.log(self);//使用self變量訪問this實例
    },1000);

 //箭頭函數訪問this實例 因為箭頭函數本身沒有綁定this
 setTimeout(() => { 
   console.log(this);
 }, 500);

結語

這篇文章只是開始,它的待續還會很長很長，希望你我堅持下去！也希望我能幫助到更多的人,當然也會讓我真正沈澱一下,為了以後為了將來 一起努力如果大家有什麽問題,或者需要補充的 歡迎留言！

如果覺得文章對大家有幫助,希望大家能點贊一下或者關註一下,得到肯定的我會更加努力！~~

Vue踩坑系列