22. 组件生命周期

每个Vue组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到DOM，以及在数据改变时更新DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码

/**
 * 组件的生命周期
 * 1. 创建阶段:beforeCreate,created
 * 2. 挂载阶段:beforeMount,mounted
 * 3. 更新阶段:beforeUpdate,updated
 * 4. 销毁阶段:beforeUnmount,unmounted
 */

在 Vue 中，组件的生命周期是指从创建到销毁的整个过程。Vue 提供了多个钩子函数，允许我们在特定的阶段执行自定义逻辑。

生命周期阶段

Vue 组件的生命周期可以分为四个主要阶段：

1. 创建阶段

• beforeCreate()：组件实例刚刚被创建，此时数据观测和事件配置尚未初始化。
• created()：组件实例已经创建完成，数据观测、属性和事件方法已经配置好。

beforeCreate() {
  console.log('组件创建之前');
},
created() {
  console.log('组件创建完毕');
}

2. 挂载阶段

• beforeMount()：模板编译/挂载之前，此时还没有渲染 DOM。
• mounted()：模板渲染完成，此时可以访问 DOM 元素。

beforeMount() {
  console.log('组件挂载/渲染之前');
},
mounted() {
  console.log('组件挂载/渲染完毕');
}

3. 更新阶段

• beforeUpdate()：组件更新之前，响应式数据发生变化但 DOM 还未更新。
• updated()：组件更新完成后调用，此时 DOM 已经更新。

beforeUpdate() {
  console.log('组件更新之前');
},
updated() {
  console.log('组件更新完毕');
}

4. 销毁阶段

• beforeUnmount()：组件销毁之前调用，此时组件仍然完全可用。
• unmounted()：组件销毁完成后调用，此时所有指令已被解绑，子组件也已被销毁。

beforeUnmount() {
  console.log('组件销毁之前');
},
unmounted() {
  console.log('组件销毁完毕');
}

示例代码

以下是一个完整的示例，展示了如何在 App.vue 文件中使用这些生命周期钩子：

<script>
export default {
  beforeCreate() {
    console.log('组件创建之前');
  },
  created() {
    console.log('组件创建完毕');
  },
  beforeMount() {
    console.log('组件挂载/渲染之前');
  },
  mounted() {
    console.log('组件挂载/渲染完毕');
  },
  beforeUpdate() {
    console.log('组件更新之前');
  },
  updated() {
    console.log('组件更新完毕');
  },
  beforeUnmount() {
    console.log('组件销毁之前');
  },
  unmounted() {
    console.log('组件销毁完毕');
  }
};
</script>

<template>
  <h3>组件的生命周期</h3>
</template>

我们可以看到，页面加载完毕后，执行到了渲染完毕mounted().

那我们加一些代码，让页面数据可以产生变化。

app.vue

<script>
export default {
  data() {
    return {
      messgae: '更新之前'
    }
  },
  methods: {
    updataHandle() {
      this.messgae = '更新之后'
    }
  },
  beforeCreate() {
    console.log('组件创建之前')
  },
  created() {
    console.log('组件创建完毕')
  },
  beforeMount() {
    console.log('组件挂载/渲染之前')
  },
  mounted() {
    console.log('组件挂载/渲染完毕')
  },
  beforeUpdate() {
    console.log('组件更新之前')
  },
  updated() {
    console.log('组件更新完毕')
  },
  beforeUnmount() {
    console.log('组件销毁之前')
  },
  unmounted() {
    console.log('组件销毁完毕')
  }
}

</script>

<template>
  <h3>组件的生命周期</h3>
  <p>{{ messgae }}</p>
  <button @click="updataHandle">更新</button>
</template>

我们点击按钮后就可以看到

通过合理利用这些生命周期钩子，你可以在组件的不同阶段执行必要的操作，例如初始化数据、获取远程数据、清理资源等。这对于构建高效且可维护的 Vue 应用非常重要。