vue生命周期学习(基础原理)

vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染—>更新—>渲染、销毁等一系列过程，我们称这是Vue的生命周期。

每一个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化、运行中、销毁。

下图为vue生命周期示意图：

具体各个生命周期的意义及用法

• beforeCreated
  • 这个时候数据还没有挂载，访问不到数据和真实的Dom，一般不做操作
• created
  • 这个时候可以使用数据及更改数据了，但不会触发updated函数，不会触发其他钩子函数；一般在这做初始化数据的获取
  • 接下来开始找实例或组件对应的模板了，编译模板为虚拟dom放入到render函数中准备渲染
• beforeMounted
  • 虚拟dom已经创建完成，马上准备渲染了，这里也可以更改数据，但不会触发updated函数，
  • 在这可以在渲染前最后一次更改数据的机会，不会触发其他钩子函数，一般也可以在这做初始化数据的获取
  • 接下来开始render，渲染出真实Dom
• mounted
  • 此时，组件已经出现在页面中了，数据，Dom都已经处理好了，事件也已经挂载好了
  • 在这里就可以操作真实Dom等一些操作
• beforeUpdate
  • 重新渲染之前触发
  • 然后vue的虚拟Dom机制会重新构建虚拟Dom与上一次虚拟Dom树利用diff算法进行对比之后进行重新渲染
• updated
  • 数据已经更新完成，Dom也重新render完成
• beforeDestroy
  • 销毁前执行，一般在这做善后处理：清除计时器，清除非指令绑定的事件等等
• destroyed
  • 组件的数据绑定，监听等等都已经去除掉了，只剩dom空壳，这里也可以善后