Vue生命周期函数执行顺序（使用注意事项）

川长思鸟来 2024-03-22 15:15 14阅读 0赞

#### 文章目录 ####

*  beforeCreate
 *  created
 *  beforeMount
 *  mounted
 *  beforeUpdate
 *  updated
 *  beforeDestroy
 *  destroyed

Vue.js 是一个基于 MVVM 模式的前端框架，它的核心是一个响应式的数据绑定系统。在 Vue.js 中，组件是一个可复用的 Vue 实例，它拥有自己的生命周期钩子函数，用于在组件生命周期的不同阶段执行一些特定的逻辑。下面通过例子介绍一下常见的 Vue 组件生命周期：  
![在这里插入图片描述][2c5c460847c940fa9e4a25292d60271d.webp_pic_center]

## beforeCreate ##

beforeCreate()：在实例被创建之初执行的函数。在这个钩子函数中，可以进行一些初始化的操作，例如初始化数据、注入组件等等。该函数执行时，Vue实例的数据观测和事件配置都还没有被设置，所以不能访问实例的this属性，也不能访问DOM元素。

<template>
      <div>{
        {
         message }}</div>
    </template>
    
    <script>
    export default {
        
      beforeCreate() {
        
        console.log('beforeCreate')
        this.message = 'Hello, Vue!'
      },
      created() {
        
        console.log('created')
      },
      data() {
        
        return {
        
          message: ''
        }
      }
    }
    </script>

示例中，beforeCreate钩子函数中设置了message属性的值为’Hello, Vue!'。在created钩子函数中，可以看到这个属性已经被设置，所以可以将其渲染到模板中。

注意：beforeCreate钩子函数只会在实例被创建之初执行一次，之后不会再执行。如果需要在实例更新之前进行一些操作，可以使用beforeUpdate钩子函数。

## created ##

created()：在实例被创建之后立即执行。在这个钩子函数中，可以进行一些初始化的操作，例如获取数据、设置计算属性等等。在这个钩子函数被执行时，Vue实例已经完成了数据观测和事件配置，但还没有开始DOM编译和挂载，所以仍然不能访问DOM元素。

<template>
      <div>{
        {
         message }}</div>
    </template>
    
    <script>
    export default {
        
      created() {
        
        console.log('created')
        this.getMessage()
      },
      data() {
        
        return {
        
          message: ''
        }
      },
      methods: {
        
        getMessage() {
        
          // 获取数据的方法
          this.message = 'Hello, Vue!'
        }
      }
    }
    </script>

示例中，created钩子函数中调用了getMessage方法来获取数据并设置了message属性的值。在模板中，可以看到这个属性已经被渲染出来了。

注意：created钩子函数只会在实例被创建之后执行一次，之后不会再执行。如果需要在实例更新之后进行一些操作，可以使用updated钩子函数。

## beforeMount ##

beforeMount()：在实例挂载之前执行。在这个钩子函数中，可以对模板进行一些编译和渲染前的操作。在这个钩子函数被执行时，Vue实例已经完成了数据观测和计算属性的计算，但还没有开始DOM编译和挂载。

<template>
      <div ref="myDiv">{
        {
         message }}</div>
    </template>
    
    <script>
    export default {
        
      beforeMount() {
        
        console.log('beforeMount')
        this.$refs.myDiv.style.color = 'red'
      },
      data() {
        
        return {
        
          message: 'Hello, Vue!'
        }
      }
    }
    </script>

示例中，beforeMount钩子函数中设置了myDiv元素的颜色为红色。在模板中，可以看到这个颜色已经被应用到了渲染出来的元素中。

注意：beforeMount钩子函数只会在实例挂载之前执行一次，之后不会再执行。如果需要在实例销毁之前进行一些操作，可以使用beforeDestroy钩子函数。

## mounted ##

mounted()：在实例挂载之后立即执行。在这个钩子函数中，可以对模板进行一些操作，例如访问DOM元素、使用第三方插件等等。在这个钩子函数被执行时，Vue实例已经完成了DOM编译和挂载，所以可以访问DOM元素。

<template>
      <div ref="myDiv">{
        {
         message }}</div>
    </template>
    
    <script>
    export default {
        
      mounted() {
        
        console.log('mounted')
        this.$refs.myDiv.style.color = 'red'
      },
      data() {
        
        return {
        
          message: 'Hello, Vue!'
        }
      }
    }
    </script>

示例中，mounted钩子函数中设置了myDiv元素的颜色为红色。在模板中，可以看到这个颜色已经被应用到了渲染出来的元素中。

注意：，mounted钩子函数只会在实例挂载之后执行一次，之后不会再执行。如果需要在实例更新之后进行一些操作，可以使用updated钩子函数。如果需要在实例销毁之前进行一些操作，可以使用beforeDestroy钩子函数。

## beforeUpdate ##

beforeUpdate()：在数据更新之前立即执行。在这个钩子函数中，可以进行一些数据更新前的操作，例如获取更新前的DOM信息等等。在这个钩子函数被执行时，Vue实例已经完成了数据的计算和渲染，但还没有开始DOM重新渲染。

<template>
      <div>{
        {
         message }}</div>
    </template>
    
    <script>
    export default {
        
      beforeUpdate() {
        
        console.log('beforeUpdate')
      },
      data() {
        
        return {
        
          message: 'Hello, Vue!'
        }
      },
      methods: {
        
        updateMessage() {
        
          this.message = 'Hello, World!'
        }
      }
    }
    </script>

示例中，定义了一个updateMessage方法，用于更新message属性的值。在点击按钮之后，message属性的值将会被更新，并且beforeUpdate钩子函数会被执行。

注意：beforeUpdate钩子函数只会在数据更新之前执行一次，之后不会再执行。如果需要在数据更新之后进行一些操作，可以使用updated钩子函数。

## updated ##

updated()：在数据更新之后立即执行。在这个钩子函数中，可以对更新后的DOM进行操作，例如获取更新后的DOM信息等等。在这个钩子函数被执行时，Vue实例已经完成了数据的计算和渲染，也完成了DOM重新渲染。

<template>
      <div ref="myDiv">{
        {
         message }}</div>
      <button @click="updateMessage">Update Message</button>
    </template>
    
    <script>
    export default {
        
      updated() {
        
        console.log('updated')
        this.$refs.myDiv.style.color = 'red'
      },
      data() {
        
        return {
        
          message: 'Hello, Vue!'
        }
      },
      methods: {
        
        updateMessage() {
        
          this.message = 'Hello, World!'
        }
      }
    }
    </script>

示例中，定义了一个updateMessage方法，用于更新message属性的值。在点击按钮之后，message属性的值将会被更新，并且updated钩子函数会被执行。在updated钩子函数中，将myDiv元素的颜色设置为红色。

注意：updated钩子函数只会在数据更新之后执行一次，之前不会执行。如果需要在数据更新之前进行一些操作，可以使用beforeUpdate钩子函数。如果需要在实例销毁之前进行一些操作，可以使用beforeDestroy钩子函数。

## beforeDestroy ##

beforeDestroy()：在实例销毁之前立即执行。在这个钩子函数中，可以进行一些实例销毁前的操作，例如清除定时器、取消事件监听等等。

<template>
      <div>{
        {
         message }}</div>
      <button @click="destroy">Destroy Instance</button>
    </template>
    
    <script>
    export default {
        
      beforeDestroy() {
        
        console.log('beforeDestroy')
        // 清除定时器、取消事件监听等等
      },
      data() {
        
        return {
        
          message: 'Hello, Vue!'
        }
      },
      methods: {
        
        destroy() {
        
          this.$destroy()
        }
      }
    }
    </script>

示例中，定义了一个destroy方法，用于销毁Vue实例。在点击按钮之后，beforeDestroy钩子函数会被执行。

注意：beforeDestroy钩子函数只会在实例销毁之前执行一次，之后不会再执行。如果需要在实例销毁之后进行一些操作，可以使用destroyed钩子函数。

## destroyed ##

destroyed()：在实例销毁之后立即执行。在这个钩子函数中，可以进行一些实例销毁后的操作，例如清除定时器、取消事件监听等等。

<template>
      <div>{
        {
         message }}</div>
      <button @click="destroy">Destroy Instance</button>
    </template>
    
    <script>
    export default {
        
      destroyed() {
        
        console.log('destroyed')
        // 清除定时器、取消事件监听等等
      },
      data() {
        
        return {
        
          message: 'Hello, Vue!'
        }
      },
      methods: {
        
        destroy() {
        
          this.$destroy()
        }
      }
    }
    </script>

示例中，定义了一个destroy方法，用于销毁Vue实例。在点击按钮之后，destroyed钩子函数会被执行。

注意：destroyed钩子函数只会在实例销毁之后执行一次，之前不会执行。如果需要在实例销毁之前进行一些操作，可以使用beforeDestroy钩子函数。

另外，Vue.js还提供了其他一些生命周期函数，如activated()和deactivated()用于处理组件的激活和非激活状态，errorCaptured()用于捕获组件内部错误等等。

[2c5c460847c940fa9e4a25292d60271d.webp_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/fd4bd37f9a9c48adbd40f46d5e75bdc4.png