首頁 > web前端 > js教程 > 主體

Vue實踐過程中的幾個問題總結

小云云
發布: 2018-01-29 13:14:47
原創
1691 人瀏覽過

我們在Vue實踐過程中總是會遇到些問題,本文我們就針對這些問題羅列出來並向大家分享解決辦法,希望能幫助到大家。

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

  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) {
    //savedPosition

    if (savedPosition) { //如果savedPosition存在,滚动条会自动跳到记录的值的地方
      return savedPosition
    } else {
      return { x: 0, y: 0 }//savedPosition也是一个记录x轴和y轴位置的对象
     }
    },
    登入後複製
    #
    //在路由组件中:
    mounted(){
    },
    beforeRouteLeave (to, from, next) {
      if(用户已经输入信息){
        //出现弹窗提醒保存草稿,或者自动后台为其保存
        
      }else{
        next(true);//用户离开
      }
    登入後複製

    routes: [...]
    })

vue滾動行為文檔,可以轉到這裡看看更詳細的資訊。

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

場景:

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

用法:

Vue.component('terms-of-service', {
  template: '\
    <p v-once>\
      <h1>Terms of Service</h1>\
      ...很多静态内容...\
    </p>\
  '
})
登入後複製

類似的還有beforeEachbeforeRouteUpdate,也分為全域鉤子和元件鉤子,請參閱路由文件。

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

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

文件介紹:

Vue實踐過程中的幾個問題總結

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

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

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

rrreee

vue風格指南推薦:

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

Vue實踐過程中的幾個問題總結

相關推薦:

Vue.js2.0變化小結分享

Vue.js 2.5新功能分享

#Vue.js的元件和範本詳解



#

以上是Vue實踐過程中的幾個問題總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!