前言
vue如今可謂是一匹黑馬,github star數已居第一位！前端開發對於vue的使用已經越來越多，它的優點就不做介紹了,
本篇是我對vue使用過程中以及對一些社群朋友提問我的問題中做的一些總結,幫助大家踩坑。如果喜歡的話可以點波贊，或者關注一下，希望本文可以幫到大家!!!
———-我是分割線
本篇介紹的問題大概如下:
- 路由變化頁面資料不重新整理問題
- setTimeout/setInterval(泛指非同步回掉函式的this指向)this指向改變，無法用this訪問VUe例項
- setInterval路由跳轉繼續執行並沒有及時進行銷燬
- vue 滾動行為用法,進入路由需要滾動到瀏覽器底部 頭部等等
- 實現vue路由攔截瀏覽器的需求,進行 一系列操作 草稿儲存等等
- v-once 只渲染元素和元件一次，優化更新渲染效能
- vue本地代理配置 解決跨域問題,僅限於開發環境
- 本地開發 沒有任何問題 部署伺服器 就404啊這些問題
1. 路由變化頁面資料不重新整理問題
出現這種情況是因為依賴路由的params引數獲取寫在created生命週期裡面,因為相同路由二次甚至多次載入的關係 沒有達到監聽，退出頁面再進入另一個文章頁面並不會執行created元件生命週期,導致文章資料還是第一次進入的資料
解決方法：watch監聽路由是否變化
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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例項物件
|
1 2 3 4 5 6 7 8 9 10 11 |
//setTimeout/setInterval ajax Promise等等 data(){ return{ ... } }, methods (){ setTimeout(function () { //其它幾種情況相同 console.log(this);//此時this指向並不是vue例項 導致操作的一些ma'f },1000); } |
解決方案 變數賦值和箭頭函式
|
1 2 3 4 5 6 7 8 9 10 |
//使用變數訪問this例項 let self=this; setTimeout(function () { console.log(self);//使用self變數訪問this例項 },1000); //箭頭函式訪問this例項 因為箭頭函式本身沒有繫結this setTimeout(() => { console.log(this); }, 500); |
3. setInterval路由跳轉繼續執行並沒有及時進行銷燬
比如一些彈幕，走馬燈文字，這類需要定時呼叫的，路由跳轉之後，因為元件已經銷燬了，但是setInterval還沒有銷燬，還在繼續後臺呼叫，控制檯會不斷報錯，如果運算量大的話，無法及時清除，會導致嚴重的頁面卡頓。
解決辦法：在元件生命週期beforeDestroy停止setInterval
|
1 2 3 4 5 |
//元件銷燬前執行的鉤子函式，跟其他生命週期鉤子函式的用法相同。 beforeDestroy(){ //我通常是把setInterval()定時器賦值給this例項，然後就可以像下面這麼停止。 clearInterval(this.intervalId); }, |
4. vue 滾動行為用法,進入路由需要滾動到瀏覽器底部 頭部等等
|
1 2 |
使用前端路由，當切換到新路由時，想要頁面滾到頂部，或者是保持原先的滾動位置，就像重新載入頁面那樣。 vue-router 能做到，而且更好，它讓你可以自定義路由切換時頁面如何滾動。 |
注意: 這個功能只在支援 history.pushState 的瀏覽器中可用。
路由設定如下: 詳情猛戳
|
1 2 3 4 5 6 7 8 9 10 11 |
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) {
|
1 2 3 4 5 6 7 8 |
if(使用者已經輸入資訊){ //出現彈窗提醒儲存草稿，或者自動後臺為其儲存 }else{ next(true);//使用者離開 } } |
還有beforeEach、beforeRouteUpdate這些生命週期函式 詳情猛戳
6. v-once 只渲染元素和元件一次，優化更新渲染效能
|
1 |
v-once這個指令相信大家用的很少,不過個人感覺還是挺實用的！ |
只渲染元素和元件一次。隨後的重新渲染，元素/元件及其所有的子節點將被視為靜態內容並跳過。這可以用於優化更新效能。
這個就不舉例子了 直接猛戳這 v-once
7. vue本地代理配置 解決跨域問題,僅限於開發環境
這個本地代理用來解決開發環境下的跨域問題,跨域可謂老生常談的問題了,proxy 在vue中配置代理非常簡單
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
//比方說你要訪問 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 2 |
1： vue-router的 history 模式 2： 服務nginx配置 |
這個問題講完整今天我下不了班了! 具體詳情 可以猛戳 如何部署單頁面專案到服務
到最後我想說聲抱歉,之前答應你們的node由於個人原因沒有及時更新出來,node 方面的文章篇幅一定短不了,因為要把它講清楚不是一句倆句話的事,好在我發現了一篇文章 對初學者晉升高階初學者有很大幫助,請點選猛戳這裡,希望你認真的看完這篇文章(書把,篇幅不短),它會對你有很大的幫助,我一定在年前給你補一遍開發完整應用的node 方向的文章！
結語
這篇文章只是開始,它的待續還會很長很長，希望你我堅持下去！也希望我能幫助到更多的人,當然也會讓我真正沉澱一下,為了以後為了將來 一起努力如果大家有什麼問題,或者需要補充的 歡迎留言！我會進行補全的 ！ 詳細版本我稍後也會上傳到gitHub！
如果覺得文章對大家有幫助,希望大家能點贊一下或者關注一下,得到肯定的我會更加努力！~~