对Vue实例生命周期的理解

Vue作为如今前端开发主流框架（其中还有Angular和React）之一，不仅深受广大前端工程师的喜爱，也成为了很多人想要入门前端的首选框架。究其缘由，还是因为其相对于另外两个框架开发更加简单，上手更加容易。 最近，我也开始接触一些前端知识，对Vue框架有一点了解，那今天就谈一谈对Vue实例生命周期的理解。

首先，我们必须清楚什么叫实例生命周期。顾名思义，实例生命周期是指一个Vue实例从被创建到销毁的整个过程，其中包括一系列初始化、编译模板、浏览器页面显示等操作过程，同时在这些过程中存在一些生命周期钩子的函数，在每个函数执行前后数据都会发生一定的变化。这些函数分为四组：分别为beforeCreate/created、beforeMount/mount、beforeUpdate/updated、beforeDestroy/destroyed.下面将从这四组函数来窥探实例的生命周期过程。

1.beforeCreate/created
一开始我们通过new Vue（{}）创建一个Vue实例，在执行到beforeCreate函数时，该Vue实例只是一个空实例，只存在一些默认的事件，即实例的data、methods等属性方法还没有初始化。当执行到created函数时，该实例已经进行了初始化过程，因此在该钩子函数中我们可以对实例属性和方法进行调用，而这也是程序最早能够调用实例相关属性和方法的阶段。

2.beforeMount/mount
在实例初始化后，Vue开始进行模板编译，把代码中那些指令编译成模板字符串最终放在内存中，然后再将模板字符串渲染成内存中的DOM。在执行到beforeMount函数时，表示模板已经编译完成，但还仅仅存在于内存中，并没有显示到页面中去，此时浏览器页面还保持原样；当执行到mount函数时，编译模板才挂载到了页面上，此时也是最早操作DOM节点阶段。至此，Vue实例初始化完毕，组件也从创建阶段进入到了运行阶段。

3.beforeUpdate/updated
在组件的运行阶段，这两个生命周期函数一直伴随在数据的更新过程中。在执行到beforeUpdate函数时，此时data数据已经完成更新，但页面数据还保持原样，并没有发生任何改变，页面与data没有同步。之后根据最新的data数据重新渲染成一份最新的内存DOM树，这时把最新DOM树渲染到页面中，当执行到updated函数时，页面数据也完成了更新，与data数据完成了同步。

4.beforeDestroy/destroyed
当执行到beforeDestroy函数时，此时实例开始从运行阶段进入到销毁阶段，但实例具有的所有数据data、方法methods以及过滤器等还处于可用状态，并没有执行真正销毁过程；当运行到destroyed函数时，实例已经完全销毁，其具有的数据、方法等已不能使用。