vue2.0——生命周期和钩子函数的理解

前端路上，一切困难都是纸老虎！

本文旨在帮助自己掌握vue的知识点，如有侵权，联系更改~

最近用vue2.0进行项目实战时，经常遇到需要在生命周期钩子函数里面执行一些自己的代码，举个栗子：

image.png

但是，有时候分不清楚应该将代码放在哪个生命周期中执行：

官网生命周期示意图

lifecycle.png

结合示意图，并在控制台中对每个函数console一个值出来，进一步理解vue的生命周期。

Lifecycle hooks

钩子	介绍
beforeCreate	组件实例刚刚被创建，组件属性计算之前，如data属性等
created	组件实例创建完成，属性已绑定，但DOM还未生成，$el属性还不存在
beforeMount	模板编译/挂载之前
mounted	模板编译/挂载之后（不保证组件已在document中）
beforeUpdate	组件更新之前
updated	组件更新之后
activeted	for keep-alive,组件被激活时用
deactived	for keep-alive,组件被移除时调用
beforeDestory	组件销毁前调用
destoryed	组件销毁后调用

    
    
    




     
{{ message }}

控制台输出结果：

输出值.png

到这里，update相关钩子并未执行；根据vue官方示意图说明：when data changes,触发beforeUpdate钩子函数，然后Virtual DOM re-render and patch,触发updated钩子函数；

在chrome console里更改message的值：
app.message="modify the value";

image.png

接下来执行app.$destroy();

image.png

销毁完成后，再对值进行更改，vue不再响应，但是原来的dom结构仍然存在。

总结

关于钩子函数中执行的一些操作总结：
created:里面放请求比较好，这时候DOM还没开始渲染，数据请求回来一起渲染；
mounted:执行依赖DOM的一些操作,并配合vm.$nextTick使用；

参考文献：https://segmentfault.com/a/1190000008010666