Vue2、Vue3的生命周期

Vue2的生命周期

1.生命周期的定义

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

2.为什么要有生命周期

假如现在想实现这样一个效果:页面一进入，标题"欢迎学习vue"文字的透明度就从1逐渐减小到0，然后再恢复至1，周而往复

结构代码：

    <h2 :style="{ opacity }">欢迎学习vue</h2>

逻辑部分代码

setInterval(() => {
      this.opacity -= 0.01
      if (this.opacity <= 0) {
        this.opacity = 1
      }
    }, 16);

• 关键是我们要把这个逻辑部分代码放进哪里才能实现我们想要的效果？
• 我们需要在页面一加载出来的时候就执行这个函数，那么vue给我们提供了一个配置项：mouted，它的含义是，当vue完成模板的解析，并把初始的（第一次解析完的）真实dom放入页面后（挂载完毕）后调用执行mouted
• 注意是完成初始的真实dom挂载才会调用mouted，之后页面的变化叫更新，不叫挂载

所以想要实现刚刚的那个效果，完整的代码如下：

<template>
  <div class="root">
    <!-- 动态绑定样式需要绑定一个对象，但是重名了，所以可触发简写形式 -->
    <h2 :style="{ opacity }">欢迎学习vue</h2>
  </div>
</template>

<script>
export default {
  name: 'Two',
  data () {
    return {
      opacity: 0.5
    }
  },
  // vue完成模板的解析并把初始的/第一次真实dom元素放入页面后（挂载完毕后）调用mouted，只针对初始的第一次挂载，之后那叫更新了
  mounted () {
    // 每隔一段时间让opacity减少一段时间
    setInterval(() => {
      this.opacity -= 0.01
      if (this.opacity <= 0) {
        this.opacity = 1
      }
    }, 16);
  }

}
</script>

<style scoped>
</style>

3. 分类介绍生命周期函数

0. 流程图

如何监测对象、数组变化（get、set，给操作数组的方法进行二次包装，数据代理…）

编译el的Outhtml(意思就是整个外部的div标签也会包括进来作为模板的一部分)作为template，生成虚拟dom在内存中
把内存中的虚拟dom存入$el中

更新时，需要patch，新的虚拟dom和旧的虚拟dom进行比较

销毁时，当vm.$destroy()被调用时就开始自我毁灭

触发 this.$destroy()后，此时vm已经不在了，但是他临死之前的工作成果还在，dom都还在，只不过没有人帮忙管理了，点击触发数据变化也不会有任何更新操作了，有点冻结的感觉，解绑的也是自定义事件，dom事件是不会解绑的

在beforeDestroyed

1. 挂载流程

beforeCreate:

created:

beforeMount:

mounted:
具体对应的细节见上面的流程图

2. 更新流程

beforeUpdate:

updated:

3. 销毁流程

beforeDestroy:

destroyed：

4. 总结

就像人的一生有不同的重要性的阶段一样，vue的执行流程也是，在关键时刻会去调用执行对应的生命周期钩子
一个有八个、四对声明周期函数