我們在Vue實踐過程中總是會遇到些問題，本文我們就針對這些問題羅列出來並向大家分享解決辦法，希望能幫助到大家。
本篇記錄個人遇到的問題如下:
路由變更頁面資料不刷新問題
setTimeout/setInterval this指向改變，無法用this存取VUe實例
setInterval路由跳轉繼續運作並沒有銷毀
vue 滾動行為(瀏覽器回退記憶位置)用法
vue路由攔截瀏覽器後退實作草稿保存類似需求
v-once 只渲染元素和元件一次，最佳化更新渲染效能
vue框架風格指南推薦
場景：例如文章詳情數據，依賴路由的params參數獲取的(ajax寫在created生命週期裡面)，因為路由懶加載的關係，退出頁面再進入另一個文章頁面並不會運行created組件生命週期，導致文章資料還是上一個文章的資料。
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還沒有銷毀，還在繼續後台調用，控制台會不斷報錯，如果運算量大的話，無法及時清除，會導致嚴重的頁面卡頓。
元件銷毀前執行的鉤子函數，跟其他生命週期鉤子函數的用法相同。
beforeDestroy(){
//我通常是把setInterval()定时器赋值给this实例，然后就可以像下面这么暂停。
clearInterval(this.intervalid);
},這個我當時做的時候以為很難，後來做好了才發現就是一個設定而已（前提是要開啟路由的History 模式），下面做一個簡單的分享。
要使用此功能，首先需要開啟vue-router的history模式
如果之前一直使用的是hash 模式(預設模式)，專案已經開發了一段時間，然後轉history模式很可能會遇到：這些問題
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.component('terms-of-service', {
template: '\
<p v-once>\
<h1>Terms of Service</h1>\
...很多静态内容...\
</p>\
'
})類似的還有beforeEach、beforeRouteUpdate，也分為全域鉤子和元件鉤子，請參閱路由文件。
覺得v-once這個api蠻6的，應該很多小夥伴都沒注意到這個api。
這個api在我看來主要用於那些一次性渲染，並且不會再有操作更改這些渲染的值，這樣就可以優化雙向綁定的更新效能。
儘管在Vue 中渲染HTML 很快，不過當元件包含大量靜態內容時，可以考慮使用v-once將渲染結果快取起來，就像這樣：
rrreee寫到這裡想到vue框架還有一個風格指南推薦，如下圖所示，大家也可以學習一波。
相關推薦：
以上是Vue實踐過程中的幾個問題總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！
