vue实例的生命周期

vue实例生命周期概念

从Vue实例创建、运行到销毁期间，总是伴随着各种各样的事件，这些事件，我们统称为生命周期。
生命周期钩子=生命周期函数=生命周期事件

生命周期钩子

创建期间的生命周期函数

• beforeCreate()
  这是我们执行过程中遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它
  注意：在beforeCreate生命周期函数执行的时候，date和methods中的数据都还没有被初始化
• created()
  这是第二个生命周期函数，此时data和methods都已经初始化好了，如果要调用methods中的方法或者data中的数据，最早是在created中
• beforeMount()
  这是第三个生命周期函数，表示模板已经在内存中编译好了，但是并没有渲染到页面中去，页面中的元素还没有被真正替换过来，只是之前写的一些模板字符串
• mounted()
  这是第四个生命周期函数，表示内存中的模板，已经真实的挂载到页面中，用户已经可以看到渲染好的页面了。
  如果需要操作页面上的DOM节点，最早在mounted中执行
  注意：mounted是实例创建期间的最后一个生命周期函数，当执行完mounted就表示，实例已经被完全创建好了，此时如果没有其他操作的话，这个实例就在我们的内存中无变化了。

运用期间的生命周期函数

• beforeUpdate()
  表示我们的界面还没被更新了，但是数据已经更新了
• updated()
  updated事件执行的时候，数据和页面都已经同步了，都进行了更新

销毁期间的生命周期函数

• beforeDestroy()
  当执行beforeDestroy钩子函数时，vue示例就已经从运行阶段，进入了销毁阶段，实例上的data、methods、filter、directive等都还处于可用的状态
• destroy()
  当执行到该函数时，组件已经被完全销毁，此时组件中的数据、方法、过滤器、指令等都不可用。

vue实例生命周期图