vue那个生命周期函数操作dom_vue生命周期

1. What ？

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

其中具体分为8个阶段，分别是：

beforeCreate(创建前) ------- created(创建后)

beforeMount(载入前) -------- mounted(载入后)

beforeUpdate(更新前) -------- updated(更新后)

beforeDestroy(销毁前)-------- destroyed(销毁后)

2. How ？

话不多说，上图：

1、创建前(beforeCreate)

此阶段为实例初始化之后，此时的数据观察和事件机制都未形成，不能获得DOM节点。

vue实例的挂载元素el和数据对象data都是undefined，还没有初始化。

2、创建后(created)

对应的钩子函数为created。在这个阶段vue实例已经创建，仍然不能获取DOM元素。

vue实例的数据对象data有了，可以访问里面的数据和方法，未挂载到DOM，el还没有

3、载入前(beforeMount)

在这一阶段，我们虽然依然得不到具体的DOM元素，但vue挂载的根节点已经创建，下面vue对DOM的操作将围绕这个根元素继续进行；beforeMount这个阶段是过渡性的，一般一个项目只能用到一两次。

4、载入后(mounted)

mounted是平时我们使用最多的函数了，一般我们的异步请求都写在这里。在这个阶段，数据和DOM都已被渲染出来，可以获取dom节点。

5、更新前(beforeUpdate)

在这一阶段，vue遵循数据驱动DOM的原则；beforeUpdate函数在数据更新后虽然没立即更新数据，但是DOM中的数据会改变，这是Vue双向数据绑定的作用。

6、更新后(updated)

在这一阶段DOM会和更改过的内容同步。

7、销毁前(beforeDestroy)

在上一阶段vue已经成功的通过数据驱动DOM更新，当我们不在需要vue操纵DOM时，就需要销毁Vue，也就是清除vue实例与DOM的关联，调用destroy方法可以销毁当前组件。在销毁前，会触发beforeDestroy钩子函数。

实例销毁前调用，实例还可以用，this能获取到实例，常用于销毁定时器，解绑事件

8、销毁后(destroyed)

在销毁后，会触发destroyed钩子函数。

实例销毁后调用，调用后所有事件监听器会被移除，所有的子实例都会被销毁

vue的生命周期的思想贯穿在组件开发的始终，通过熟悉其生命周期调用不同的钩子函数，我们可以准确地控制数据流和其对DOM的影响；vue生命周期的思想是Vnode和MVVM的生动体现和继承。

3. Why ？

为什么要有生命周期，在不同时期，执行特定的函数，以实现特定的功能。当代码运行时不由你掌控，而你又想在对应时机切入对应的代码时，生命周期就不得不存在了。

4. 相关面试题

1. 第一次页面加载会触发哪几个钩子？

第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

2. DOM渲染在哪个周期中就已经完成？

DOM 渲染在 mounted 中就已经完成了

3. 每个生命周期适合哪些场景？

生命周期钩子的一些使用方法：

beforecreate : 可以在这加个loading事件，在加载实例时触发

created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用

mounted : 挂载元素，获取到DOM节点

updated : 如果对数据统一处理，在这里写上相应函数

beforeDestroy : 可以做一个确认停止事件的确认框

nextTick : 更新数据后立即操作dom

4. 为什么Vue生命周期函数不能使用箭头函数书写

5.vue生命周期的作用是什么

它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑

6.created和mounted的区别

答：created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

7.vue获取数据在哪个周期函数

答：一般 created/beforeMount/mounted 皆可.

比如如果你要操作 DOM , 那肯定 mounted 时候才能操作.

8.请详细说下你对vue生命周期的理解？

答：总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

创建前/后： 在beforeCreated阶段，vue实例的挂载元素el和∗∗数据对象∗∗data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el和∗∗数据对象∗∗data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el还没有。

载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。

更新前/后：当data变化时，会触发beforeUpdate和updated方法。

销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。

补充

答：beforeCreate：在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法

create：data 和 methods都已经被初始化好了，如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作

beforeMount：执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的

mounted：执行到这个钩子的时候，就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行

beforeUpdate： 当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步

updated：页面显示的数据和data中的数据已经保持同步了，都是最新的

beforeDestory：Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于可用状态。还没有真正被销毁

destroyed： 这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于不可用状态。组件已经被销毁了。