您的位置:

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