下面是官方文档里的生命周期图，英语好的同学可以看看：
先看案例基本代码如下，后面通过如下代码步骤演示一个对象从生成到被销毁的过程各阶段执行的生命周期函数。注意show函数的作用。
看运行结果：
可以看到，此时vue实例刚刚在内存中创建，其它什么都undefined。
看结果：
看到没，已经知道data里的数据了。其它的话都没。
看结果：
看到没，要挂载的对象都编译好了，但是页面的DOM树还没挂上去，这个阶段页面还没能显示出来。
看结果：
转态更新之前执行此函数，此时data中数据的状态值已经更新为最新的，但是页面上显示的数据还是最原始的，还没有重新开始渲染DOM树。
先改变data里数据：
在案例中添加钩子函数：
看结果：
看到没，vue实例里的数据已经变成了南极光之夜。但是此阶段页面DOM节点上显示的还是初始的数据北极光之夜。
这个阶段是转态更新完成后执行此函数，此时data中数据的状态值是最新的，而且页面上显示的数据也是最新的，DOM节点已经被重新渲染了。
在案例中添加钩子函数：
看运行结果：
更新了，全都更新了~
beforeDestroy阶段处于vue实例被销毁之前，当然，这个阶段vue实例还能用。
销毁Vue实例：
在案例中添加钩子函数：
看效果：
这个阶段在vue实例销毁后调用，此时所有实例指示的所有东西都会解除绑定，事件监听器也都移除，子实例也被销毁。
在案例中添加钩子函数：
看结果：
到此这篇关于一文搞懂Vue八大生命周期钩子函数的文章就介绍到这了,更多相关Vue八大生命周期钩子函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
到此这篇vue钩子函数和生命周期（vue钩子函数有哪些含义）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/44521.html