Vue Activated詳解

一、Vue Activated是什麼？

Vue Activated是Vue生命周期函數中的一個階段，該階段發生在Vue實例被激活時。在這一階段，Vue實例已經完成了掛載和渲染，並準備好與DOM節點進行交互。

具體來說，當Vue組件被渲染到頁面上並且顯示出來時，就會激活Vue Activated這一生命周期鉤子函數。

二、Vue Activated有什麼用處？

Vue Activated可以讓我們在Vue組件被激活時進行一些必要的操作，比如：

1. 發送請求獲取數據

  
  export default {
    data() {
      return {
        dataList: []
      };
    },
    activated() {
      axios.get('/api/data').then(res => {
        this.dataList = res.data;
      });
    }
  }
  

在Vue Activated這一生命周期鉤子函數中發起請求，獲取數據並保存到組件的data屬性中。這樣做的好處是可以確保在組件顯示出來時，數據已經準備好了。

2. 初始化第三方插件或庫

  
  export default {
    activated() {
      $('.carousel').carousel();
    }
  }
  

在Vue組件被激活時，可以初始化第三方插件或庫，比如bootstrap的輪播組件carousel。這樣做可以確保插件或庫已經被正確初始化並且可以正常工作。

3. 路由參數的變化

  
  export default {
    computed: {
      userId() {
        return this.$route.params.id;
      }
    },
    activated() {
      console.log('userId:', this.userId);
    }
  }
  

在Vue Activated中可以檢測路由參數的變化，比如獲取動態路由參數id的值，並進行相應的操作。

三、Vue Activated注意事項

在使用Vue Activated時，有些需要注意的事項：

1. 不要和created混淆

Vue Activated和created是不同的生命周期函數，created發生在實例被創建時，而Vue Activated發生在實例被激活時。因此，在使用Vue Activated時一定要注意和created的區別。

2. 父組件和子組件的Activated順序問題

當一個父組件包含多個子組件時，Activated的觸發順序存在一定的問題。具體來說，當一個父組件被激活時，它的子組件的Activated不一定會按照父組件→第一個子組件→第二個子組件的順序觸發。可能會存在父組件→第二個子組件→第一個子組件的情況。因此，在進行相關操作時要注意組件Activated觸發的順序問題。

3. keep-alive組件與Vue Activated的配合使用

當使用keep-alive組件緩存組件時，Vue Activated只會在組件第一次被激活時觸發一次，如果組件緩存起來後再次激活時，Vue Activated不會被再次觸發。如果需要再次觸發Vue Activated，需要在keep-alive組件上添加include屬性或者exclude屬性來實現。

四、小結

Vue Activated是Vue生命周期函數中非常重要的一個階段，它發生在組件被激活時，通常用來進行一些跟DOM交互相關的操作，比如發送請求獲取數據，初始化第三方插件、檢測路由參數變化等。