vue3_01生命周期函数

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

<template>     <div>         <p>这是第一个组件</p>               </div> </template>   <script lang="ts"> import { defineComponent, onBeforeMount, onMounted } from 'vue'; export default defineComponent(     {         setup() {//setup相当于一个生命周期             //什么时候执行？setup() 钩子会在所有选项式 API 钩子之前调用             console.log('执行了setup')             onBeforeMount(                 () => {                     console.log("执行了onBeforeMount")                 }             ),                 onMounted(() => {                     console.log("执行了onMounted")                 })           },     } ) </script>   <style lang="scss" scoped>   </style>

vue3相比于vue2多了组合式AP

beforeCreate -> setup() 开始创建组件之前，创建的是data和method

created -> setup()

beforeMount -> onBeforeMount 组件挂载到节点上之前执行的函数。

mounted -> onMounted 组件挂载完成后执行的函数

beforeUpdate -> onBeforeUpdate 组件更新之前执行的函数。

updated -> onUpdated 组件更新完成之后执行的函数。

beforeDestroy -> onBeforeUnmount 组件挂载到节点上之前执行的函数。

destroyed -> onUnmounted 组件卸载之前执行的函数。
在vue3.0使用生命周期钩子，需要先引入再使用: