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>