1. 名称变化对比

vue3x   ==================================      vue2x

setup                                           beforeCreate
setup                                           created

onBeforeMount                                   beforeMount
onMounted                                       mounted

onBeforeUpdate                                  beforeUpdate
onUpdated                                       updated

onBeforeUnmount                                 beforeDestroy
onUnmounted                                     destroyed

onActivated                                     activated
onDeactivated                                   onDeactivated

2. 调用方式变化对比

1. vue3x 生命周期调用

• 使用前需要先引入，然后以函数回调的方式调用
• 作为组合api，其他生命周期都需要写在setup中
• vue3x 在setup中this是undefined

<script>
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onActivated,
  onDeactivated
} from "vue";
export default {
  setup() {
    // 初始化
    console.log("setup ：创建实例前执行");

    // 挂载
    onBeforeMount(() => {
      console.log("onBeforeMount ：挂载DOM前");
    });
    onMounted(() => {
      console.log("onBeforeMount ：挂载DOM后");
    });

    // 变更
    onBeforeUpdate(() => {
      console.log("onBeforeMount ：更新组件前");
    });
    onUpdated(() => {
      console.log("onBeforeMount ：更新组件后");
    });

    // 卸载
    onBeforeUnmount(() => {
      console.log("onBeforeMount ：组件销毁前");
    });
    onUnmounted(() => {
      console.log("onBeforeMount ：组件销毁后");
    });

    // 活性
    onActivated(() => {
      console.log("和 keep-alive 组件一起使用，组件激活时触发");
    });
    onDeactivated(() => {
      console.log("和 keep-alive 组件一起使用，组件失活时触发");
    });

  },
};
</script>

2. vue2x 生命周期调用

<script>
export default {
  beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    console.log('created');
  },
  beforeMount() {
    console.log('beforeMount');
  },
  mounted() {
    console.log('mounted');
  },
  beforeUpdate() {
    console.log('beforeUpdate');
  },
  updated() {
    console.log('updated');
  },
  beforeDestroy() {
    console.log('beforeDestroy');
  },
  destroyed() {
    console.log('destroyed');
  },
  activated() {
    console.log('activated');
  },
  onDeactivated() {
    console.log('onDeactivated');
  },
};
</script>