34 组件的生命周期-526互联

出生————> 死亡
在主要的时间节点上，自动执行生命周期钩子函数
mount ：安装，handle：处理
组件生命周期示意图

虽然写这东西没什么意义，但还是花了一点时间手撕代码吧

<template>
  <div>
    <h3>组件的生命周期</h3>
    <p>{{ msg }}</p>
    <button @click="clickHandle">修改数据，触发更新相关的两个函数</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        msg: "数据更新之前"
      }
    },
    methods: {
      clickHandle() {
        this.msg="数据更新之后"
      }
    },
    beforeCreate(){
      console.log("组件创建之前")
    },
    created(){
      console.log("组件创建之后")
    },
    beforeMount(){
      console.log("组件渲染之前")
    },
    mounted () {
      console.log("组件渲染之后");
    },
    beforeUpdate () {
      console.log("组件更新之前");
    },
    updated () {
      console.log("组件更新之后");
    },
    beforeUnmount () {
      console.log("组件卸载之前");
    },
    unmounted(){
      console.log("组件卸载之后")
    }
  }
</script>

<style lang="scss" scoped>

</style>

组件