Vue生命周期详解

一.Vue生命周期简介

Vue实例从创建到销毁的过程，就是生命周期。详细来说也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。

首先我们来看一下官网的生命周期图（我自己做了一点点注释）：

二.钩子详解 1.beforeCreate

在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

我们在上面的例子中在的beforeCreate钩子中调用Vue的data和method，来看一下结果：

可以看到Vue中的data和方法都是去不到的，并且是在wath之前执行

2.created

实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

主要应用：调用数据，调用方法，调用异步函数

结果：

可以看到：created钩子可以获取Vue的data，调用Vue方法，获取原本HTML上的直接加载出来的DOM，但是无法获取到通过挂载模板生成的DOM（例如：v-for循环遍历Vue.list生成li）

3.beforeMount

在挂载开始之前被调用：相关的 render 函数（模板）首次被调用。

例如通过v-for生成的html还没有被挂载到页面上

（接 2created的代码）

结果 beforeMount: 1

4.mounted

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。

有初始值的DOM渲染，例如我们的初始数据list,渲染出来的li，只有这里才能获取

（接 2created的代码）

结果mounted: 3

可以看到到这里为止，挂载到实例上了，我们可以获取到li的个数了

5.beforeUpdate

数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

当我们更改Vue的任何数据，都会触发该函数

6.updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。

该钩子在服务器端渲染期间不被调用。

数据更新就会触发（vue所有的数据只有有更新就会触发）,如果想数据一遍就做统一的处理，可以用这个，如果想对不同数据的更新做不同的处理可以用nextTick，或者是watch进行监听

7.beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。

8.destroyed

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。

结果：

可以看打到销毁Vue实例时会调用这两个函数

补充$mount

当你vue没有挂在el时，我们可以用$mount

二Vue生命周期结论

beforeCreate（创建前）: 在数据观测和初始化事件还未开始,data、watcher、methods都还不存在，但是$route已存在，可以根据路由信息进行重定向等操作。

created(创建后)：在实例创建之后被调用，该阶段可以访问data，使用watcher、events、methods，也就是说 数据观测(data observer) 和event/watcher 事件配置 已完成。但是此时dom还没有被挂载。该阶段允许执行http请求操作。

beforeMount （挂载前）：将HTML解析生成AST节点，再根据AST节点动态生成渲染函数。相关render函数首次被调用(划重点)。

mounted (挂载后)：在挂载完成之后被调用，执行render函数生成虚拟dom，创建真实dom替换虚拟dom，并挂载到实例。可以操作dom，比如事件监听

beforeUpdate：v m . d a t a 更 新 之 后 ， 虚 拟 d o m 重 新 渲 染 之 前 被 调 用 。 在 这 个 钩 子 可 以 修 改 vm.data更新之后，虚拟dom重新渲染之前被调用。在这个钩子可以修改vm.data更新之后，虚拟dom重新渲染之前被调用。在这个钩子可以修改vm.data，并不会触发附加的冲渲染过程。

updated：虚拟dom重新渲染后调用，若再次修改$vm.data，会再次触发beforeUpdate、updated，进入死循环。

beforeDestroy：实例被销毁前调用，也就是说在这个阶段还是可以调用实例的。

destroyed：实例被销毁后调用，所有的事件监听器已被移除，子实例被销毁。

三 created 和 mounted 钩子函数的区别

created
	html加载完成之前，执行。
	执行顺序：父组件-子组件。
	creadted钩子函数主要是用来初始化数据。
复制代码

mounted
    html加载完成后执行。
    执行顺序：子组件-父组件。
    mounted钩子函数主要是用来执行DOM操作。
复制代码

vue在created和mounted这两个生命周期中请求数据有什么区别呢？

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

在created的时候，视图中的html并没有渲染出来，所以此时如果直接去操作html的dom节点，一定找不到相关的元素
而在mounted中，由于此时html已经渲染出来了，所以可以直接操作dom节点，（此时document.getelementById 即可生效了）。

链接1:www.sohu.com/a/255415579…

链接2:blog.csdn.net/weixin_4252…

链接3:www.cnblogs.com/ibos/p/1458…

链接4:www.mianshigee.com/question/28…

作者：宁静致远983
链接：https://juejin.cn/post/7121928732612395022
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。