前言

vue如今可謂是一匹黑馬,github star數已居第一位！前端開發對於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);
 

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

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

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

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

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

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

注意: 這個功能只在支援 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: [...]
 })
 

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

場景：
為了防止使用者失誤點錯關閉按鈕等等，導致沒有儲存已輸入的資訊(關鍵資訊)。
用法：
//在路由元件中：
...
beforeRouteLeave (to, from, next) {

  if(使用者已經輸入資訊){
    //出現彈窗提醒儲存草稿，或者自動後臺為其儲存
    
  }else{
    next(true);//使用者離開
  }

}

還有beforeEach、beforeRouteUpdate這些生命週期函式 詳情猛戳

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

v-once這個指令相信大家用的很少,不過個人感覺還是挺實用的！

只渲染元素和元件一次。隨後的重新渲染，元素/元件及其所有的子節點將被視為靜態內容並跳過。這可以用於優化更新效能。
這個就不舉例子了 直接猛戳這 v-once

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

這個本地代理用來解決開發環境下的跨域問題,跨域可謂老生常談的問題了,proxy 在vue中配置代理非常簡單

//比方說你要訪問 http://192.168.1.xxx:8888/backEnd/paper這個介面
//配置  config.js下面proxyTable物件
proxyTable: {
            '/backEnd':{
                target:'http://192.168.3.200:8888', //目標介面域名有埠可以把埠也寫上
                                                    //或者prot本地起服務埠與服務端統一
                changeOrigin:true,    
            }
},
// 傳送request請求
   axios.get('/backEnd/page')  //按代理配置 匹配到/backEnd就代理到目標target地址
    .then((res) => {
       console.log(res) // 資料完全拿得到  配置成功
      this.newsList = res.data
    }, (err) => {
      console.log(err)
    })
    

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

由於前端路由緣故，單頁面應用應該放到nginx或者apache、tomcat等web代理伺服器中，千萬不要直接訪問index.html，同時要根據自己伺服器的專案路徑更改react或vue的路由地址

注意點

1： vue-router的 history 模式
2： 服務nginx配置

這個問題講完整今天我下不了班了! 具體詳情 可以猛戳 如何部署單頁面專案到服務

到最後我想說聲抱歉,之前答應你們的node由於個人原因沒有及時更新出來,node 方面的文章篇幅一定短不了,因為要把它講清楚不是一句倆句話的事,好在我發現了一篇文章 對初學者晉升高階初學者有很大幫助,請點選猛戳這裡,希望你認真的看完這篇文章(書把,篇幅不短),它會對你有很大的幫助,我一定在年前給你補一遍開發完整應用的node 方向的文章！

結語

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

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

原文地址：https://segmentfault.com/a/1190000013008420