当前位置：首页 > article >正文

Vue.js的生命周期

article 2024/12/26 17:50:13

Vue.js 是一个构建用户界面的渐进式框架，它提供了一个响应式和组件化的方式来构建前端应用。了解 Vue 的生命周期对于开发者来说至关重要，因为它可以帮助我们更好地控制组件的状态和行为。本文将详细介绍 Vue 的生命周期，并提供相应的代码示例。

Vue 生命周期概览

Vue 实例的生命周期分为几个阶段：

创建阶段：包括实例的初始化和挂载。
运行阶段：组件正常运行，响应数据变化。
销毁阶段：组件被销毁前进行清理。

创建阶段

beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created：在实例创建完成后被立即调用，此时实例已完成数据观测、属性和方法的运算，$el 属性还未显示出来。

运行阶段

beforeMount：在挂载开始之前被调用，相关的 $el 属性已被创建，但尚未插入文档。
mounted：在 el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。

销毁阶段

beforeDestroy：在实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed：在实例销毁之后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

代码示例

下面是一个简单的 Vue 组件示例，展示了生命周期钩子的使用：

javascript

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  beforeCreate() {
    console.log('beforeCreate - 实例初始化，数据观测和事件/侦听器尚未被设置');
  },
  created() {
    console.log('created - 实例已创建，数据观测和事件/侦听器已经设置');
  },
  beforeMount() {
    console.log('beforeMount - 挂载开始前，$el 还未被创建');
  },
  mounted() {
    console.log('mounted - 挂载完成，$el 已经插入文档');
  },
  beforeDestroy() {
    console.log('beforeDestroy - 实例销毁前调用，实例仍然可用');
  },
  destroyed() {
    console.log('destroyed - 实例销毁后调用，实例不可用');
  }
};
</script>