Vue的activated生命周期函數詳解

Vue.js是一個流行的JavaScript框架，它旨在通過引入MVVM模式來讓構建互動式用戶界面變得更容易。Vue.js為開發者提供了許多聲明性模板語法、組件系統、單向數據流。而生命周期函數就是Vue.js的一大特色之一，它允許開發者在組件不同的階段進行操作。這篇文章將針對Vue.js的activated生命周期函數進行詳細講解。

一、vue的activated函數是什麼

Vue.js中有許多生命周期函數，比如mounted、updated、destroyed等等，activated也是其之一。activated函數在Vue組件每次被載入到頁面中時調用，比如在Vue Router中，當路由切換到該組件時就會被調用。activated函數的主要作用是執行特定的操作，比如從伺服器請求數據、載入資源等等。

下面是activated函數的基本語法示例：

<template>
  <div></div>
</template>

<script>
export default {
  activated: function () {
    console.log('我被激活了');
  }
}
</script>

上面的代碼展示了如何使用activated函數。當組件被激活時，該函數會在控制台輸出「我被激活了」。

二、vue的activated生命周期有哪些

1.訪問組件props

在activated生命周期中，可以通過this.$route.params等方法訪問組件props。下面是一個例子：

<template>
  <div></div>
</template>

<script>
export default {
  activated: function () {
    console.log(this.$route.params.id);
  }
}
</script>

上面代碼中，activated函數通過this.$route.params訪問了組件props的值。在此之前，在組件的created和mounted生命周期中是無法訪問到組件props值的。

2.路由守衛

Vue Router提供了一組路由守衛，這些守衛用於在路由跳轉時對路由進行攔截和操作。在activated生命周期中，可以通過Vue Router提供的beforeEnter守衛來攔截和處理路由跳轉。

<template>
  <div></div>
</template>

<script>
export default {
  beforeEnter: function (to, from, next) {
    console.log('我進入了路由');
    next();
  },
  activated: function () {
    console.log('我被激活了');
  }
}
</script>

上面代碼中，beforeEnter和activated都是生命周期函數。beforeEnter函數被執行到時，組件將被註冊到路由的beforeEnter守衛中。

3.組件狀態管理

在Vue.js中，組件狀態管理一直是一個非常重要的話題。activated生命周期函數可以用來控制組件的狀態，讓組件可以在激活之後自動執行某些操作。

<template>
  <div></div>
</template>

<script>
export default {
  activated: function () {
    if (this.isFirstTime) {
      this.isFirstTime = false;
      this.loadDataFromServer();
    }
  }
}
</script>

上面代碼中，activated生命周期函數可以在組件被激活時檢查isFirstTime狀態，如果是第一次被激活，則發送請求從伺服器載入數據。

三、vue的activated注意事項

1.鉤子函數執行順序問題

Vue.js中的鉤子函數是按照一定順序被執行的。在activated函數中，可以在beforeRouteEnter、created和mounted之後被執行，但是不建議在activated函數中更新data裡面的數據。原因是當該組件被緩存後，再次被激活時，data裡面的數據不會重新創建，而是直接使用之前的緩存。所以如果需要更新某些數據，應該在mounted中進行操作。

2.activated只能在組件實例中使用

activated生命周期函數只能在組件實例中使用，如果在非組件實例中使用，會導致一些錯誤信息。在Vue.js中，組件實例是在Vue.extend或new Vue時自動創建的。

3.activated函數對應的deactivated函數

activated生命周期函數的對應函數是deactivated。在組件離開時會自動調用deactivated函數。所以如果需要在組件進入時執行某些操作，在組件離開時要進行相應的清理工作。

<template>
  <div></div>
</template>

<script>
export default {
  activated: function () {
    console.log('組件進入了');
  },
  deactivated: function () {
    console.log('組件離開了');
  }
}
</script>

四、小結

activated生命周期函數是Vue.js框架中非常重要的一部分內容，可以在組件激活時執行特定的操作，比如從伺服器檢索數據等等。開發者可以利用activated函數對組件props進行訪問、進行路由守衛、組件狀態管理等等。在activated函數中需要注意鉤子函數執行順序問題、只能在組件實例中使用以及與deactivated函數的關聯。