Vue實(shí)踐過程中的幾個(gè)問題匯總

解決方法：watch監(jiān)聽路由是否變化

 watch: {
 '$route' (to, from) { //監(jiān)聽路由是否變化
 if(this.$route.params.articleId){//是否有文章id
 //獲取文章數(shù)據(jù)
 }
 }
}

setTimeout/setInterval this指向改變，無法用this訪問VUe實(shí)例

場(chǎng)景：

 mounted(){ 
 setTimeout(function () { //setInterval同理 
  console.log(this);//此時(shí)this指向Window對(duì)象
 },1000);
 }

解決方法：使用箭頭函數(shù)或者

 //箭頭函數(shù)訪問this實(shí)例 因?yàn)榧^函數(shù)本身沒有綁定this
 setTimeout(() => { 
 console.log(this);
 }, 500);
 //使用變量訪問this實(shí)例
 let self=this;
 setTimeout(function () { 
  console.log(self);//使用self變量訪問this實(shí)例
 },1000);

setInterval路由跳轉(zhuǎn)繼續(xù)運(yùn)行并沒有銷毀

場(chǎng)景：

比如一些彈幕，走馬燈文字，這類需要定時(shí)調(diào)用的，路由跳轉(zhuǎn)之后，因?yàn)榻M件已經(jīng)銷毀了，但是setInterval還沒有銷毀，還在繼續(xù)后臺(tái)調(diào)用，控制臺(tái)會(huì)不斷報(bào)錯(cuò)，如果運(yùn)算量大的話，無法及時(shí)清除，會(huì)導(dǎo)致嚴(yán)重的頁面卡頓。

解決辦法：在組件生命周期beforeDestroy停止setInterval

組件銷毀前執(zhí)行的鉤子函數(shù)，跟其他生命周期鉤子函數(shù)的用法相同。

beforeDestroy(){
 //我通常是把setInterval()定時(shí)器賦值給this實(shí)例，然后就可以像下面這么暫停。
 clearInterval(this.intervalid);
},

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

這個(gè)我當(dāng)時(shí)做的時(shí)候以為很難，后來做好了才發(fā)現(xiàn)就是一個(gè)設(shè)置而已（前提是要開啟路由的History 模式），下面做一個(gè)簡(jiǎn)單的分享。

路由設(shè)置

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

如果之前一直使用的是hash 模式(默認(rèn)模式)，項(xiàng)目已經(jīng)開發(fā)了一段時(shí)間，然后轉(zhuǎn)history模式很可能會(huì)遇到：這些問題

1. 滾動(dòng)行為具體設(shè)置如下：

   const router = new VueRouter({
   mode: 'history',
   scrollBehavior (to, from, savedPosition) {
   //savedPosition

   if (savedPosition) { //如果savedPosition存在，滾動(dòng)條會(huì)自動(dòng)跳到記錄的值的地方
    return savedPosition
   } else {
    return { x: 0, y: 0 }//savedPosition也是一個(gè)記錄x軸和y軸位置的對(duì)象
    }
   }，

   routes: [...]
   })

vue滾動(dòng)行為文檔，可以進(jìn)到這里看看更詳細(xì)的信息。

vue路由攔截瀏覽器后退實(shí)現(xiàn)草稿保存類似需求

場(chǎng)景：

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

用法：

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

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

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

覺得v-once這個(gè)api蠻6的，應(yīng)該很多小伙伴都沒有注意到這個(gè)api。

文檔介紹：

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

文檔推薦：對(duì)低開銷的靜態(tài)組件使用 v-once

盡管在 Vue 中渲染 HTML 很快，不過當(dāng)組件中包含大量靜態(tài)內(nèi)容時(shí)，可以考慮使用 v-once 將渲染結(jié)果緩存起來，就像這樣：

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

vue風(fēng)格指南推薦：

寫到這里想到vue框架還有一個(gè)風(fēng)格指南推薦，如下圖所示，大家也可以學(xué)習(xí)一波。

相關(guān)推薦：

Vue.js2.0變化小結(jié)分享

Vue.js 2.5新特性分享

Vue.js的組件和模板詳解

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com