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

解決方法：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軸位置的對象
    }
   }，

   routes: [...]
   })

vue滾動行為文檔，可以進到這里看看更詳細的信息。

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

場景：

為了防止用戶突然離開，沒有保存已輸入的信息。

用法：

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

類似的還有beforeEach、beforeRouteUpdate，也分為全局鉤子和組件鉤子，見路由文檔。

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

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

文檔介紹：

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

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

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

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

vue風格指南推薦：

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

相關推薦：

Vue.js2.0變化小結分享

Vue.js 2.5新特性分享

Vue.js的組件和模板詳解

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com