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函数时，我们需要格外小心处理请求的频率，并确保代码的性能。