『VUE』30. 生命周期的介绍（详细图文注释）

生命周期

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

生命周期的8阶段

  beforeCreate() {console.log("创建之前~");},created() {console.log("创建完毕");},beforeMount() {console.log("挂载之前");},mounted() {console.log("挂载完毕");},beforeUpdate() {console.log("更新之前");},updated() {console.log("更新完毕");},beforeUnmount() {console.log("销毁之前");},unmounted() {console.log("销毁完毕");},

生命周期小例子

我们更新数据后就会自动触发更新之前和更新之后的方法

修改了message之前
在这里插入代码片
修改了message之后
在这里插入图片描述
app.vue

<template><h3>生命周期</h3><p>{{ message }}</p><button @click="updatedData">修改数据</button>
</template><script>
export default {data() {return {message: "qwer",};},methods: {updatedData() {this.message = this.message + "asdf";},},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>