本篇是我在使用vue過程當中,遇到的幾個小問題和以前不瞭解的東西,記錄下來,但願可以幫助各位踩坑。若是喜歡的話能夠點波贊,或者關注一下,但願本文能夠幫到你們。html
本文首發於個人我的blog:obkoro1.comvue
場景:好比文章詳情數據,依賴路由的
params
參數獲取的(ajax寫在created生命週期裏面),由於路由懶加載的關係,退出頁面再進入另外一個文章頁面並不會運行created組件生命週期,致使文章數據仍是上一個文章的數據。ajax
watch: {
'$route' (to, from) { //監聽路由是否變化
if(this.$route.params.articleId){//是否有文章id
//獲取文章數據
}
}
}
複製代碼
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尚未銷燬,還在繼續後臺調用,控制檯會不斷報錯,若是運算量大的話,沒法及時清除,會致使嚴重的頁面卡頓。vue-router
組件銷燬前執行的鉤子函數,跟其餘生命週期鉤子函數的用法相同。api
beforeDestroy(){
//我一般是把setInterval()定時器賦值給this實例,而後就能夠像下面這麼暫停。
clearInterval(this.intervalid);
},
複製代碼
這個我當時作的時候覺得很難,後來作好了才發現就是一個設置而已(前提是要開啓路由的History 模式),下面作一個簡單的分享。瀏覽器
若是以前一直使用的是hash
模式(默認模式),項目已經開發了一段時間,而後轉history模式極可能會遇到:這些問題緩存
滾動行爲具體設置以下: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滾動行爲文檔,能夠進到這裏看看更詳細的信息。框架
爲了防止用戶忽然離開,沒有保存已輸入的信息。ide
//在路由組件中:
mounted(){
},
beforeRouteLeave (to, from, next) {
if(用戶已經輸入信息){
//出現彈窗提醒保存草稿,或者自動後臺爲其保存
}else{
next(true);//用戶離開
}
複製代碼
相似的還有beforeEach
、beforeRouteUpdate
,也分爲全局鉤子和組件鉤子,見路由文檔。
以爲v-once這個api蠻6的,應該不少小夥伴都沒有注意到這個api。
這個api在我看來主要用於那些一次性渲染,而且不會再有操做更改這些渲染的值,這樣就能夠優化雙向綁定的更新性能。
儘管在 Vue 中渲染 HTML 很快,不過當組件中包含大量靜態內容時,能夠考慮使用 v-once 將渲染結果緩存起來,就像這樣:
Vue.component('terms-of-service', {
template: '\
<div v-once>\
<h1>Terms of Service</h1>\
...不少靜態內容...\
</div>\
'
})
複製代碼
寫到這裏想到vue框架還有一個風格指南推薦,以下圖所示,你們也能夠學習一波。
上面就是我分享的幾個小問題,但願你們看了可以有所收穫!另:明年準備去上海,若是小夥伴的公司有坑,能夠聯繫一下我。
最後:如需轉載,請放上原文連接並署名。碼字不易,感謝支持!本人寫文章本着交流記錄的心態,寫的很差之處,不撕逼,可是歡迎指點。而後就是但願看完的朋友點個喜歡,也能夠關注一下我。 我的blog and 掘金我的主頁
以上2018.1.17