vue生命周期及钩子函数理解

什么是vue？
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

vue钩子函数
1.beforeCreate 创建前执行（data和el都还未初始化）
2.created 完成创建 （完成了data数据初始化，el还未初始化）
3.beforeMount 载入前（完成了data和el数据初始化）
4.mounted 载入后html已经渲染(ajax请求可以放在这个函数中)
5.beforeUpdate 更新前状态（view层的数据变化前，不是data中的数据改变前）
6.updated 更新状态后
7.beforeDestroy 销毁前
8.destroyed 销毁后 （Dom元素存在，只是不再受vue控制）

下面以具体代码来直观介绍生命周期及钩子函数：

    
    




     
{{ message }}

上述代码执行后 打开f12看生命周期中钩子函数不同时期的不同状态：

update相关
当在控制台输出app.message= ‘yes !! I do’;后 可以看到data里的值被修改后，将会触发update的操作

destroy相关
我们在console里执行下命令对 vue实例进行销毁。销毁完成后，我们再重新改变message的值，vue不再对此动作进行响应了。但是原先生成的dom元素还存在，可以这么理解，执行了destroy操作，后续就不再受vue控制了。

控制台输入app.$destroy();可以看到：

最后上一张比官网稍微详细的图参考：