vue生命周期面试题

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

2、created和mounted的区别
created一般是在html渲染前的操作，此时el还是undefined，data已经存在。这里不能对dom进行操作。(如果想对DOM操作，就在异步中获取DOM。)
mounted一般是在html渲染完成后的操作，此时el，data都已经加载完成，一般对dom的操作都写在mounted中，例如获取innerHTML，初始化echarts的时候。

3、第一次页面加载会触发哪几个钩子？
答：beforeCreate， created， beforeMount， mounted

4、简述每个周期具体适合哪些场景
1).beforeCreate：在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法。
2).created：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)、属性和方法的运算，watch/event 事件回调；然而，挂载阶段还没开始，$el属性目前不可见。data和methods都已经被初始化好了，如果要调用methods中的方法，或者操作data中的数据，最早可以在这个阶段中操作3).beforeMount：在内存中已经编译好了模板了，但是还没有挂载到页面中4).mounted：el被新创建的vm.$el 替换，并挂载到实例上去之后调用该钩子。 如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行。
5).beforeUpdate：当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
6).updated：当这个钩子被调用时，组件 DOM 已经更新，所以现在可以执行依赖于 DOM 的操作，然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之（PS：计算属性与 watcher 会在后面的篇幅中进行介绍）。
7).beforeDestroy：实例销毁之前调用，在这一步，实例仍然完全可用。
8).destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

5.父到子的生命周期
挂载阶段
执行顺序为：
父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
更新阶段
执行顺序为：
父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated

销毁阶段
执行顺序为：
父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed

6.加入keep-alive会执行哪些生命周期？
1)如果使用了keep-alive组件，当前的组件会额外你增加2个生命周期

activated     deactivated

2)如果当前组件加入了keep-alive第一次进入这个组件会执行5个生命周期

beforeCreate -> created -> beforeMount -> mounted -> activated

3)如果当前组件加入了keep-alive，第二次或第N次进去组件，只会执行一个生命周期
activated

7.生命周期的使用场景。

created
无父子依赖关系，也不需要同步DOM
mounted
同步获取DOM
如果父组件使用了子组件，并且优先加载子组件的数据，那么父组件请求要放在mounted里。
activated
判断id是否相等，如果不等发起请求。
destroyed
关闭页面记录视频播放时间，初始化的时候从上一次的历史开始播放。

8.在created中怎么获取DOM

1)只要写异步代码，在异步中获取DOM。
例如：setTimeout、请求、Promise.xxx()
2)使用vue系统内置this.$nextTick

9.为什么发送请求不在beforeCreate里？beforeCreate和created的区别？
如果请求封装在method封装好了，beforeCreate调用的时候拿不到method里的方法（会报错）。