vue父子组件的生命周期

vue父子组件的生命周期

vue实例被创建要经过一系列初始化过程，例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等，在这个过程中，会运行一些叫做生命周期钩子的函数，可以让用户在不同阶段添加自己的代码。

1.vue的生命周期

1、beforeCreate
在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
2、created
在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。在执行data()方法前props属性有数据已经可以访问，watch和computed监听函数此时为null，此时this.computed里的计算属性值为undefined。data函数执行完后，watch和computed监听函数才可用，因为data函数执行完后，data函数return的属性这时才可用
3、beforeMount
在挂载开始之前被调用：相关的 render 函数首次被调用。
在服务器端渲染期间不被调用。（只有beforeCreate和created会在服务器端渲染出来，其他生命周期钩子函数只会在客户端执行）
4、mounted
实例被挂载后调用，这时 el 被新创建的 el替换了，如果root实例挂载了一个文档内元素，当mounted被调用时，新创建的el也在文档内。
mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick：
5、beforeUpdate
数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器
6、updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
7、activated
被 keep-alive 缓存的组件激活时调用。
8、deactivated
被 keep-alive 缓存的组件停用时调用。
9、beforeDestroy
实例销毁之前调用。在这一步，实例仍然完全可用。
10、destroyed
实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

2.父子组件生命周期顺序

1、父组件的beforeCreate阶段
在调用beforeCreate()钩子函数时，只进行了必要的初始化操作，比如全局的配置、属性初始化等，但此时的data属性为undefined，没有可操作的数据
2、父组件的created阶段
调用Created()函数，在这一步，实例已完成以下的配置：数据代理和动态数据绑定(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，要更新的el 属性目前不可见。
3、父组件的beforeMount阶段
在调用boforeMount()函数前首先会判断对象是否有要更新的el。如果有的话就继续向下编译，如果没有el选项，则停止编译，也就意味着停止了生命周期，直到在该vue实例上调用vm.mount(el)。如果有el要更新，应用的是Virtual DOM（虚拟Dom）技术，到后面mounted()时，才会把值渲染进去，视图更新。
4、子组件的beforeCreate、Created、beforeMount、Mounted阶段
在父组件执行beforeMount阶段后，进入子组件的beforeCreate、Created、beforeMount阶段，这些阶段和父组件类似，在beforeMount阶段之后、Mounted阶段之前，数据已经被加载到视图上了，即el元素被挂载到页面时触发了视图的更新。
5、子组件的activated阶段
我们发现在子父组件全部挂载到页面之后被触发。这是因为子组件my-components被 包裹，随el的挂载被触发。如果子组件没有被包裹，那么该阶段将不会被触发。
6、父组件的mounted阶段
mounted执行时：此时el已经渲染完成并挂载到实例上。
7、deactivated、beforeUpdate、updated阶段

三者的调用顺序分别为beforeUpdate、deactivated、updated。我们可以知道的是deactivated函数的触发时间是在视图更新时触发。因为当视图更新时才能知道keep-alive组件被停用了。
8、beforeDestroy和destroyed钩子函数间的生命周期
destroyed钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁（也就是说子组件也会触发相应的函数）。这里的销毁并不指代’抹去’，而是表示’解绑’。销毁时beforeDestory函数的传递顺序为由父到子，destory的传递顺序为由子到父。

3、总结

加载过程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
更新过程
父beforeUpdate->子beforeUpdate->子updated->父updated
销毁过程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

此文章仅为自己学习用，原作连接如下](https://blog.csdn.net/u010227042/article/details/106892735/)