嗨！~ 大家好，我是YK菌 🐷 ，一个微系前端 ✨，爱思考，爱总结，爱记录，爱分享 🏹，欢迎关注我呀 😘 ~ [微信号: yk2012yk2012，微信公众号：ykyk2012]

「这是我参与11月更文挑战的第21天，活动详情查看：2021最后一次更文挑战 (opens new window)」

今天我们主要来学习Vue中生命周期，以及父子组件中的生命周期

# 1. vue对象的生命周期

生命周期：

又名：生命周期回调函数、生命周期函数、生命周期钩子。
是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
生命周期函数中的this指向是vm 或组件实例对象。

初始化显示

beforeCreate()
created()
beforeMount()
mounted()

更新状态

beforeUpdate()
updated()

销毁 vue 实例: vm.$destory()

beforeDestory()
destoryed()

官方的图示在这里插入图片描述

# 2. 原理解释图

请添加图片描述

# 3. 常用的生命周期方法

mounted(): 发送ajax请求, 启动定时器、绑定自定义事件、订阅消息等异步任务【初始化操作】
beforeDestroy(): 做收尾工作, 如: 清除定时器、解绑自定义事件、取消订阅消息等【首尾工作】

# 4. 关于销毁Vue实例

销毁后借助Vue开发者工具看不到任何信息
销毁后自定义事件会失效，但原生DOM事件依然有效
一般不会在beforeDestroy操作数据，因为即使操作数据，也不会再触发更新流程了。

# 5. 示例

<body>
  <div id="demo">
    <button @click="destoryVM">destroy vm</button>
    <p v-show="isShow">YK菌学前端</p>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    new Vue({
      el: "#demo",
      data: {
        isShow: true,
      },

      // 1. 初始化阶段
      beforeCreate() {
        console.log('beforeCreate()');
      },
      created() {
        console.log('created()');
      },

      beforeMount() {
        console.log('beforeMount()');
      },
      mounted() { // 初始化显示之后立即调用（1次）
        console.log('mounted()');
        this.intervalId = setInterval(() => { // 将函数进行参数传递，最好用箭头函数，因为它函数内部没有this，直接用外面的this
          this.isShow = !this.isShow;
        }, 1000)

      },

      // 2. 更新阶段
      beforeUpdate() {
        console.log('beforeUpdate()');
      },
      updated() {
        console.log('updated()');
      },

      // 3. 死亡阶段
      beforeDestroy() { // 死亡之前调用（1次）
        console.log('beforeDestroy()');
        clearInterval(this.intervalId); //清除定时器
      },
      destroyed() {
        console.log('destroyed()');
      },

      methods: {
        destoryVM() {
          this.$destroy(); // 内存泄漏，定时器还没有清除
        }
      },
    })
  </script>
</body>

在这里插入图片描述

# 6. 父子组件的生命周期

加载渲染过程

父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate->子created->子beforeMount->子mounted->父mounted

更新过程

父beforeUpdate->子beforeUpdate->子updated->父updated

销毁过程

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

常见钩子版本

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

最后，欢迎关注我的专栏，和YK菌做好朋友

双向绑定动画过渡