[面试必考]组件的生命周期

组件部分

<template>
  <div>
    <h1>Hello World!</h1>
    <!-- 点击时更新 -->
    <button @click="num++">{{ num }}</button>
  </div>
</template>

<script>
/*面试必考题:生命周期有哪些阶段
组件的生命周期有什么用:
希望组件在显示时,自动发送请求
就可以选择在mounted这个显示到页面完毕的组件生命周期
*/
export default {
  data() {
    return {
      num: 1
    }
  },
  // 钩子(hook)函数:一种特殊的函数
  //作用:在特殊的事件发生时自动触发
  //一个组件的生命周期和人的周期非常相似
  //如:备孕->怀孕->出生->开始学习->学习完毕->快死了->死了
  //准备创建->创建完毕->准备显示到页面->显示完毕->准备更新->准备销毁->销毁完毕
  //每个重要时间点都会触发hook函数
  beforeCreate() {
    console.log('beforeCreate:创建前--备孕')
  },
  created() {
    console.log('created:创建完毕--怀孕')
  },
  beforeMount() {
    console.log('mounted:准备出生--将要添加到页面')
  },
  mounted() {
    console.log('mounted:出生--显示到页面')
  },
  beforeUpdate() {
    console.log('beforeUpdate:将要更新')
  },
  updated() {
    console.log('updated:更新完毕')
  },
  beforeDestroy() {
    console.log('destroyed:将要销毁--快死了')
  },
  destroyed() {
    console.log('destroyed:销毁完毕--死了')
  }
}
</script>

<style lang="scss" scoped>
</style>

App.vue

<template>
  <div>
    <!-- 生命周期 组件从生到死的过程 -->
    <!-- 如果点击后把show改成了true就显示,反之不显示 -->
    <button @click="show = true">添加</button>
    <button @click="show = false">移除</button>
    <!-- 先在data设定它为false,打开时就是不显示的 -->
    <hello-world v-if="show" />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  components: { HelloWorld },
  data() {
    return {
      show: false //配合v-if使用
    }
  }
}
</script>

<style lang="scss" scoped>
</style>