23. 生命周期的应用
组件的生命周期会随着我们对Vue的了解越多，也会越来越重要，这里我们先讲两个常用的应用常见：
- 通过
ref获取元素DOM结构 - 模拟网络请求渲染数据
通过ref获取元素DOM结构
<script>
export default {beforeCreate() {console.log(this.$refs.name); // 组件挂载/渲染之前，获取不到},mounted() {console.log(this.$refs.name); // 组件挂载/渲染完毕，获取到了}
}
</script><template><h3>组件生命周期函数应用</h3><p ref="name">程序员</p>
</template>
模拟网络请求渲染数据
<script>
export default {data() {return {banner: []}},mounted() { // 模拟网络请求，组件挂载/渲染完毕，先有组件再有数据好些，所以用mounted()this.banner =[{"title": "第一届编程大赛","contest": "算法竞赛"},{"title": "创意设计展","contest": "平面设计比赛"},{"title": "科技创新奖","contest": "科研项目评选"}];}
}</script><template><h3>组件生命周期函数应用</h3><ul><li v-for="(item, index) in banner" :key="index"><h3>{{ item.title }}</h3><p>{{ item.contest }}</p></li></ul></template>
