Vue生命周期函數Vue.onActivated的詳解

在Vue的生命周期函數中，有一個非常重要的函數Vue.onActivated。它在Vue2.2版本中被引入，用於處理頁面的生命周期。下面從多個方面詳細講述Vue.onActivated的使用方法和注意事項。

一、Vue.onActivated與Vue.onMounted的區別

Vue.onMounted和Vue.onActivated是Vue中用於處理頁面生命周期的兩個重要函數。Vue.onMounted會在頁面被mount（創建）時執行，而Vue.onActivated則會在組件被激活（如從一個頁面跳轉到另一個頁面返回時）時執行。需要注意的是，只有使用Vue Router時，Vue.onActivated函數才會被觸發。

Vue.onActivated函數會在組件被激活時執行，而不是每次刷新頁面時都會執行。這意味着，當我們從另一個頁面返回時，組件會重新渲染，但只有Vue.onActivated函數會被執行。

Vue.onMounted(() => {
  console.log('Component mounted!')
})

Vue.onActivated(() => {
  console.log('Component activated!')
})

二、使用Vue.onActivated加載數據

Vue.onActivated函數是一個非常適合用於加載數據的函數。我們可以在Vue.onActivated函數執行時，通過發送異步請求來從後端加載數據，並將數據渲染到頁面上。

需要注意的是，Vue.onActivated函數會在每次組件被激活時執行，因此需要格外小心處理請求的頻率，並確保代碼的性能。

import axios from 'axios'

export default {
  data() {
    return {
      users: []
    }
  },
  methods: {
    loadUsers() {
      axios.get('/api/users').then(response => {
        this.users = response.data
      })
    }
  },
  onActivated() {
    this.loadUsers()
  }
}

三、Vue.onActivated中的路由參數

在Vue.onActivated函數中，可以通過$route對象訪問路由參數。我們可以通過這些參數來獲取一些特定的數據以供使用。

import axios from 'axios'

export default {
  data() {
    return {
      user: {}
    }
  },
  methods: {
    loadUser(userId) {
      axios.get(`/api/users/${userId}`).then(response => {
        this.user = response.data
      })
    }
  },
  onActivated() {
    const userId = this.$route.params.id
    this.loadUser(userId)
  }
}

四、使用Vue.onActivated處理頁面狀態

Vue.onActivated函數還可以用於處理頁面狀態。 例如，當用戶從另一個頁面返回到此頁面時，可能需要滾動到頁面的特定部分。 我們可以使用Vue.onActivated函數來完成此操作。

export default {
  data() {
    return {
      position: { x: null, y: null }
    }
  },
  onActivated() {
    window.scrollTo(this.position.x, this.position.y)
  },
  beforeRouteLeave() {
    this.position = {
      x: window.scrollX,
      y: window.scrollY
    }
  }
}

五、總結

Vue.onActivated是Vue中被廣泛運用的函數，其中最主要的用途之一是在組件被激活（從另一個頁面返回到此頁面）時加載數據和處理頁面狀態。需要注意的是，在使用Vue.onActivated函數時，我們需要格外小心處理請求的頻率，並確保代碼的性能。