Vue生命周期函数调用详解

Vue的生命周期函数是Vue组件在实例化、更新、销毁等关键时刻自动执行的函数，我们可以通过实现这些函数来执行一些必要的逻辑操作。在开发Vue应用时，了解地址这些生命周期函数的调用顺序及其用途非常重要。本文将深入探讨Vue的生命周期函数，帮助大家更好地掌握Vue的使用技巧。

Vue生命周期函数分类

Vue中的生命周期函数分为四类：

创建期间的生命周期函数：在实例化Vue组件时自动调用。
更新期间的生命周期函数：在组件属性或数据发生变化时自动调用。
销毁期间的生命周期函数：在组件被销毁时自动调用。
负责 render 的生命周期函数：如 beforeMount、mounted。

接下来将重点介绍这些生命周期函数的调用时间、作用及其使用示例。

创建期间的生命周期函数

beforeCreate

函数调用时间：在实例化Vue组件时自动调用，此时组件的数据、事件和生命周期函数都尚未初始化。

作用：使用beforeCreate可以进行一些初始化工作，例如全局注册全局事件等。

使用示例：

export default {
  beforeCreate () {
    console.log('beforeCreate 正在执行')
    this.$on('create', () => {
      console.log('create事件被触发')
    })
  }
}

created

函数调用时间：在实例化Vue组件时自动调用，此时组件的数据已经被初始化。

作用：使用created可以进行一些组件需要用到数据的初始化工作，例如获取异步数据、初始化视图等。

使用示例：

export default {
  created () {
    console.log('created 正在执行')
    axios.get('/api/data')
    .then(response => {
      this.data = response.data
    })
  }
}

beforeMount

函数调用时间：在组件挂载DOM节点前自动调用。

作用：在beforeMount钩子函数中我们可以对组件的DOM节点进行修改，比如手动插入一个loading组件等。

使用示例：

export default {
  beforeMount() {
    console.log('beforeMount 正在执行')
    this.$refs.loading.show()
  }
}

mounted

函数调用时间：在组件挂载DOM节点后自动调用。

作用：使用mounted可以在组件的DOM节点准备就绪后执行一些操作，例如与第三方库进行交互、操作DOM节点等。

使用示例：

export default {
  mounted() {
    console.log('mounted 正在执行')
    const echartsInstance = this.$refs.echartsInstance
    const option = this.getOption()
    echartsInstance.setOption(option)
  }
}

更新期间的生命周期函数

beforeUpdate

函数调用时间：在组件数据变化后，DOM节点重新渲染之前自动调用。

作用：在beforeUpdate中可以进行一些节点操作，例如获取更新后的DOM节点高度等。

使用示例：

export default {
  beforeUpdate() {
    console.log('beforeUpdate 正在执行')
    const echartsInstance = this.$refs.echartsInstance
    const option = this.getOption()
    echartsInstance.setOption(option)
  }
}

updated

函数调用时间：在组件数据变化后，DOM节点重新渲染之后自动调用。

作用：使用updated可以进行当前DOM节点状态与前一状态之间的比较操作。

使用示例：

export default {
  updated() {
    console.log('updated 正在执行')
    const newHeight = this.$refs.echartsInstance.offsetHeight
    if (newHeight !== this.height) {
      this.height = newHeight
      this.$emit('height-change')
    }
  }
}

销毁期间的生命周期函数

beforeDestroy

函数调用时间：在组件被销毁之前自动调用。

作用：使用beforeDestroy可以进行组件销毁之前的一些操作，例如取消全局事件监听等。

使用示例：

export default {
  beforeDestroy() {
    console.log('beforeDestroy 正在执行')
    this.$off('click', this.handleClick)
  }
}

destroyed

函数调用时间：在组件被销毁之后自动调用。

作用：使用destroyed可以在组件被销毁后进行一些清理操作，例如清除定时器等。

使用示例：

export default {
  destroyed() {
    console.log('destroyed 正在执行')
    clearInterval(this.timer)
  }
}

负责 render 的生命周期函数

beforeMount

函数调用时间：在组件实例首次渲染之前调用，即在模板编译为渲染函数之后，渲染函数首次执行之前调用。

作用：在beforeMount函数调用期间，我们可以对Vue组件的模板进行更改，例如对其中的文本内容插入其他元素等。

使用示例：

export default {
  render(h) {
    console.log('render 正在执行')

    if (this.show) {
      return h('div', this.msg)
    } else {
      return null
    }
  }
}

mounted

函数调用时间：在组件实例首次渲染之后调用。

作用：使用mounted进行一些DOM操作，例如获取可滚动高度等。

使用示例：

export default {
  mounted() {
    console.log('mounted 正在执行')
    const container = this.$el.querySelector('.container')
    this.scrollHeight = container.scrollHeight
  }
}