vue3.0生命周期

<template>
  <div class="css">
    <div class="a1">{{datas}}</div>
    <!-- <div class="a2"> 2</div>
    <div class="a3">3</div>
    <div class="a4">4</div>
    <div class="a5">5</div> -->
  </div>
  <div v-for="(item, index) in getdata" :key="index">{{item}}</div>
  <shange></shange>
</template>

<script lang="ts">
import { defineComponent, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onErrorCaptured, onMounted, onUnmounted, onUpdated } from 'vue'
import shange from './shange.vue'
export default defineComponent({
  name: 'HelloWorld',
  components: { shange },
  props: {
    datas: {
      type: String,
      default: ''
    },
    getdata: {
      type: Array,
      default: function () {
        return [] // 如果是对就是return {}
      }
    }
  },
  setup () {
    onMounted(() => {
      console.log('子组件onMounted')
    })
    onBeforeMount(() => {
      console.log('子组件onBeforeMount')
    })
    onBeforeUpdate(() => {
      console.log('子组件onBeforeUpdate')
    })
    onUpdated(() => {
      console.log('子组件onUpdated')
    })
    onBeforeUnmount(() => {
      console.log('子组件onBeforeUnmount')
    })
    onUnmounted(() => {
      console.log('子组件onUnmounted')
    })
    onErrorCaptured(() => {
      console.log('子组件onErrorCaptured')
    })
  }
})
</script>

<style lang="less" scoped>
.css{
    // width: 700px;
    // height: 700px;
    // border: 1px solid red;
    // display: flex;
    // flex-wrap: wrap;
    // flex-direction: column;
    // align-content: space-evenly;
    // // align-items: center;
    // // justify-content: space-evenly;
    // div{
    //     width: 200px;
    //     height: 200px;
    //     border: 1px solid red;
    //     background: yellow;
    // }
    //  .a1{
    //     order: 1;
    // }
    // .a2{
    //     order: 4;
    // }
    //  .a3{
    //     order: 2;
    // }
    //  .a4{
    //     order: 5;
    // }
    //  .a5{
    //     order: 3;
    // }
}
</style>