快捷導(dǎo)航

vue使用技巧及vue項(xiàng)目中遇到的問(wèn)題

更新時(shí)間：2018年06月04日 15:43:22 作者：誌翔

這篇文章主要介紹了vue使用技巧及vue項(xiàng)目中遇到的問(wèn)題,本文給大家?guī)?lái)的只是一部分，后續(xù)還會(huì)持續(xù)更新，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧

這里給大家分享一下vue中的一些技巧，希望對(duì)大家有用處。（話不多說(shuō)上代碼）

1，vue路由攔截瀏覽器后退實(shí)現(xiàn)表單保存類(lèi)似需求（為了防止用戶突然離開(kāi)，沒(méi)有保存已輸入的信息。）

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

請(qǐng)參考vue文檔全局鉤子和組件鉤子

2，路由懶加載寫(xiě)法:

 // 我所采用的方法，個(gè)人感覺(jué)比較簡(jiǎn)潔一些，少了一步引入賦值。
 const router = new VueRouter({
  routes: [
  path: '/app',
  component: () => import('./app'), // 引入組件
  ]
 })
 // Vue路由文檔的寫(xiě)法:
 const app = () => import('./app.vue') // 引入組件
 const router = new VueRouter({
  routes: [
  { path: '/app', component: app }
  ]
 })

3，路由的項(xiàng)目啟動(dòng)頁(yè)和404頁(yè)面

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

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

4，setInterval路由跳轉(zhuǎn)繼續(xù)運(yùn)行并沒(méi)有銷(xiāo)毀問(wèn)題

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

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

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

這個(gè)地方大家的默認(rèn)方法肯定是:

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

其實(shí)這個(gè)地方我們可以用箭頭函數(shù)，因?yàn)榧^函數(shù)會(huì)改變this的指向，而指向的剛好是自己的父級(jí)this，所以我們可以這樣用：

 //箭頭函數(shù)訪問(wèn)this實(shí)例 因?yàn)榧^函數(shù)本身沒(méi)有綁定this
  setTimeout(() => { 
  console.log(this);
 }, 500);

這樣我們的this就是指向我們的vue實(shí)例了。

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

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

上代碼：

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

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

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

這個(gè)是vue專(zhuān)門(mén)為改變不了數(shù)組設(shè)定的一個(gè)方法，使用也很簡(jiǎn)單（如果還是不懂請(qǐng)參考vue文檔）

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

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

選項(xiàng)：deep

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

選項(xiàng)：immediate

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

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

總結(jié)

以上所述是小編給大家介紹的vue使用技巧及vue項(xiàng)目中遇到的問(wèn)題，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: