Vue 中的生命周期钩子函数有哪些 分别在什么时候触发

前言

Vue是一款现代的JavaScript框架，它提供了丰富的功能和灵活的API，用于构建Web界面。其中一个重要的概念是生命周期钩子函数。生命周期钩子函数允许我们在Vue实例的不同阶段执行特定的操作，比如在实例创建之前进行初始化，或在实例销毁之前进行清理。接下来，我们将介绍Vue中常用的生命周期钩子函数，包括它们的触发时机和用途。

1. beforeCreate

在实例初始化之后，数据观测和事件配置之前触发该钩子函数。在这个阶段，Vue实例尚未完成初始化，因此访问实例的数据和方法都是不可用的。对于一些初始化操作，比如在创建实例之前加载全局配置、获取初始数据，可以在此阶段执行。

new Vue({
  beforeCreate: function() {
    // 在此阶段执行一些初始化操作
  }
})

2. created

在实例创建完成后立即触发该钩子函数。在这个阶段，Vue实例已经完成了数据观察、属性计算、方法设置、事件监听等配置。但是，DOM还没有挂载，因此在此阶段无法访问到DOM元素。通常，在这个阶段我们可以进行一些异步操作，比如发送网络请求、订阅WebSocket等。

new Vue({
  created: function() {
    // 在此阶段执行一些异步操作
  }
})

3. mounted

在实例挂载到页面上后触发该钩子函数。此时，Vue实例的根DOM元素已经被创建并插入到页面中，可以通过DOM操作访问和修改页面元素。通常，在这个阶段我们可以执行一些需要操作DOM的任务，比如初始化第三方插件、添加事件监听器。

new Vue({
  mounted: function() {
    // 在此阶段执行一些DOM操作
  }
})

4. beforeDestroy

在实例销毁之前触发该钩子函数。在这个阶段，实例仍然完全可用，可以访问实例的数据和方法。需要注意的是，此时实例的DOM元素仍然存在。这个钩子函数常用于执行一些清理操作，比如取消订阅、销毁定时器、解绑事件监听器等。

new Vue({
  beforeDestroy: function() {
    // 执行一些清理操作
  }
})

除了上述的生命周期钩子函数，Vue还提供了一些其他的钩子函数，如mounted、updated、beforeUpdate等，用于满足不同的需求。掌握这些生命周期钩子函数的触发时机和用途，有助于我们更好地理解Vue实例的生命周期，并能够针对不同的场景编写出优雅的代码。