vue之生命周期(四)

1.什么是生命周期

官方定义：
任何 Vue 实例在被创建时都要经过一系列的初始化过程，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，方便让用户在不同阶段添加对应的运行代码
个人定义：
生命周期函数是指组件在某一阶段调用的函数

lifecycle.png

通过图示可以看出生命周期可以分为四个阶段和八种状态：

四个阶段：
create   创建阶段
mount    挂载阶段
update   更新阶段
destroy  销毁阶段
八种状态：
beforeCreate()方法是在实例还没有别完全创建出来之前执行，这个方法执行的时候，无论是data中的数据还是methods中的方法都没有被初始化，所有的值都为undefined

created()方法是此时已经初始化好了Vue对象，这是最早能操作data中数据和methods中方法的地方

beforeMount()这是指该模板已经在内存中编辑完成，但是尚未将其渲染到页面中去，在该方法执行期间，页面中的元素还没有经过Vue的渲染，此时的{{msg}}仍然是一个“{{msg}}”

mounted()，表示内存中的模板已经渲染到页面中去，这个时候数据已经可以经过Vue的编译，该函数是实例创建的最后一个函数，此时实例已经完全创建好了，如果没有别的操作的话，此函数就静静躺在内存中，如果要使用某些插件操作页面上的DOM，最早要在mount中操作

beforeUpdate()事件执行的时候，页面中显示的数据并没有更新，但是内存中的数据已经改变，也就是说此时页面尚未和最新的数据保持同步

update()事件执行的时候，页面中的数据已经和内存中保持一致了，也就是说此时已经是最新的了

beforeDestroy() 当执行beforeDestroy阶段时vue实例已经从运行阶段，进入到销毁阶段，但是此时项data和methods里面的属性和方法还依然可以使用

destroyed()   当执行到destroyed时组件已经完全被销毁，此时实例中所有的属性、方法、过滤器等等都已不能再去使用