vue3基础-组合式API之生命周期钩子

生命周期钩子

这些生命周期钩子注册函数只能在 setup()期间同步使用，因为它们依赖于内部的全局状态来定位当前活动的实例。

官网给出的映射如下：

示例

查看生命周期钩子的执行顺序

<template>
  <div class="home">
    <div>{{userInfo.name}}</div>
    <div>{{userInfo.age}}</div>
    <button @click="changeUserName">修改名称</button>
    <button @click="changeUserAge">修改年龄</button>
  </div>
</template>

<script lang="ts">
import {
  defineComponent, ref, reactive, toRef, toRefs,
  onMounted, onUpdated, onUnmounted,
} from 'vue';

export default defineComponent({
  name: 'Home',
  beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    console.log('created');
  },
  setup(props, context) {
    console.log('setup');
    
    onMounted(() => {
      console.log('onMounted!');
    });
    onUpdated(() => {
      console.log('onUpdated!');
    });
    onUnmounted(() => {
      console.log('onUnmounted!');
    });
  },
  beforeMount() {
    console.log('beforeMount');
  },
  mounted() {
    console.log('mounted');
  },
});
</script>

执行结果：

从上面的执行结果可以看出setup函数是在beforeCreate、created函数之前执行，还有就是生命周期钩子函数onMounted比mounted 先执行，其他生命周期也是同理。