Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说vue3生命周期和vue2区别_vue生命周期的四个阶段,希望能够帮助你!!!。
vue2和vue3生命周期的区别

<template>
  <div>
    <h2>{{title}}</h2>
    <ul>
        <h3>{{num}}</h3>
        <button @click="num++">+</button>
    </ul>
  </div>
</template>

<script>

export default {
  data() {
    return {
      title: "Hello Vue!",
      num:0
    };
  },
  
  methods:{
      show(){
          console.log('我是show方法');
      },
      
  },
  beforeCreate() {
    console.log("-------beforeCreate--------");
    /* 
      beforeCreate钩子函数在组件创建之前被调用，该函数被调用的时候，props,data,mehtods都没有被创建
      该组件的用处不是很大，但地位很高。
    */
    console.log("data", this.msg);
    //console.log('props',this.title);
    //this.show();
  },
  created(){
        console.log("-------created--------");
        /* 
          created钩子函数是在init Injections&Activitys之后被调用，此时已经完成props,data,methods的创建，所以在此处
          调用这些方法或方法
          模板或者DOM还没有被创建
          此钩子函数重要的用途是用来向服务端网络请求数据
          在此钩子函数之后的钩子中也能完成网络请求，但是一般都是在这里完成最佳
        */
      
        this.show();
       
  },
  beforeMount(){
    console.log('-------beforeMount--------');
    /* 
      该钩子函数之前的环节主要工作是将数据读取后填充到模板上，之后有读到内存中暂时存储
    */
   console.log('dom',document.querySelector('h2')); 
  },
  mounted(){
     console.log('-------mounted--------');
     console.log('dom',document.querySelector('h2'));
  },
  beforeUpdate(){
    console.log('---------beforeUpdate-----------');
    /* 
      beforeUpdate钩子函数中的特征
      数据已经变了
      但是页面还没来得及渲染
      数据是新的，而页面是旧的
    */
    console.log('data',this.num);
    console.log('dom',document.querySelector('h3').innerHTML);
  },
  updated(){
    console.log('---------updated-----------');
    console.log('data',this.num);
    console.log('dom',document.querySelector('h3').innerHTML);
  },
  beforeDestroy(){
    console.log('-----------beforeDestroy--------------');
    /* 
      此处是准备在销毁之前调用的钩子
      此处特征，数据props，data,methods都可以访问，但是DOM已经被移除了
    */
     console.log('data',this.num);
    // console.log('dom',document.querySelector('h3').innerHTML);
  },
  destroyed(){
     console.log('-----------destroyed--------------');
     console.log('data',this.num);
  }
};
</script>

<style>
</style>

今天的分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。