Vue 實踐過程當中的幾個問題

前言

本篇是我在使用vue過程當中,遇到的幾個小問題和以前不瞭解的東西,記錄下來,但願可以幫助各位踩坑。若是喜歡的話能夠點波贊,或者關注一下,但願本文能夠幫到你們。html

本文首發於個人我的blog:obkoro1.comvue

本篇記錄我的遇到的問題以下:

  1. 路由變化頁面數據不刷新問題
  2. setTimeout/setInterval this指向改變,沒法用this訪問VUe實例
  3. setInterval路由跳轉繼續運行並無銷燬
  4. vue 滾動行爲(瀏覽器回退記憶位置)用法
  5. vue路由攔截瀏覽器後退實現草稿保存相似需求
  6. v-once 只渲染元素和組件一次,優化更新渲染性能
  7. vue框架風格指南推薦

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

場景:好比文章詳情數據,依賴路由的params參數獲取的(ajax寫在created生命週期裏面),由於路由懶加載的關係,退出頁面再進入另外一個文章頁面並不會運行created組件生命週期,致使文章數據仍是上一個文章的數據。ajax

解決方法: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尚未銷燬,還在繼續後臺調用,控制檯會不斷報錯,若是運算量大的話,沒法及時清除,會致使嚴重的頁面卡頓。vue-router

解決辦法:在組件生命週期beforeDestroy中止setInterval

組件銷燬前執行的鉤子函數,跟其餘生命週期鉤子函數的用法相同。api

beforeDestroy(){
     //我一般是把setInterval()定時器賦值給this實例,而後就能夠像下面這麼暫停。
    clearInterval(this.intervalid);
},
複製代碼

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

這個我當時作的時候覺得很難,後來作好了才發現就是一個設置而已(前提是要開啓路由的History 模式),下面作一個簡單的分享。瀏覽器

路由設置

  1. 要使用這一功能,首先須要開啓vue-router的 history模式

若是以前一直使用的是hash模式(默認模式),項目已經開發了一段時間,而後轉history模式極可能會遇到:這些問題緩存

  1. 滾動行爲具體設置以下:markdown

    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路由攔截瀏覽器後退實現草稿保存相似需求

場景:

爲了防止用戶忽然離開,沒有保存已輸入的信息。ide

用法:

//在路由組件中:
mounted(){
},
beforeRouteLeave (to, from, next) {
  if(用戶已經輸入信息){
    //出現彈窗提醒保存草稿,或者自動後臺爲其保存
    
  }else{
    next(true);//用戶離開
  }
複製代碼

相似的還有beforeEachbeforeRouteUpdate,也分爲全局鉤子和組件鉤子,見路由文檔

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

相關文章
相關標籤/搜索