VUE生命周期函数面试题

什么是 vue 生命周期

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

八个阶段：

1、beforeCreate(创建前),

对应的钩子函数为beforeCreate。此阶段为实例初始化之后，此时的数据观察和事件机制都未形成，不能获得DOM节点。（没有data，没有el）

使用场景：因为此时data和methods都拿不到，所以通常在实例以外使用，可以在这加个loading事件，在加载实例时触发

2、created(创建后)，

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

使用场景：模板渲染成html前调用，此时可以获取data和methods，so 可以初始化某些属性值，然后再渲染成视图，异步操作可以放在这里，初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用

3、beforeMount(载入前),

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

4、mounted(载入后)，

对应的钩子函数是mounted。mounted是平时我们使用最多的函数了，一般我们的异步请求都写在这里。在这个阶段，数据和DOM都已被渲染出来。

使用场景：模板渲染成html后调用，通常是初始化页面完成后再对数据和DOM做一些操作，需要操作DOM的方法可以放在这里

5、beforeUpdate(更新前),

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

6、updated（更新后）,

对应的钩子函数是updated。在这一阶段DOM会和更改过的内容同步。

使用场景：需要对数据更新做统一处理的；如果需要区分不同的数据更新操作可以使用$nextTick

7、beforeDestroy(销毁前)，

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

使用场景：可以做一个确认停止事件的确认框

8、destroyed（销毁后）

对应的钩子函数是destroyed。在销毁后，会触发destroyed钩子函数。

activated：在使用vue-router时有时需要使用<keep-alive></keep-alive>来缓存组件状态，这个时候created钩子就不会被重复调用了。

如果我们的子组件需要在每次加载的时候进行某些操作，可以使用activated钩子触发。

deactivated：<keep-alive></keep-alive>组件被移除时使用。

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

嵌套组件的生命周期的执行顺序：

vm.beforeCreate ——> vm.created ——> vm.beforeMount ——> son.beforeCreate ——> son.created ——> son.beforeMount ——> son.mounted ——> vm.mounted

更改组件数据　　修改子组件的数据

vm.beforeCreate ——> vm.created ——> vm.beforeMount ——> son.beforeCreate ——> son.created ——> son.beforeMount ——> son.mounted ——> vm.mounted ——> son.beforeUpdate ——> son.updated

vue生命周期的作用是什么

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。（ps：生命周期钩子就是生命周期函数）例如，如果要通过某些插件操作DOM节点，如想在页面渲染完后弹出广告窗，那我们最早可在mounted 中进行

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

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

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

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

created和mounted的区别

vue的实例是类似于创建一个对象,里面包含生命周期钩子函数,data（对象）,methods（方法）.components（计算属性）等...

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

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

挂载到节点上的初始化方法通常用mounted去操作，主动调起的用methods里面封装方法。

数据初始化一般放到created里面，这样可以及早发请求获取数据，如果有依赖dom必须存在的情况，就放到mounted(){this.$nextTick(() => { /* code */ })}里面

Vue是异步执行dom更新的，一旦观察到数据变化，Vue就会开启一个队列，然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。如果这个watcher被触发多次，只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和DOm操作。而在下一个事件循环时，Vue会清空队列，并进行必要的DOM更新

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

看实际情况，一般在 created（或beforeRouter）里面就可以，如果涉及到需要页面加载完成之后的话就用 mounted。

在created的时候，视图中的html并没有渲染出来，所以此时如果直接去操作html的dom节点，一定找不到相关的元素

而在mounted中，由于此时html已经渲染出来了，所以可以直接操作dom节点，（此时document.getelementById 即可生效了）。