vue组件生命周期有哪些？vue2和vue3的生命周期图牢记于心，附面试题1

【单选题】关于vue组件生命周期说法错误的是（）

A. 在data中的对象的某个属性和input双向绑定，修改input的值，在beforeDestroy中获取的值是修改过后的值

B. ajax请求可以放在created钩子函数中

C. 在created钩子函数中操作DOM，可以将语句放在$nextTick中

D. 父子组件生命周期的执行顺序是父亲beforecreate、父亲created、父亲beforeMount、孩子beforecreate、孩子created、孩子beforeMount、父亲mounted、孩子mounted、父亲beforeDestroy、孩子beforeDestroy、孩子destroyed、父亲destroyed

先独立思考

正确答案：D

解析：

父子组件生命周期的执行顺序是父亲beforecreate、父亲created、父亲beforeMount、孩子beforecreate、孩子created、孩子beforeMount、孩子mounted、父亲mounted、父亲beforeDestroy、孩子beforeDestroy、孩子destroyed、父亲destroyed。孩子的mounted早于父亲mounted

知识点扩展

vue生命周期是什么？

vue生命周期是指vue实例对象从创建之初到销毁的过程，vue所有功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能

vue生命周期的八个阶段

以上是vue2.x和vue3的生命周期图

（要求牢牢记在心中）

1、beforeCreated

会在实例初始化完成、props解析之后、data(）和computed等选项处理之前立即调用。此时不能获取DOM节点。

2、created

在这个阶段vue实例已经创建，以下内容已经设置完成：响应式数据、计算属性、方法和侦听器。然而，此时挂载阶段还未开始，因此$el属性仍不可用。仍然不能获取Dom元素。

3、beforeMounted

在组件内容被渲染到页面之前自动执行的函数，组件已经完成了其响应式状态的设置，但还没有创建DOM节点

4、mounted

在组件被渲染之后自动执行的函数。一般我们的异步请求都写在这里。在这个阶段，数据和DOM都已经被渲染出来了。

5、beforeUpdate

数据变化的时候自动执行的函数，此时变化后的数据还未渲染到页面之上。

6、undated

数据变化之后自动执行的函数，此时变化后的数据已经渲染到页面之上。

7、beforeUnmount（beforeDestroy vue2.x）

当Vue应用被销毁时，自动执行的函数

8、unmounted（destroyed vue2.x）

当Vue应用被销毁后，且dom完全销毁之后，自动执行的函数。