以前Vue2中的生命周期钩子函数：

• beforeCreate 创建前

• created 创建后

• beforeMount 挂载DOM前

• mounted 挂载DOM后

• beforeUpdate 更新组件前

• updated 更新组件后

• beforeDestroy 销毁前

• destroyed 销毁后

现在再Vue3中的生命周期钩子函数，发生了变化：

• setup 创建实例前

• onBeforeMount 挂载DOM前

• onMounted 挂载DOM后

• onBeforeUpdate 更新组件前

• onUpdated 更新组件后

• onBeforeUnmount 卸载销毁前

• onUnmounted 卸载销毁后

先掌握常用的生命周期钩子函数onMounted：

 // 按需导入onMounted钩子函数
import { onMounted } from 'vue'
export default ({
  name: 'App',
  setup () {
    // Vue3生命周期函数
    onMounted(() => {
      console.log('hello')
    })
    // Vue3相同的生命周期函数可以触发多次
    onMounted(() => {
      console.log('nihao')
    })
  }
})

总结：

• 1.Vue3生命周期的函数发生了变化

• 2.去掉两个：beforeCreate和created，添加了setup

• 3.方法名称发生了变化：方法名称前面多了个on，中间是驼峰式的

• 4.卸载组件的生命周期变化：onBeforeUnmount、onUnmounted

• 5.同一个生命周期可以触发多次