Vue学习之路10----生命周期

(以下图片来自官网)

<template>
  <div>{{ num }}</div>
  <button @click="num++">add</button>
</template>
<script setup name="App">
  import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted } from "vue";
  let num=ref(0)
  console.log('创建');
  onBeforeMount(()=>{
    console.log('挂载前');
  })
  onMounted(()=>{
    console.log('挂载完毕');
  })
  onBeforeUpdate(()=>{
    console.log('更新前');  
  })
  onUpdated(()=>{
    console.log('更新完毕');  
  })
  onBeforeUnmount(()=>{
    console.log('卸载前');  
  })
  onUnmounted(()=>{
    console.log('卸载完毕');  
  })
</script>
<style scoped></style>

这些on开头的方法都是钩子，子组件挂载后才到父组件挂载

beforeCreate和created只能这样写

<script name="App">
  export default{
    setup(){},
    beforeCreate(){},
    created(){},
  }
</script>

​