Vue生命周期函数详解（面试必看）

首先了解一下什么是生命周期函数：

Vue 实例从创建、挂载、更新、销毁等一系列的过程，我们称这是 Vue 的生命周期。

它的作用：

Vue 所有的功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。 生命周期中有多个事件钩子，在控制整个vue实例的过程时更容易形成好的逻辑。

也就是说，Vue的生命周期函数可以帮助我们在它的各个阶段进行事件处理，更好的控制整个vue项目。

每个周期具体适合哪些场景：

• beforeCreate：实例创建前，实例初始化之后，this指向创建的实例。

  不能获得DOM节点。

  data，computed，watch，methods 上的方法和数据均不能访问。（this有了，但是里面的方法还没有，就是读完了代码，创建了this，但还没初始化里面的所有方法和属性）只有一些默认的方法和属性

  数据劫持就发生在beforeCreate与 created之间

• created：创建后，此阶段为实例已经创建，完成数据（data、props、computed）的初始化。

  可访问 data computed watch methods 上的方法和数据。

  若在此阶段进行DOM操作一定要放在Vue.nextTick()的回调函数中。

  初始化完成时的事件写在这里，异步请求也适宜在这里调用（请求不宜过多，避免白屏时间太长）。

  做一些初始化，实现函数自执行。

• beforeMount：挂载前，表示模板已经编译完成, 但是还没有把模板渲染到页面中

• mounted：完成挂载DOM和渲染，内存中的模板已经真实的渲染到了页面中去, 已经可以看到渲染好的页面了

  可在mounted钩子函数中对挂载的DOM进行操作。

  可在这发起后端请求，拿回数据，配合路由钩子做一些事情。

• beforeUpdate：数据更新前，其实此时data对象中的数据已经更新，只不过还没有更新到界面上，如何看是否更新到界面上，methods中修改后，通过节点去操作取值，不要通过this.$el去取值（this是一个对象，console是一个异步操作，当真正打印的时候，对象里面的属性已经是更改过后的）

• updated：数据更新后，组件DOM已完成更新，可执行依赖的DOM操作。

• beforeDestroy：销毁前

  可做一些删除提示，如：您确定删除xx吗？

• destroyed：销毁后，当前组件已被删除，销毁监听事件，组件、事件、子实例也被销毁。

  这时组件已经没有了，无法操作里面的任何东西了。

希望以上内容对大家有帮助~