vue生命周期详解简书,vue生命周期详解
我看到很多人讲vue的生命周期，但总是一头雾水，尤其是自考的学生。可能js基础不太强，听起来要求比较高。那我就给大家一点拙见，用白话整理一下。如有不准确之处请指正！
什么是生命周期？
生命周期，依我拙见，就是一个从生到死的过程！
类比自己的一生，其实可以简单粗暴地把生命周期当成自己的一生。一个人一出生就开始了一段美好(艰难)的旅程，人生的每个成长阶段都会对应每个阶段应该做的事情，比如上幼儿园、小学、中学、高中、大学、工作(比如我在努力)、结婚等等。直到一百年后，尘归尘，土归土。
Vue也有这样的生命周期，它会在执行的每个阶段做一些事情。不同的是，vue是通过各个对应阶段的生命周期函数来做的。现在vue官网对生命周期的描述就好理解多了！
vue官网的描述：
每个Vue实例在创建时都要经历一系列的初始化过程——。例如，有必要设置数据监控、编译模板、将实例安装到DOM并在数据发生变化时更新DOM。同时，在这个过程中会运行一些被称为生命周期钩子的函数，这给了用户在不同阶段添加自己代码的机会。
简单地说，在创建Vue实例到最终消亡的过程中，会执行一系列方法来对应Vue的当前状态。这些方法叫做：生命周期挂钩！
看我给你找的一张图，你可以保存下来，等进一步研究使用，再看这张图：
根据上图，vue的生命周期中有八个钩子函数，描述了一个vue的寿命。让我们详细看看这八个生命周期函数，以便更好地了解Vue的生命周期！
vue的8个生命周期函数
用上图看。
1.beforeCreate:实例初始化后，调用数据观察器和事件/观察器事件配置。
2.created:在实例创建后立即调用它。这一步，实例完成了以下配置：数据观察者，属性和方法的操作，watch/event事件的回调；但是，挂载阶段还没有开始，$el属性目前是不可见的。
3.beforeMount:在挂载开始前调用，第一次调用相关的render函数。
4.挂载：El被新创建的vm替换。$el，钩子在装入实例后被调用。
如果根实例挂载了一个文档内元素，那么vm。调用mounted时$el也在文档中(PS:注意mounted并不保证所有子组件都会一起挂载。
如果您想等到整个视图呈现出来，可以用vm替换Mounted:$nextTick。VM。$ Next Tick会在后面的空间详细解释。在这里，大家需要知道有这个东西。
5.beforeUpdate:当数据更新时调用，这发生在虚拟DOM被修补之前。适合在更新之前访问现有的DOM，比如手动删除添加的事件侦听器。
6.updated:虚拟DOM由于数据变化重新渲染打补丁，之后会调用钩子。当这个钩子被调用时，组件DOM已经被更新，所以现在可以执行依赖于DOM的操作了。但是，在大多数情况下，您应该避免在此期间更改状态。如果状态发生了相应的变化，通常最好用计算属性或者watcher来代替(PS:计算属性和watcher后面会介绍)。
7.beforeDestroy:在实例销毁之前调用。在这一步中，实例仍然完全可用。
8.销毁：在Vue的实例被销毁后调用。调用后，Vue实例指示的所有内容都将被解除绑定，所有事件侦听器都将被移除，所有子实例都将被销毁。
代码验证：
在下面的例子中，我故意把生命周期钩子函数的顺序弄乱了，并进行编号，但它仍然会按照执行顺序自动输出，所以你可以验证上图中的过程。也可以手动试试！
div id=应用程序
Button @click=clickCounter()单击/按钮
p{{ count }}/p
/div
脚本类型=文本/javascript
var app=新Vue({
埃尔： #app ，
数据：{
计数：1
},
方法：{
clickCounter(){
this.count=1
}
},
已创建：函数(){
Console.log(2。实例已创建’)
},
创建之前：函数(){
Console.log(1。实例初始化’)
},
已安装：函数(){
Console.log(4。装载到实例’)
},
beforeMount:函数(){
Console.log(3。装载开始前’)
},
更新前：()={
Console.log(“更新数据时调用”)
},
已更新：函数(){
Console.log(更新数据并重新呈现DOM )
},
销毁前：函数(){
Console.log(在实例销毁前调用)
},
已销毁：函数(){
Console.log(在实例销毁后调用)
}
})
/*单击页面销毁vue对象，之后实例将被释放*/
//销毁后，再点击就不行了。
document.onclick=function(){
app。$ destroy()；
};
/脚本
注意：最后，我手工销毁了这个实例。点了之后我执行了一次，以后再点就不行了。测试的时候我先把被破坏的代码end注释掉，然后让它去测试！
3个关于vue组件的生命周期钩子
Activated:激活保活组件时调用(PS:与组件相关，讲解组件时会介绍关于保活)。
停用：keep-alive组件停用时的keep-alive(PS:与组件相关，讲解组件时会介绍关于keep-alive)。
ErrorCaptured:在从子代组件捕获错误时调用，该钩子将接收三个参数：错误对象、发生错误的组件实例和包含错误源信息的字符串。这个钩子可以返回false来防止错误向上传播。
写在最后
生命周期这个知识点，在这一块，我们只需要知道一些东西，对它的大概用法有个基本的掌握，等待深入的学习和理解。回头看一篇的内容，结合Vue的源代码，会收获很多！
以上是对vue中生命周期细节的梳理。更多关于vue生命周期的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。