vue生命周期中的钩子函数

vue的整个生命周期被划分为创建，挂载，更新，销毁。而实现这几个阶段靠的是vue钩子函数，也正是通过钩子函数我们能更清楚的了解vue实例的运作机制，实现业务逻辑。

具体看如下的几个阶段：

一，beforecreate：
   此阶段为vue实例的初始化之后，此时的数据观察和事件的配置都没有准备好，接下来我试着console一下数据观察data和被挂载元素el，代码如下：

打印如下：此时的data和el还是undefined,还不可用

二，created：
   在beforecreate之后紧接着的钩子函数就是create创建完毕，此时的数据准备已经创建完毕，但数据还未被挂载，同样打印data和el,代码如下：

此时的DOM还没有生成，data还没有被挂载，所以data是一个Object类型，el还是undefined

三，beforeMount：
此阶段为挂载之前，数据data已经准备好，el也已经成功的关联到指定的DOM节点，但是data数据还没有渲染，打印el，代码如下：

可看到如下打印结果：

四，mounted：
此阶段为挂载完毕，此阶段数据也都会渲染成功，同样打印el，代码如下：

此时的{{name}}已经被成功的渲染

五，beforeUpdate：

修改vue实例中的data时，vue就会页面自动更新渲染，beforeUpdate会检测到数据即将更新渲染，在更新渲染之前也就会触发钩子函数beforeUpdate，此阶段打印的data 不是最新的，

六，updated：

此阶段就是数据就是更新渲染之后，打印出来的也是最新的数据了

打印结果如下：

七，beforeDestory：

成功销毁之前会调取钩子函数beforeDestory(),

八，destoryed：

成功销毁之后，被销毁实例已经完全与其他实例解绑，与试图部分也无关联，销毁之后再修改数据会发现视图已经不再更新，说明实例已经成功解绑。