15：vue3 组件生命周期函数应用

<template>
  <h3>组件生命周期函数应用</h3>
  <!--验证Dom结构加载时机-->
  <p ref="name">我的内容</p>
  <!--模拟网络加载数据-->
  <ul>
    <li v-for="(item,index) in banner" :key="item.id">
      <h3>{{ item.title }}</h3>
      <p>{{ item.content }}</p>
    </li>
  </ul>
</template>

<script>

export default{
    data(){
      return{
        banner:[]
      }
    },
   
    beforeCreate() {
      console.log("组件创建之前",this.$refs.name); //undefined
    },
    created() {
      console.log("组件创建之后",this.$refs.name); //可以加载
    },
    beforeMount() {
      console.log("组件挂载之前",this.$refs.name); //undefined
    },
    //组件挂在，渲染完毕后
    mounted() {
      console.log("组件挂载之后",this.$refs.name); //undefined

      //模拟网络请求，给banner赋值数据
      this.banner=[
        {
            "id":1,
            "title":"myTitle标题1",
            "content":"我的内容1"
        },
        {
          "id":2,
            "title":"myTitle标题2",
            "content":"我的内容2"
        },
        {
          "id":3,
            "title":"myTitle标题3",
            "content":"我的内容3"
        }
       ]
    },
    beforeUpdate() {
      console.log("组件更新之前"); 
    },
    updated() {
      console.log("组件更新之后");
    },
    beforeUnmount() {
      console.log("组件销毁之前");
    },
    unmounted() {
      console.log("组件销毁之后");
    }
    
}
</script>