這里給大家分享一下Vue中的一些技巧，希望對大家有用處。（話不多說上代碼）

1. Vue路由攔截瀏覽器后退實現(xiàn)表單保存類似需求（為了防止用戶突然離開，沒有保存已輸入的信息。）

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

請參考Vue文檔全局鉤子和組件鉤子

2. 路由懶加載寫法:

// 我所采用的方法，個人感覺比較簡潔一些，少了一步引入賦值。 
const router = new VueRouter({ 
 routes: [ 
 path: '/app', 
 component: () => import('./app'), // 引入組件 
 ] 
}) 
// Vue路由文檔的寫法: 
const app = () => import('./app.vue') // 引入組件 
const router = new VueRouter({ 
 routes: [ 
 { path: '/app', component: app } 
 ] 
}) 
//前端全棧學(xué)習(xí)交流圈：866109386 
//面向1-3經(jīng)驗?zāi)昵岸碎_發(fā)人員 
//幫助突破技術(shù)瓶頸，提升思維能力 

3，路由的項目啟動頁和404頁面

一般項目都會設(shè)置這個，如果默認進入地址會跳到login頁面，如果你輸入的是一個沒有用的路由或者是空路由會跳轉(zhuǎn)到notFind頁面（你自己設(shè)置的404頁面）

export default new Router({ 
 routes: [ 
 { 
  path: '/', // 項目啟動頁 
  redirect:'/login' // 重定向到下方聲明的路由  
 }, 
 { 
  path: '*', // 404 頁面  
  component: () => import('./notFind') // 或者使用component也可以的 
 }, 
 ] 
}) 

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

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

beforeDestroy方法是生命周期里組件銷毀前執(zhí)行的鉤子函數(shù)，在離開的時候會觸發(fā)這個方法，這個方法在其他的地方也會有妙用，希望大家可以去了解一下。

5，setTimeout/setInterval this指向改變，無法用this訪問VUe實例

這個地方大家的默認方法肯定是:

//使用變量訪問this實例 
let self=this; 
 setTimeout(function () {  
  console.log(self);//使用self變量訪問this實例 
 },1000); 

其實這個地方我們可以用箭頭函數(shù)，因為箭頭函數(shù)會改變this的指向，而指向的剛好是自己的父級this，所以我們可以這樣用：

//箭頭函數(shù)訪問this實例 因為箭頭函數(shù)本身沒有綁定this 
 setTimeout(() => {  
 console.log(this); 
}, 500); 

這樣我們的this就是指向我們的vue實例了。

6，Vue 數(shù)組/對象更新 視圖不更新

方法一：直接使用最簡單也是最有效的方法，深拷貝對象或者數(shù)組，視圖會進行更新，不過會有一個缺點，深拷貝后的數(shù)組或者對象不是原來的那個數(shù)組或者對象，是你現(xiàn)在改變了之后的值。

上代碼：

你的對象或者數(shù)組=JSON.parse(JSON.stringify(你的對象或者數(shù)組))
先進行轉(zhuǎn)字符串，再轉(zhuǎn)回對象，這個就進行了一個拷貝的過程，會觸發(fā)視圖的改變，同時也進行了一個數(shù)組的替換，有利有弊。

方法二：this.$set(你要改變的數(shù)組/對象，你要改變的位置/key，你要改成什么value)

this.$set(this.arr, 0, "OBKoro1"); // 改變數(shù)組 
this.$set(this.obj, "c", "OBKoro1"); // 改變對象 

這個是vue專門為改變不了數(shù)組設(shè)定的一個方法，使用也很簡單（如果還是不懂請參考vue文檔）

7，深度watch與watch立即觸發(fā)回調(diào)

watch很多人都在用，但是這watch中的這兩個選項deep、immediate，或許不是很多人都知道，我猜。

選項：deep

在選項參數(shù)中指定 deep: true，可以監(jiān)聽對象中屬性的變化。

選項：immediate

在選項參數(shù)中指定 immediate: true, 將立即以表達式的當(dāng)前值觸發(fā)回調(diào)，也就是默認觸發(fā)一次。

watch: { 
 obj: { 
  handler(val, oldVal) { 
  console.log('屬性發(fā)生變化觸發(fā)這個回調(diào)',val, oldVal); 
  }, 
  deep: true // 監(jiān)聽這個對象中的每一個屬性變化 
 }, 
 step: { // 屬性 
  //watch 
  handler(val, oldVal) { 
  console.log("默認觸發(fā)一次", val, oldVal); 
  }, 
  immediate: true // 默認觸發(fā)一次 
 }, 
 },