解析vue生命周期每个阶段都做什么

一、生命周期有哪些

在 vue 的创建、使用、销毁过程中，会有许多事件，这些事件就被统称为生命周期函数，也叫作生命周期钩子，有beforeCreate( 创建前 )、created ( 创建后 ）、beforeMount（挂载前）、mounted（挂载后）、beforeUpdate（更新前）、updated（更新后）、beforeDestroy（销毁前）、destroyed（销毁后）这些生命周期函数。

二、分类型解析

• DOM构建/渲染前：beforeCreate、created、beforeMount、mounted
• DOM渲染后：beforeUpdate、updated
• 离开页面：beforeDestroy、destroyed

1、DOM构建/渲染前

beforeCreate：当执行 beforeCreate 生命周期函数时，vue 实例还没有被完全创建出来，此时 data，methods 等内部没有初始化，无法获取响应数据。

created：执行这个函数的时候，vue 实例已经初始化了，可以在这里调用数据，不过还没渲染到页面上。 在当前函数中我们可以访问到 data 中的属性，此时，会将 data 中的属性和 methods 的方法添加到 vue 的实例身上，同时会将 data 中所有的属性添加一个 getter/setter 方法。这里可以进行前后端上数据交互(ajax请求的时候) 需要在当前生命周期中使用。有 this props，不能访问 dom(还没有渲染完毕)。常用于自动 ajax 请求、事件监听、定时器开启等。

beforeMount：这时，vue 已经将模板字符串编译成内存虚拟DOM，模板已经编译完成，已经完成渲染树，还没有渲染到页面上。可以获取初始数据，实现函数自执行。

mounted：创建阶段完成，页面渲染完毕，进入运行阶段。此时我们可以通过$ refs 来访问到真实的DOM 结构，即可以访问 dom 节点。ref 类似与 id 一样 值必须是唯一的，访问的时候我们可以使用this.$refs.属性，可以进行用户交互操作方法。

2、DOM渲染后阶段

当数据发生变化，比如触发了点击事件改动数据

beforeUpdate：内存中的数据已经改变，页面上的还没更新

updated：页面上数据和内存中的一致

3、离开阶段

离开页面销毁、解绑事件，例如：定时器等

beforeDestroy：出发这个函数时，还没开始销毁，此时刚刚脱离运行阶段。data，methods，指令之类的都在正常运行。用于移除 dom 事件监听、定时器等。

destroyed：组件销毁完毕，data，methods，指令之类的不可用。