Vue 實踐過程中的幾個問題

OBKoro1發表於2018-01-25
Vue

前言

本篇是我在使用vue過程中，遇到的幾個小問題和之前不瞭解的東西，記錄下來，希望能夠幫助各位踩坑。如果喜歡的話可以點波贊，或者關注一下，希望本文可以幫到大家。

本文首發於我的個人blog：obkoro1.com

本篇記錄個人遇到的問題如下:

  1. 路由變化頁面資料不重新整理問題
  2. setTimeout/setInterval this指向改變，無法用this訪問VUe例項
  3. setInterval路由跳轉繼續執行並沒有銷燬
  4. vue 滾動行為(瀏覽器回退記憶位置)用法
  5. vue路由攔截瀏覽器後退實現草稿儲存類似需求
  6. v-once 只渲染元素和元件一次，優化更新渲染效能
  7. vue框架風格指南推薦

路由變化頁面資料不重新整理問題

場景：比如文章詳情資料，依賴路由的params引數獲取的(ajax寫在created生命週期裡面)，因為路由懶載入的關係，退出頁面再進入另一個文章頁面並不會執行created元件生命週期，導致文章資料還是上一個文章的資料。

解決方法：watch監聽路由是否變化

 watch: {
  '$route' (to, from) { //監聽路由是否變化
    if(this.$route.params.articleId){//是否有文章id
      //獲取文章資料
    }
  }
}
複製程式碼

setTimeout/setInterval this指向改變，無法用this訪問VUe例項

場景：

  mounted(){ 
        setTimeout(function () { //setInterval同理 
          console.log(this);//此時this指向Window物件
        },1000);
    }
複製程式碼

解決方法：使用箭頭函式或者

    //箭頭函式訪問this例項 因為箭頭函式本身沒有繫結this
     setTimeout(() => { 
       console.log(this);
    }, 500);
    //使用變數訪問this例項
    let self=this;
        setTimeout(function () {  
          console.log(self);//使用self變數訪問this例項
        },1000);
複製程式碼

setInterval路由跳轉繼續執行並沒有銷燬

場景：

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

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

元件銷燬前執行的鉤子函式，跟其他生命週期鉤子函式的用法相同。

beforeDestroy(){
     //我通常是把setInterval()定時器賦值給this例項，然後就可以像下面這麼暫停。
    clearInterval(this.intervalid);
},
複製程式碼

vue 滾動行為(瀏覽器回退記憶位置)用法

這個我當時做的時候以為很難，後來做好了才發現就是一個設定而已（前提是要開啟路由的History 模式），下面做一個簡單的分享。

路由設定

  1. 要使用這一功能，首先需要開啟vue-router的 history模式

如果之前一直使用的是hash模式(預設模式)，專案已經開發了一段時間，然後轉history模式很可能會遇到：這些問題

  1. 滾動行為具體設定如下：

     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: [...]
 })
複製程式碼

vue滾動行為文件，可以進到這裡看看更詳細的資訊。

vue路由攔截瀏覽器後退實現草稿儲存類似需求

場景：

為了防止使用者突然離開，沒有儲存已輸入的資訊。

用法：

//在路由元件中：
mounted(){
},
beforeRouteLeave (to, from, next) {
  if(使用者已經輸入資訊){
    //出現彈窗提醒儲存草稿，或者自動後臺為其儲存
    
  }else{
    next(true);//使用者離開
  }
複製程式碼

類似的還有beforeEach、beforeRouteUpdate，也分為全域性鉤子和元件鉤子，見路由文件。

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

覺得v-once這個api蠻6的，應該很多小夥伴都沒有注意到這個api。

文件介紹：

v-once文件介紹

這個api在我看來主要用於那些一次性渲染，並且不會再有操作更改這些渲染的值，這樣就可以優化雙向繫結的更新效能。

文件推薦：對低開銷的靜態元件使用 v-once

儘管在 Vue 中渲染 HTML 很快，不過當元件中包含大量靜態內容時，可以考慮使用 v-once 將渲染結果快取起來，就像這樣：

Vue.component('terms-of-service', {
  template: '\
    <div v-once>\
      <h1>Terms of Service</h1>\
      ...很多靜態內容...\
    </div>\
  '
})
複製程式碼

vue風格指南推薦：

寫到這裡想到vue框架還有一個風格指南推薦，如下圖所示，大家也可以學習一波。

vue風格指南

小結

上面就是我分享的幾個小問題，希望大家看了能夠有所收穫！另：明年準備去上海，如果小夥伴的公司有坑，可以聯絡一下我。

最後：如需轉載，請放上原文連結並署名。碼字不易，感謝支援！本人寫文章本著交流記錄的心態，寫的不好之處，不撕逼，但是歡迎指點。然後就是希望看完的朋友點個喜歡，也可以關注一下我。 個人blog and 掘金個人主頁

以上2018.1.17

相關文章