生命周期

钩子函数执行顺序

这些函数分为四个阶段：创建阶段、挂载阶段、更新阶段和销毁阶段。

创建阶段

在这个阶段，Vue 实例正在初始化。在这个阶段，Vue 实例将设置数据观察和事件、虚拟节点等。

• beforeCreate：在实例化之后，初始化之前执行。
• created：在实例化之后，初始化之后执行。

挂载阶段

在这个阶段，Vue 实例正在准备把自己渲染到DOM中。

• beforeMount：在挂载开始之前执行。
• mounted：在挂载结束后执行。

更新阶段

在这个阶段，Vue 实例正在更新DOM元素以反映数据变化。

• beforeUpdate：在数据改变导致DOM重新渲染之前执行。
• updated：在DOM重新渲染并应用更改之后执行。

销毁阶段

在这个阶段，Vue 实例正在被销毁。

• beforeDestroy：在实例被销毁之前执行。
• destroyed：在实例被销毁之后执行。

实际应用

beforeCreate

这个钩子函数在实例被创建之后立即调用。这是一个很好的地方来添加全局事件监听器，或初始化全局状态。

export default {
  beforeCreate() {
    console.log('beforeCreate: ', this.$store.state)
    this.$store.commit('increment')
  }
}

使用了 Vuex 状态管理库。在 beforeCreate 钩子函数中打印当前状态，并调用 increment 方法来增加状态。

created

created 钩子函数在实例被创建后被调用，但是在模板渲染之前。这是一个很好的地方来添加更多的全局事件监听器，或初始化局部状态。

export default {
  created() {
    console.log('created: ', this.$store.state)
  }
}

在 created 钩子函数中打印了当前状态。请注意，此时模板还没有被渲染，所以无法在这个钩子函数中访问渲染的DOM元素。

ounted

在 mounted 钩子函数中，实例已经被挂载到DOM中。这是执行DOM操作和访问渲染DOM元素的好地方。

export default {
  mounted() {
    console.log('mounted: ', this.$el)
  }
}

在 mounted 钩子函数中打印了 $el 属性，它是实例根元素的DOM节点。可以使用 $refs 来访问子组件的DOM元素。

beforeUpdate

在数据改变导致DOM重新渲染之前，beforeUpdate 钩子函数被调用。这是一个很好的地方来执行一些计算，但是请注意，此时DOM元素尚未更新。

export default {
  beforeUpdate() {
    console.log('beforeUpdate: ', this.message)
    this.message = 'Updated message'
  }
}

在 beforeUpdate 钩子函数中打印了 message 属性，并将其更新为“Updated message”。

updated

在DOM重新渲染并应用更改之后，updated 钩子函数被调用。这是一个很好的地方来访问更新后的DOM元素。

export default {
  updated() {
    console.log('updated: ', this.$el)
  }
}

在 updated 钩子函数中打印了 $el 属性，它是实例根元素的DOM节点。请注意，此时可以访问更新后的DOM元素。

beforeDestroy

在实例被销毁之前，beforeDestroy 钩子函数被调用。这是一个很好的地方来清除事件监听器和取消订阅。

export default {
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
    this.unsubscribe()
  }
}

在 beforeDestroy 钩子函数中移除了 resize 事件监听器，并取消了订阅。

destroyed

在实例被销毁之后，destroyed 钩子函数被调用。在这个时候，实例所有的事件监听器和观察者已经被移除。

export default {
  destroyed() {
    console.log('destroyed')
  }
}

在 destroyed 钩子函数中打印了一条消息。