Vue之生命周期函数详解

下面是Vue的生命周期函数详解：

Vue生命周期函数详解

Vue实例在被创建、挂载/销毁到DOM以及更新等状态时，会触发一些钩子函数，这些钩子函数就被称为Vue的生命周期函数。Vue的生命周期函数可以让我们在组件中的关键事件发生时执行我们自己的代码逻辑。

在Vue中生命周期函数按执行顺序分为以下三类：

1. 创建阶段：initialization
2. 更新阶段：mounting, updating, destroying
3. 渲染阶段：rendering

下面我们对每个生命周期函数进行详细介绍。

创建阶段

beforeCreate

在实例初始化之后，数据观测和事件配置之前被调用。

示例：

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

created

实例创建完成后被立即调用。在这一步中，实例已经完成了数据观测和事件配置，但尚未开始DOM编译和挂载。

示例：

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

更新阶段

beforeMount

在挂载开始之前被调用：相关的render函数首次被调用。

示例：

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

mounted

在el被新创建的vm.$el替换，并挂载到实例上去之后调用的钩子函数。

示例：

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

beforeUpdate

数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。

示例：

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

updated

由于数据更改导致的虚拟DOM重新渲染和打补丁操作完成后调用。

示例：

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

beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。

示例：

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

destroyed

实例销毁后调用。销毁后，Vue实例指示的所有东西都解除绑定，所有的事件监听器，所有子实例也被销毁。在这一步，实例已经被完全解除，不能够访问任何属性和方法。

示例：

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

渲染阶段

render

作用：创建虚拟DOM，并渲染到页面。

示例：

new Vue({
  render: function(createElement) {
    return createElement('div', 'Hello, World!')
  }
})

以上就是Vue的生命周期函数的详细介绍。在业务开发中，开发者常用的生命周期函数有created、mount和destroyed。需要注意的是，不同的业务场景需要使用不同的生命周期函数。