一文搞懂Vue八大生命周期钩子函数

一文搞懂Vue八大生命周期钩子函数

Vue组件的生命周期分为8个阶段，每个阶段都有对应的钩子函数，这些钩子函数可以让我们在组件的不同生命周期阶段做出相应的操作。以下是八大生命周期钩子函数：

1. beforeCreate

在实例化Vue对象之前，会先执行beforeCreate钩子函数。在这个阶段，实例的属性、方法等都没有被初始化，因此在这个钩子函数中不能访问到data、methods、props等数据，但可以访问到Vue实例上的一些属性和方法，比如$el、$data等。

new Vue({
  beforeCreate() {
    console.log('beforeCreate')
  }
})

2. created

在实例化Vue对象之后，会执行created钩子函数。在这个阶段，实例的属性、方法等已经被初始化完成，但是还未挂载到DOM上，因此在这个钩子函数中不能访问到DOM节点，但是可以访问到data、methods、props等数据。

new Vue({
  created() {
    console.log('created')
  }
})

3. beforeMount

在挂载Vue实例到DOM之前，会先执行beforeMount钩子函数。在这个阶段，Vue实例已经完成了数据的编译和渲染，但是还未挂载到DOM上。

new Vue({
  beforeMount() {
    console.log('beforeMount')
  }
})

4. mounted

在Vue实例挂载到DOM之后，会执行mounted钩子函数。在这个阶段，Vue实例已经挂载到DOM上，因此可以访问到DOM节点，也可以进行一些DOM操作。

new Vue({
  mounted() {
    console.log('mounted')
  }
})

5. beforeUpdate

当数据发生变化且需要更新到DOM时，会先执行beforeUpdate钩子函数。在这个阶段，Vue实例已经完成了数据的更新，但尚未重新渲染DOM，因此可以在此修改数据。

new Vue({
  beforeUpdate() {
    console.log('beforeUpdate')
  }
})

6. updated

当数据发生变化且已经更新到DOM时，会执行updated钩子函数。在这个阶段，Vue实例已经完成了数据的更新，也已经重新渲染了DOM，因此可以访问到更新后的DOM节点。

new Vue({
  updated() {
    console.log('updated')
  }
})

7. beforeDestroy

在Vue实例销毁之前，会先执行beforeDestroy钩子函数。在这个阶段，Vue实例依然可以访问到data、methods、props等数据和DOM节点，也可以进行一些销毁前的操作。

new Vue({
  beforeDestroy() {
    console.log('beforeDestroy')
  }
})

8. destroyed

在Vue实例销毁之后，会执行destroyed钩子函数。在这个阶段，Vue实例已经被销毁，因此不能再访问到Vue实例上的数据和方法，也不能进行DOM操作。

new Vue({
  destroyed() {
    console.log('destroyed')
  }
})

以上是Vue八大生命周期钩子函数的详解，需要注意的是，在使用Vue进行开发时，合理地利用这些钩子函数可以使我们更好地控制组件的生命周期和行为。

示例1：

下面是一个使用Vue生命周期钩子实现轮播图的示例代码。

<template>
  <div class="slider">
    <div class="slider-content" ref="slider">
      <div class="slider-item" v-for="(item, index) in list" :key="index">
        <img :src="item.src" alt="">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {src: 'img1.png'},
        {src: 'img2.png'},
        {src: 'img3.png'}
      ],
      timer: null,
      currentIndex: 0
    }
  },
  mounted() {
    this.start()
  },
  methods: {
    start() {
      this.timer = setInterval(() => {
        this.currentIndex++
        if (this.currentIndex >= this.list.length) {
          this.currentIndex = 0
        }
        this.$refs.slider.style.transform = 'translateX(-' + this.currentIndex * 100 + '%)'
      }, 2000)
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
}
</script>

示例2：

下面是一个使用Vue生命周期钩子实现登录鉴权的示例代码。

import Vue from 'vue'
import router from './router'
import store from './store'

router.beforeEach((to, from, next) => {
  const token = store.state.token
  if (to.meta.requireAuth && !token) {
    next({
      path: '/login',
      query: {redirect: to.fullPath}
    })
  } else {
    next()
  }
})

new Vue({
  router,
  store,
  beforeCreate() {
    store.dispatch('getUserInfo')
  }
}).$mount('#app')

上述代码中，beforeCreate钩子函数用于在Vue实例创建之前，从后端获取用户信息，store.dispatch()用于提交一个action，获取用户信息并保存到Vuex中。router.beforeEach()用于全局路由鉴权，判断用户是否已登录，如果没有登录则跳转到登录页。