vue使用技巧，及遇到的問題

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

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

//在路由組件中：
mounted(){
},
beforeRouteLeave (to, from, next) {
  if(用戶已經輸入信息){
    //出現彈窗提醒保存表單，或者自動后台為其保存
    
  }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 }
      ]
    })

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

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

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

4，setInterval路由跳轉繼續運行並沒有銷毀問題

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

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

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

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

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

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

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

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

6，Vue 數組/對象更新 視圖不更新

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

上代碼：

你的對象或者數組=JSON.parse(JSON.stringify(你的對象或者數組))

先進行轉字符串，再轉回對象，這個就進行了一個拷貝的過程，會觸發視圖的改變，同時也進行了一個數組的替換，有利有弊。

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

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

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

7，深度watch與watch立即觸發回調

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

選項：deep

在選項參數中指定 deep: true，可以監聽對象中屬性的變化。

選項：immediate

在選項參數中指定 immediate: true, 將立即以表達式的當前值觸發回調，也就是默認觸發一次。

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

8，關於bus傳參問題，如果通過路由跳轉觸發bus不生效問題解決

//頁面1
  beforeDestroy () {
        bus.$emit('dataFromBus1',this.dataFromBus1);
  },

//頁面2
     beforeCreate () {
        bus.$on('dataFromBus1',function(url){
            bus.dataFromBus1 = url
        });        
    },    
    mounted () {
        this.dataFromBus1 = bus.dataFromBus1;       
    },

在頁面1通過$emit方法傳遞數據然后跳轉路由的時候，其實頁面2的$on監聽還沒有建立，因此無法得到數據！

so

在頁面1的beforeDestroy或者destroyed鈎子函數中emit數據，在頁面2的beforeCreate、created或者beforeMount鈎子函數中建立$on監聽事件，然后在頁面2的mounted鈎子函數中$on得到的數據賦值給頁面2的變量中。

這樣就可以解決路由傳值不觸發問題（主要還是生命周期執行順序的問題）

暫時先更新這些，后續還會繼續更新，希望會對你們有幫助，（還有就是關注走一波，哈哈）