Vue 踩過的坑

1.路由變化頁面數(shù)據(jù)不刷新問題

出現(xiàn)這種情況是因?yàn)橐蕾嚶酚傻膒arams參數(shù)獲取寫在created生命周期里面恰响，因?yàn)橄嗤酚啥紊踔炼啻渭虞d的關(guān)系沒有達(dá)到監(jiān)聽蕴侧，退出頁面再進(jìn)入另一個(gè)文章頁面并不會運(yùn)行created組件生命周期，導(dǎo)致文章數(shù)據(jù)還是第一次進(jìn)入的數(shù)據(jù)滑沧。

解決方法：watch監(jiān)聽路由是否變化骏全。

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

2.異步回調(diào)函數(shù)中使用this無法指向vue實(shí)例對象

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

解決方案：變量賦值和箭頭函數(shù)眠副。（參考：var和let的區(qū)別：http://blog.csdn.net/nfer_zhuang/article/details/48781671）

//使用變量訪問this實(shí)例
let self=this;   
setTimeout(function () {  
  console.log(self);//使用self變量訪問this實(shí)例
},1000);
//箭頭函數(shù)訪問this實(shí)例 因?yàn)榧^函數(shù)本身沒有綁定this
setTimeout(() => { 
 console.log(this);
}, 500);

3.setInterval路由跳轉(zhuǎn)繼續(xù)運(yùn)行并沒有及時(shí)進(jìn)行銷毀

比如一些彈幕网持，走馬燈文字宜岛，這類需要定時(shí)調(diào)用的，路由跳轉(zhuǎn)之后功舀，因?yàn)榻M件已經(jīng)銷毀了萍倡，但是setInterval還沒有銷毀，還在繼續(xù)后臺調(diào)用辟汰，控制臺會不斷報(bào)錯阱佛，如果運(yùn)算量大的話，無法及時(shí)清除瘫絮，會導(dǎo)致嚴(yán)重的頁面卡頓。

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

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

4.vue 滾動行為用法，進(jìn)入路由需要滾動到瀏覽器底部涝滴、頭部等等

使用前端路由，當(dāng)切換到新路由時(shí)歼疮，想要頁面滾到頂部，或者是保持原先的滾動位置韩脏，就像重新加載頁面那樣。 vue-router 能做到赡矢，而且更好，它讓你可以自定義路由切換時(shí)頁面如何滾動吹散。
注意：這個(gè)功能只在支持 history.pushState 的瀏覽器中可用。
路由設(shè)置如下：（詳情猛戳：https://router.vuejs.org/zh-cn/advanced/scroll-behavior.html）

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

5. 實(shí)現(xiàn)vue路由攔截瀏覽器的需求，進(jìn)行一系列操作袭景，如草稿保存等等

場景：為了防止用戶失誤點(diǎn)錯關(guān)閉按鈕等等唁桩，導(dǎo)致沒有保存已輸入的信息(關(guān)鍵信息)荒澡。
用法如下：

// 在路由組件中：
   ...
beforeRouteLeave (to, from, next) {
    if (用戶已經(jīng)輸入信息) {
        // 出現(xiàn)彈窗提醒保存草稿，或者自動后臺為其保存
    } else {
        next(true);//用戶離開
    }
}

還有beforeEach单山、beforeRouteUpdate這些生命周期函數(shù)碍现。詳情猛戳：https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

6.v-once 只渲染元素和組件一次米奸，優(yōu)化更新渲染性能

v-once 這個(gè)指令相信大家用的很少，不過個(gè)人感覺還是挺實(shí)用的悴晰！
只渲染元素和組件一次。隨后的重新渲染铡溪，元素/組件及其所有的子節(jié)點(diǎn)將被視為靜態(tài)內(nèi)容并跳過。這可以用于優(yōu)化更新性能棕硫。
這個(gè)就不舉例子了髓涯，直接猛戳這：v-once（https://cn.vuejs.org/v2/api/#v-once）

7. vue本地代理配置解決跨域問題,僅限于開發(fā)環(huán)境

這個(gè)本地代理用來解決開發(fā)環(huán)境下的跨域問題哈扮，跨域可謂老生常談的問題了纬纪，proxy 在 vue 中配置代理非常簡單：

// 比方說你要訪問 http://192.168.1.xxx:8888/backEnd/paper這個(gè)接口
// 配置  config.js下面proxyTable對象
proxyTable: {
  '/backEnd': {
    // 目標(biāo)接口域名有端口可以把端口也寫上
    target:'http://192.168.3.200:8888', 
    // 或者prot本地起服務(wù)端口與服務(wù)端統(tǒng)一
    changeOrigin:true,    
  }
},
// 發(fā)送request請求
// 按代理配置 匹配到/backEnd就代理到目標(biāo)target地址
axios.get('/backEnd/page')  
  .then((res) => {
    // 數(shù)據(jù)完全拿得到  配置成功
    console.log(res) 
    this.newsList = res.data
  }, (err) => {
    console.log(err)
  })

8. 本地開發(fā)沒有任何問題，部署服務(wù)器就404啊這些問題

由于前端路由緣故滑肉，單頁面應(yīng)用應(yīng)該放到nginx或者apache包各、tomcat等web代理服務(wù)器中，千萬不要直接訪問index.html赦邻，同時(shí)要根據(jù)自己服務(wù)器的項(xiàng)目路徑更改react或vue的路由地址髓棋。
注意點(diǎn)：
vue-router的 history 模式
服務(wù)nginx配置

如果覺得文章對大家有幫助，希望大家能點(diǎn)贊一下或者關(guān)注一下惶洲，得到肯定的我會更加努力按声！~~