Vue實踐過程中的幾個問題

2022-09-06 23:21:34 字數 1708 閱讀 9934

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

settimeout/setinterval this指向改變,無法用this訪問vue例項

setinterval路由跳轉繼續執行並沒有銷毀

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

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

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

vue框架風格指南推薦

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

watch: 

}}

mounted(),1000);

}

//箭頭函式訪問this例項 因為箭頭函式本身沒有繫結this

settimeout(() => , 500);

//使用變數訪問this例項

let self=this;

settimeout(function () ,1000);

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

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

beforedestroy(),
這個我當時做的時候以為很難,後來做好了才發現就是乙個設定而已(前提是要開啟路由的history 模式),下面做乙個簡單的分享。

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

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

滾動行為具體設定如下:

const router = new vuerouter( else //s**edposition也是乙個記錄x軸和y軸位置的物件}},

routes: [...]

})

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

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

//在路由元件中:

mounted(),

beforeroutele**e (to, from, next) else

類似的還有beforeeachbeforerouteupdate,也分為全域性鉤子和元件鉤子,見路由文件。

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

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

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

vue.component('terms-of-service', )
寫到這裡想到vue框架還有乙個風格指南推薦,如下圖所示,大家也可以學習一波。

MongoDB使用過程中遇到的幾個問題

1.因物業停電導致機房斷電,伺服器宕機,mongodb無法重啟的問題。刪除資料存放目錄下的.lock檔案,然後進行啟動即可。2.單點單個collection資料過多,查詢效能明顯降低的問題。至今總共經過了兩個階段的優化。第一階段 單個collection的資料超過12w時,查詢效能明顯下降。經過是這...

Linux中的幾個問題

明天期末考試,就把往年試卷上的敘述題總結一下 1.如果乙個設定使用者id程式未執行任何改變程序的實際使用者id和有效使用者id的系統呼叫,那麼執行該程式的程序,它的實際使用者id和有效使用者id各是什麼?答 實際使用者id在登入時取自口令檔案中的登入項,如果沒有執行任何改變實際使用者id和有效使用者...

boost log 中的幾個問題

boost 日誌示例中有乙個錯誤 下面這個檔案 應該在開頭加一行 include 否則會出下列錯錯誤 error c2027 使用了未定義型別 boost log v2s mt nt5 expressions aux date time formatter generator traits d li...