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

 1 <template>
 2   <h3>组件生命周期函数应用</h3>
 3   <!--验证Dom结构加载时机-->
 4   <p ref="name">我的内容</p>
 5   <!--模拟网络加载数据-->
 6   <ul>
 7     <li v-for="(item,index) in banner" :key="item.id">
 8       <h3>{{ item.title }}</h3>
 9       <p>{{ item.content }}</p>
10     </li>
11   </ul>
12 </template>
13 
14 <script>
15 
16 export default{
17     data(){
18       return{
19         banner:[]
20       }
21     },
22    
23     beforeCreate() {
24       console.log("组件创建之前",this.$refs.name); //undefined
25     },
26     created() {
27       console.log("组件创建之后",this.$refs.name); //可以加载
28     },
29     beforeMount() {
30       console.log("组件挂载之前",this.$refs.name); //undefined
31     },
32     //组件挂在，渲染完毕后
33     mounted() {
34       console.log("组件挂载之后",this.$refs.name); //undefined
35 
36       //模拟网络请求，给banner赋值数据
37       this.banner=[
38         {
39             "id":1,
40             "title":"myTitle标题1",
41             "content":"我的内容1"
42         },
43         {
44           "id":2,
45             "title":"myTitle标题2",
46             "content":"我的内容2"
47         },
48         {
49           "id":3,
50             "title":"myTitle标题3",
51             "content":"我的内容3"
52         }
53        ]
54     },
55     beforeUpdate() {
56       console.log("组件更新之前"); 
57     },
58     updated() {
59       console.log("组件更新之后");
60     },
61     beforeUnmount() {
62       console.log("组件销毁之前");
63     },
64     unmounted() {
65       console.log("组件销毁之后");
66     }
67     
68 }
69 </script>