聊聊vue生命周期钩子函数有哪些,分别什么时候触发

Vue是一种用于构建用户界面的渐进式框架，为方便开发者管理组件状态，Vue提供了一组生命周期钩子函数。

Vue组件生命周期分为创建阶段、更新阶段和销毁阶段三个阶段，每个阶段包含不同的生命周期函数。

创建阶段

在组件创建时，从上到下执行以下生命周期函数：
* beforeCreate：此时组件实例刚刚被创建，组件数据对象还没初始化，无法访问任何其他的生命周期函数和组件实例中的数据和方法。
* created：在组件实例创建后，可访问组件实例中的数据和方法，但是无法访问组件DOM，若需要操作DOM，需在组件挂载后使用mounted函数。

示例：

export default {
  beforeCreate() {
    console.log('beforeCreate')
  },
  created() {
    console.log('created')
  }
}

更新阶段

当组件实例的数据发生变化时，进入更新阶段，执行以下生命周期函数：
* beforeMount：此时组件的数据已经初始化，但是组件DOM还没有挂载。
* mounted：组件DOM挂载完成并显示在页面中。

示例：

export default {
  beforeMount() {
    console.log('beforeMount')
  },
  mounted() {
    console.log('mounted')
  }
}

销毁阶段

当组件实例销毁时，执行以下生命周期函数：
* beforeDestroy：组件实例销毁前，可做一些清除工作，如清除定时器等。
* destroyed：组件实例销毁，此时组件数据和方法、DOM元素、事件监听器等都已经被清除。

示例：

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

以上是Vue常用的生命周期钩子函数，熟练掌握和灵活应用这些函数能够更好地管理Vue组件状态，提升页面渲染性能，优化用户体验。