深刻理解Vue父子组件的生命周期执行顺序和钩子函数

首先，在官网上附上vue实例的生命周期图。在创建每个Vue实例时，都需要经过一系列的初始化过程，比如设置数据监控、编译模板、在DOM上挂载实例以及在数据发生变化时更新DOM。同时，在这个过程中会运行一些被称为生命周期钩子(回调函数)的函数，这给了用户在不同阶段添加自己代码的机会。

1.vue的生命周期图

在vue实例的整个生命周期的每个阶段，都为我们提供了不同的钩子函数来执行不同的操作。首先，详细分析了vue官网上的各个钩子功能。

生命周期挂钩

生命周期挂钩

在实例初始化之后、数据观察器和事件/观察器事件配置之前调用详细的beforeCreate。创建实例后调用。在这一步，实例已经完成了以下配置：数据观察器、属性和方法的操作以及监视/事件事件的回调。然而，装载阶段还没有开始，并且$el属性目前不可见。在挂载开始之前调用BeforeMount:第一次调用相关的render函数。装载的el被新创建的虚拟机替换。$el，并且钩子在实例上装载后被调用。如果根实例在文档中装载了一个元素。调用挂载时，文档中也有$el。在更新虚拟DOM之前更新数据时调用。您可以进一步更改此钩子中的状态，这不会触发额外的重新呈现过程。更新了在虚拟DOM由于数据变化被重新渲染和修补后调用的钩子。当这个钩子被调用时，组件DOM已经被更新，所以你现在可以执行依赖于DOM的操作。激活保持活动组件时调用。停用保活组件时调用。在销毁beforeDestroy实例之前调用。在这一步，实例仍然完全可用。在销毁的Vue实例被销毁后调用。调用后，Vue实例指示的所有内容都将被解除绑定，所有事件侦听器都将被移除，所有子实例也将被移除

在实例被销毁后调用。调用后，Vue实例指示的所有内容都将被解除绑定，所有事件侦听器都将被移除，所有子实例都将被销毁。

2.实际操作

接下来，我们了解了父子组件生命周期的创建过程，以及实际代码执行过程中钩子函数执行的实时状态变化。

该测试基于以下代码，可以在导入vue.js文件后执行。(打开页面后，再次按刷新会自动进入调试器状态)

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title document/title style/style/head body div id=' app ' p { { message } }/p keep-alive my-components 33: mssg=' msg 1 ' v-if=' show '/my-components/keep-alive/././node _ modules/vue/dist/vue。js/script脚本var child={ template : ' div从子级： { { childMsg } }/div '，prop 3360[' msg ']，data : function(){ return { childMsg : ' child ' }，beforcreate : function(){ debugger；}，created:函数(){调试器；}，beforeMount:函数(){调试器；}，mounted : function(){ 0调试器；}，停用d:函数(){ alert('keepAlive停用');}，激活d :函数(){控制台。日志('组件已激活');}，beforeDestroy:函数(){ console.group('beforeDestroy销毁前状态===============》');var state={ 'el': this .$ El ' data ' :这个$data，' message ' :这个。消息}控制台。日志(这个.$ El)；console.log(状态);},驱逐舰d:函数(){ console.group('被摧毁销毁完成状态===============》');var state={ 'el': this .$ El ' data ' :这个$data，' message ' :这个。消息}控制台。日志(这个.$ El)；console.log(状态);}, };var vm=new Vue({ el: '#app '，data: { message: '父亲，msg1: 'hello '，show: true }，之前创建：函数(){调试器；}，created:函数(){调试器；}，beforeMount:函数(){调试器；}，mounted : function(){ 0调试器；}，beforeUpdate:函数(){ alert('页面视图更新前');}，updated:函数(){ alert('页面视图更新后');}，beforeDestroy:函数(){ console.group('beforeDestroy销毁前状态===============》');var state={ 'el': this .$ El ' data ' :这个$data，' message ' :这个。消息}控制台。日志(这个.$ El)；console.log(状态);},驱逐舰d:函数(){ console.group('被摧毁销毁完成状态===============》');var state={ 'el': this .$ El ' data ' :这个$data，' message ' :这个。消息}控制台。日志(这个.$ El)；console.log(状态);}，组件： { ' my-components ' : child } })；/script/html3.1、生命周期调试

首先我们创建了一个某视频剪辑软件实例虚拟机，将其挂载到页面中编号为"应用"的元素上。

3.1.1、根组件的创建前阶段

可以看出，在调用beforeCreate()函数时，只进行了一些必要的初始化操作（例如一些全局的配置和根实例的一些属性初始化),此时数据属性为未定义，没有可供操作的数据。

3.1.2、根组件的创造阶段

调用已创建()函数，在这一步，实例已完成以下的配置：数据代理和动态数据绑定（数据观察者),属性和方法的运算，观看/活动事件回调。然而，挂载阶段还没开始，$el属性目前不可见。

3.1.3、根组件的即将挂载阶段

在调用boforeMount()函数前首先会判断对象是否有埃尔选项。如果有的话就继续向下编译，如果没有埃尔选项，则停止编译，也就意味着停止了生命周期，直到在该某视频剪辑软件实例上调用虚拟机$mount(el)

在这个例子中，我们有el元素，所以我们将调用boforeMount()函数。此时，模板解析功能已经启动，但是$el元素还没有挂载到页面上，所以页面视图还没有更新。红色标记里还是{{message}}，这里是应用的Virtual Dom技术，先占坑。稍后装载时呈现这些值。

3.1.4.子组件的创建前、创建后、装载前、装载后阶段

在父组件执行装载前阶段后，它进入子组件的创建前、创建前和装载前阶段。这些阶段类似于父组件，因此请按“无表格”。在beforeMount阶段之后，执行“已装载”阶段，其中子组件已装载到父组件上，然后父组件装载到页面上。

从下图可以看出，在beforeMount阶段之后和Mounted阶段之前，数据已经加载到视图上，也就是说，当$el元素装载到页面上时，视图的更新被触发。

3.1.5.子组件的激活阶段

我们发现它是在所有子组件和父组件都装载到页面上之后触发的。这是因为子组件my-components由keep-alive包装，这是由$el的挂载触发的。如果子组件未被保活包装，则不会触发此阶段。

3.1.6母组件的安装阶段

装载执行：此时，已经在实例上呈现和装载了el。

至此，从初始化Vue实例到将新模板安装到页面上的阶段已经完成。退出调试器。让我们看看停用的、更新前的、更新的、销毁前的和销毁后的钩子函数。

3.2停用、更新前和更新阶段

根据生命周期函数，在数据发生变化之后，虚拟DOM再次渲染页面之前，会触发beforeUpdate()函数，视图还没有发生变化。当虚拟DOM呈现页面视图更新时，会触发updated()函数。

我们不妨改变vm.show=false。修改此属性时，它不仅会触发beforeUpdate和updated函数，还会触发停用的函数(因为它是在保活组件停用时调用的)。让我们考虑一下停用的函数是在beforeUpdate之后调用还是更新。

在控制台，我们输入vm.show=false。这三个方法的调用顺序分别是beforeUpdate、停用和更新。我们知道的是，停用功能的触发时间是在视图更新时触发的。因为当视图更新时，您可以知道保活组件被禁用。

3.3.销毁前和销毁挂钩函数之间的生命周期

现在我们销毁Vue实例，并调用应用程序。方法来销毁它。控制台测试如下：

我们发现例子仍然存在，但其他地方已经发生了变化。

在实例被销毁之前，调用beforeDestroy钩子函数。在这一步，实例仍然完全可用。

销毁的钩子函数在Vue实例被销毁后调用。调用后，Vue实例指示的一切都将被解除绑定，所有事件侦听器都将被移除，所有子实例都将被销毁(也就是说，子组件将触发相应的函数)。这里的破坏不是指“擦除”，而是“解除绑定”。

销毁时，beforeDestory函数的转移顺序是从父到子，销毁的转移顺序是从子到父。

4.应用钩子函数的一些想法可以在创建的钩子中操作数据。此时，可以发出ajax请求，将返回的数据分配给数据。

虽然更新后的函数会在数据发生变化时触发，但无法准确判断哪个属性值发生了变化。因此，在实际情况下，计算或匹配函数用于监控属性更改并执行一些其他操作。当挂载的dom被挂载的钩子操作时，DOM已经呈现在页面上。使用vue-router时，有时需要使用keep-alive/keep-alive来缓存组件的状态。此时，创建的钩子不会被重复调用。如果我们的子组件需要在每次加载或切换状态时执行一些操作，可以通过使用激活的钩子来触发它们。所有生命周期挂钩都会自动将此上下文绑定到一个实例，因此不能使用箭头函数来定义生命周期方法(例如，created: ()=this.fetchTodos())。这导致它指向父级。

5.摘要

加载渲染过程

父级在创建之前-父级已创建-父级在装载之前-子级在创建之前-子级在装载之前-子级已装载-父级已装载

子组件更新过程

父更新前-子更新前-子更新后-父更新后

父组件更新流程父更新前-父更新

销毁流程父级销毁前-子级销毁前-子级销毁-父级销毁

摘要

以上是边肖介绍的Vue父子组件的生命周期执行顺序和钩子函数。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！