vue生命周期

Vue.js 的生命周期指的是 Vue 实例从创建到销毁的整个过程，它包括了一系列的阶段和钩子函数，允许开发者在不同的阶段执行自定义逻辑。以下是 Vue.js 生命周期的概述：

生命周期阶段

  1. 创建前(beforeCreate)

  • 组件实例被创建，但属性和方法尚未初始化。

  • 此时 this 指向新创建的 Vue 实例。

  1. 创建后(created)

  • 组件实例创建完成，属性和方法已经初始化。

  • 可以访问和操作组件的数据。

  1. 载入前(beforeMount)
  • 组件模板编译完成，准备挂载到 DOM 上。
  1. 载入后(mounted)
  • 组件已经挂载到 DOM 上，可以操作 DOM 元素。
  1. 更新前(beforeUpdate)
  • 组件的数据更新前，可以获取当前 DOM 元素。
  1. 更新后(updated)
  • 组件数据更新后，可以获取更新后的 DOM 元素。
  1. 销毁前(beforeDestroy)
  • 组件实例即将被销毁，可以执行清理工作。
  1. 销毁后(destroyed)
  • 组件实例已经被销毁，所有的数据和事件监听器被移除。

示例代码

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  beforeCreate: function () {
    console.log('beforeCreate')；
    console.log(this)； // 此时 this 指向 Vue 实例
  },
  created: function () {
    console.log('created')；
    console.log(this.message)； // 此时可以访问 data 中的值
  },
  beforeMount: function () {
    console.log('beforeMount')；
  },
  mounted: function () {
    console.log('mounted')；
  },
  beforeUpdate: function () {
    console.log('beforeUpdate')；
  },
  updated: function () {
    console.log('updated')；
  },
  beforeDestroy: function () {
    console.log('beforeDestroy')；
  },
  destroyed: function () {
    console.log('destroyed')；
  }
})；

以上就是 Vue.js 的生命周期概述。每个阶段都有特定的用途，允许开发者根据需求在组件的不同生命周期阶段执行特定的逻辑。

Top
×
×