浅谈vue生命周期

  一、vue生命周期

vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。在组件中具体的方法有: beforeCreate、created 、beforeMount 、mounted、 (beforeUpdate 、updated  )、beforeDestroy、destroyed。

Vue生命周期总共分8个阶段：创建前/后 ，载入前/后 ，更新前/后 ，销毁前/后

创建前/后(beforeCreate / created):

在beforeCreate阶段 ，vue实例的挂载元素el和数据对象data都为undefined ，还未初始化 ，也就是说此时我们还拿不到数据

在created阶段 ，vue实例的数据对象data有了 ，但是实例对象el还没有 ，也就是说可以拿到数据 ，但是无法获取Dom节点 ，此时data 和 methods已经可以使用 但是页面还没有渲染出来。

所以我们在开发中 ，的一些获取数据的逻辑都可以写在created钩子函数中

载入前/后 （beforeMount / mounted）：

在beforeMount阶段 ，vue实例的$el和data都初始化了 ，但还是挂载之前的虚拟DOM节点 ，此时实例尚未挂载完成 ，此时页面上还看不到真实数据 只是一个模板页面而已

在mounted阶段 ，vue实例挂载完成 ，页面成功渲染数据已经真实渲染到页面上 在这个钩子函数里面我们可以使用一些第三方的插件。

注意：在beforeMount阶段 可以拿到el实例但是只是挂载的el虚拟DOM节点 ，在mounted阶段 el被新创建的vm.$el替换，并挂载到实例上此时才能操作页面上的DOM元素。

上面四个钩子函数都是在Vue生命周期过程中自动调用

更新前/后 （beforeUpdate / updated）：

在beforeUpdate 阶段 ，数据更新时调用，发生在虚拟DOM打补丁之前。 页面上数据还是旧的

在updated阶段 ，由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。 页面上数据已经替换成最新的

只有在数据改变后才调用。

页面第一次加载只会调用触发 beforeCreate created beforeMount mounted这几个钩子函数

每个阶段对应的钩子函数 ，我们都可以在其内部做一些对应的逻辑

简单说一下常用钩子函数适合哪些运用场景

beforeCreate 此时页面开始创建 ，可以加loading……事件 ，加载实列时触发

created 数据 一些异步请求的调用 ，loading……事件结束等

mounted 获取Dom节点操作DOM ，在这个钩子函数里面我们可以使用一些第三方的插件实例写在这个函数内

updated 做一些数据统一更新处理的相应函数。