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

文章目录

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

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()用于捕获组件内部错误等等。