Vue2.x生命周期函数

介绍

　　Vue.js 2.x 中的生命周期函数是一系列钩子函数，它们允许你在 Vue 实例的不同阶段执行代码。这些生命周期钩子函数允许你在特定的阶段添加自定义逻辑，以便在应用程序生命周期的不同点执行操作。

　　生命周期函数强调的是时间点。

创建阶段

　　1) beforeCreate（创建前）：在 Vue 实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。在这个阶段，实例上的属性和方法不可见。

　　2) created（创建后）：在 Vue 实例创建完成后立即调用，实例已经完成以下的配置：数据观测 (data observer)、属性和方法的运算、watch/event 事件回调。但是，挂载阶段还没开始，$el 属性目前不可见。

挂载阶段

　　3) beforeMount（挂载前）：在挂载开始之前被调用：相关的 render 函数首次被调用。

　　4) mounted（挂载后）：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子函数。此时，组件已经被渲染到页面上。

更新阶段

　　5) beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。可以在该钩子函数中进一步地更改状态，不会触发附加的重渲染过程。

　　6) updated（更新后）：在数据更改导致的虚拟 DOM 重新渲染和打补丁后调用。调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。

销毁阶段

　　7) beforeDestroy（销毁前）：在实例销毁之前调用。在这一步，实例仍然完全可用。

　　8) destroyed（销毁后）：在实例销毁后调用。该钩子被调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

 

　　生命周期函数提供了一个方便的方式来执行特定于应用程序阶段的逻辑。可以在这些钩子函数中执行数据初始化、异步操作、DOM 操作等。

　　通过了解生命周期函数，可以更好地理解 Vue 实例在不同阶段的行为，并根据需要添加自定义逻辑。

 

　　存在于 script 内 ，与 data 同级。