vue2和vue3中的生命周期最近在学习vue3的生命周期然后顺手写的一些学习笔记，加深自己的印象，巩固自己的记忆，也锻

最近在学习vue3的生命周期然后顺手写的一些学习笔记，加深自己的印象，巩固自己的记忆，也锻炼下自己的写作表达能力

首先让我们先了解下一个单页面的生命周期过程

创建(created)
挂载(mounted)
更新(updated)
销毁(destoryed)

这就是一个页面从创建到再到挂载，更新销毁经历的过程，分为四个阶段，又分为八个钩子函数在页面执行时 vue2的生命周期执行顺序请仔细看下面这段代码的打印结果

beforeCreate() {
    console.log('vue2的beforeCreate,vue实例还未创建,数据观测和事件初始化还未开始')
  },
  created() {
    console.log('vue2的Created, vue实例已创建，实例配置的options：datat methods watch
    computed等初始化配置完成，但此阶段渲染的节点还未挂载到DOM上去，所以不能访问el属性。
    在此阶段可以完成数据初始化、对初始化数据绑定事件的相关操作、以及发送ajax请求等')
  },
  beforeMount() {
    console.log('vue2的beforeMount,在这个阶段已经编译好模板，
    并将data里面的数据和模板生成html，但此时还未挂载html到页面上')
  },
  mounted() {
    console.log('vue2的Mounted,完成将模板中的html渲染到页面，
    在此阶段可以操作DOM元素，获取渲染元素对应的dom节点')
  },
  beforeUpdate() {
    console.log('vue2的beforeUpdate,在监听到数据变化之后触发，
    此阶段虽然已经拿到最新的数据，但还未渲染到视图上去')
  },
  updated() {
    console.log('vue2的Updated,执行时已经将更新后的数据渲染到页面，
    在页面中可以看到最新的数据')
  },
  beforeDestroy() {
    console.log('vue2的beforeDestroy,在实例销毁前调用，
    这一阶段vue实例及其配置项都还是可用状态，
    在这阶段可以做最后的移除定时器和事件绑定操作')
  },
  destroyed() {
    console.log('vue2的destroyed,该阶段vue实例已完全销毁，
    vue所指示的所有东西都会解除绑定，事件监听器被移除，所有vue实例也会被销毁')
  },

执行结果如下 beforeCreate➡created➡beforeMount➡mounted

那么接下来看看beforeUpdate和updated是在什么时候执行的吧

<button @click="isShow = !isShow">修改</button>
<h1 v-if="isShow">显示隐藏</h1>
<h1 v-show="isShow">显示隐藏</h1>

data() {
    return {
        isShow: true,
    }
}

对dom的操作会触发执行顺序为 beforeUpdate➡updated

而destroyed和beforeDestroy在离开页面或者组件销毁时将会触发
跳转页面

<div @click="newPage">跳转页面</div>
newPage() {
      this.$router.push({path:'/map'})
}

执行顺序为 beforeDestroy➡destroyed
组件销毁

<button @click="isShow = !isShow">修改组件展示状态</button>
<express v-if="isShow"></express>

components: {
    express
}

执行顺序为 beforeDestroy➡destroyed 也会触发父组件的beforeUpdate以及updated

子组件以及父组件初始加载页面的生命周期执行顺序如下

先执行父组件的beforeCreate created beforeMount 再执行子组件的beforeCreate created beforeMount mounted 最后执行父组件的mounted

以上便是vue2的生命周期

vue3的生命周期

首先vue3中也可以写vue2的生命周期钩子函数由于v3执行顺序和v2执行顺序差不多相同所以直接从子组件父组件的生命周期执行顺序开始写

    console.log("父vue2的beforeCreate");
  },
  created() {
    console.log("父vue2的Created");
  },
  beforeMount() {
    console.log("父vue2的beforeMount");
  },
  mounted() {
    console.log("父vue2的Mounted");
  },
  beforeUpdate() {
    console.log("父vue2的beforeUpdate");
  },
  updated() {
    console.log("父vue2的Updated");
  },
  //替换vue2中beforeDestroy
  beforeUnmount() {
    console.log("父vue2的beforeDestroy");
  },
  //替换vue2中destroyed
  unmounted() {
    console.log("父vue2的destroyed");
  },

以下是执行顺序可以看到和vue2中的生命周期执行顺序是一样的

看下v3中的新的生命周期钩子函数如何执行

 setup() {
    console.log("setup");
    onBeforeMount(() => {
      console.log("v3,onBeforeMount");
    });
    onMounted(() => {
      console.log("v3,onMounted");
    });
    onBeforeUpdate(() => {
      console.log("v3,onBeforeUpdate");
    });
    onUpdated(() => {
      console.log("v3,onUpdated");
    });
    onBeforeUnmount(() => {
      console.log("v3,onBeforeMount");
    });
    onUnmounted(() => {
      console.log("v3,onUnmounted");
    });
    const isShow = ref(true);
    return {
      isShow,
    };
  },

vue3执行.png
最后再附上v3v2的生命周期执行顺序对比

对比.png
可以看到在v3项目中v3的生命周期都是要快于v2的