vue2-常见的八个生命周期函数

一、什么是生命周期

从vue实例创建、运行、到销毁期间，总是伴各种各样的事件，这些事件统称为声明周期

二、vue生命周期钩子函数

Vue生命周期钩子函数是指在Vue组件或实例的生命周期中，特定时刻自动调用的函数。这些钩子函数允许开发者在Vue组件的不同阶段添加自定义的逻辑处理，以便更好地控制组件的行为和响应。

Vue的生命周期包括了组件从创建到销毁的整个过程，而生命周期钩子函数则是在这个过程中的关键点进行调用的。它们使得开发者能够在组件的不同状态之间执行特定的操作，如初始化设置、数据加载、DOM操作、事件监听、清理资源等。

引用vue官网中的流程图更为直观

三、生命周期函数的简要描述

1、beforeCreate（创建前）
在这个阶段，Vue实例刚刚被初始化，数据观测和事件/监听器都尚未设置，属性和方法的运算也未执行。
此时无法访问到数据和DOM，但el和options属性是可用的。
2、create （创建后）
在这个阶段，Vue实例已经创建完成，完成了数据观测，属性和方法的运算也已经执行。
此时可以访问到数据、计算属性、方法和el属性（但此时DOM还未挂载，所以el属性目前不可见）。
第一个可以操作data与methods中数据的生命周期函数
作用：数据初始化（页面加载时），请求接口

 beforeCreate() { // 这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它
    // console.log(this.msg)
    // this.show()
    // 注意： 在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的 数据都还没有没初始化
  },
  created() { // 这是遇到的第二个生命周期函数
    // console.log(this.msg)
    // this.show()
    //  在 created 中，data 和 methods 都已经被初始化好了！
    // 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作
  },

3、beforeMount（挂载虚拟的DOM）
在这个阶段，此时组件的虚拟DOM已经创建完成，但尚未挂载到真实DOM上，其页面还是vue的占位符。
此时可以在此阶段进行一些渲染前的逻辑处理。
4、mounted（挂载真实的DOM）
在这个阶段，Vue实例已经挂载到DOM上，可以通过DOM API直接操作DOM。
是第一个可以操作DOM的生命周期，将data中的数据过载到DOM中

  beforeMount() { // 这是遇到的第3个生命周期函数，表示 模板已经在内存中编辑完成了，但是尚未把 模板渲染到 页面中
    // console.log(document.getElementById('h3').innerText)
    // 在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
  },
  mounted() { // 这是遇到的第4个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
    // console.log(document.getElementById('h3').innerText)
    // 注意： mounted 是 实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的 躺在我们的内存中，一动不动
  },

5、beforeUpdate（更新前）
当组件的数据发生变化时，会触发更新。在更新之前，会调用这个生命周期函数。
页面的数据是旧的，data的值是新的，未保持一致（执行0次或无数次）
6、updated（更新后）
页面与data的值一致（执行0次或无数次）
此时组件DOM已经更新，现在你可以执行依赖于DOM的操作。然而，在大多数情况下，你应该避免在此期间更改状态。因为这可能会导致更新无限循环。

  beforeUpdate() { // 这时候，表示 我们的界面还没有被更新【数据被更新了吗？  数据肯定被更新了】
    /* console.log('界面上元素的内容：' + document.getElementById('h3').innerText)
    console.log('data 中的 msg 数据是：' + this.msg) */
    // 得出结论： 当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和 最新的数据保持同步
  },
  updated() {
    console.log('界面上元素的内容：' + document.getElementById('h3').innerText)
    console.log('data 中的 msg 数据是：' + this.msg)
    // updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的
  }

7、beforeDestroy（销毁前）
通常在此阶段执行一些清理操作，如解除事件监听、销毁子组件等。
8、destroyed（销毁后）
Vue实例已经销毁，调用后，Vue实例指示的所有东西都会解绑，所有的事件监听器都会被移除，所有的子实例也会被销毁。

生命周期总结

• beforeCreate：初始化之前，作用：页面重定向
• create：初始之后，作用：初始化data中的数据，发送请求
• beforeMount：挂载虚拟的DOM，页面中的内容还是vue中的占位符
• mounted：挂载真实DOM，第一个可以操控DOM的生命周期函数
• beforeUpdate：更新前，页面中数据与data的中的数据不一致
• updated：更新后，页面中的数据与data中的数据一致
• beforeDestroy：销毁前，清除页面中的定时器、监听事件
• destroyed：销毁后，清除页面中的所有