vue学习笔记：Vue生命周期

概念

一个Vue 实例从开始创建、初始化数据、编译模板、挂载 DOM、渲染→更新→渲染、卸载等一系列过程，这就是 Vue 的生命周期。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

Vue实例的生命周期全过程（图）

Vue实例的生命周期，主要分为三个阶段，每个阶段都会执行不同的钩子函数，分别为：

挂载(初始化相关属性,例如watch属性，method属性)
beforeCreate
created
beforeMount
mounted

更新(元素或组件的变更操作)
beforeUpdate
updated

销毁（销毁相关属性）
beforeDestroy
destroyed

八大生命周期的特点

 

beforeCreate: Vue实例初始化之后，以及事件初始化，以及组件的父子关系确定后执行该钩子函数，一般在开发中很少使用。
created: 在调用该方法之前，初始化会被使用到的状态，状态包括props,methods,data,computed,watch。
而且会实现对data中属性的监听，也就是在created的时候数据已经和data属性进行了绑定。(放在data中的属性当值发生改变的时候，视图也会改变)。同时也会对传递到组件中的数据进行校验。所以在执行created的时候，所有的状态都初始化完成，我们也完全可以在该阶段发送异步的ajax请求，获取数据。但是，在created方法中，是无法获取到对应的的$el选项,也就是无法获取DOM。
created方法执行完毕后，下面会判断对象中有没有el选项。如果有，继续执行下面的流程，也就是判断是否有template选项，如果没有el选项，则停止整个生命周期的流程，直到执行了vm.$mount(el)。
接下来会触发 beforeMount 这个钩子函数。在执行该钩子函数的时候，虚拟 DOM 已经创建完成，马上就要渲染了，在这里可以更改 data 中的数据，不会触发 updated 。
当整个组件挂在完成后，有可能会进行数据的修改，当Vue发现data中的数据发生了变化，会触发对应组件的重新渲染，先后调用了beforeUpdate 和updated钩子函数。
在updated之前beoreUpdate之后有一个非常重要的操作就是虚拟DOM会重新构建，也就是新构建的虚拟DOM与上一次的虚拟DOM树利用diff算法进行对比之后重新渲染。而到了updated这个方法，就表示数据已经更新完成，DOM也重新render完成。
beforeDestroy 这个钩子函数在实例销毁前调用，在这一步，实例仍然可用。在该方法中，可以做一些清理的工作，例如：清除定时器等。
执行到destroyed钩子函数的时候，Vue实例已经被销毁，所有的事件监听器会被移除，所有的子实例也会被销毁，断开DOM与数据之间的关联。