重学前端：Vue的生命周期梳理

基础知识重新学习，若有不对欢迎指正，感恩。

什么是生命周期？

Vue实例从创建到销毁的全过程，开始创建，初始化数据，编译模板，挂载dom，渲染，更新，渲染，卸载等一系列过程，成为Vue的生命周期。

为什么需要生命周期？

在从创建到销毁的整个过程中，会提供对应的钩子函数，可以使用这些钩子函数对Vue实例化过程中，实现功能的对应逻辑。比如在mounted的时候获取ajax等等。

有哪些生命周期钩子？

beforeCreate->created->beforeMount->mounted->beforeUpdate->updated->beforeDestroy->destroyed

何时使用对应生命周期钩子？

首先在代码层面上各个生命周期是有区别的。

• beforeCreate

  挂载元素 $el和数据对象data都为undefined，还未初始化。

• created

  挂载元素 $el为undefined，数据对象data有值。

• beforeMount

  $el有值，但挂载之前为虚拟的dom节点，$el里面的message还是{{ message }},还没有被替换。

• mounted

  $el里面的值被替换成为对应data的值,vue实例挂载完成，data.message成功渲染。如果要在Vue中获取DOM元素对象，一般在这个钩子中获取； 项目中的ajax请求一般会在这里或者created里发送；

• beforeUpdate

  当data变化,虚拟dom渲染和匹配之前时，会触发beforeUpdate。

• updated

  当data变化,虚拟dom渲染和匹配之后时，会触发beforeUpdate。

• beforeDestroy

  在销毁watcher和子组件和事件监听函数之前。如果页面中有定时器，我们会在这个钩子中清除定时器；

• destroyed

  销毁了watcher和子组件和事件监听函数之后。watch被移除。