Vue 生命周期

生命周期：

1.  又名：生命周期回调函数、生命周期函数、生命周期钩子
2.  是什么：Vue 在关键时刻帮我们调用一些特殊名称的函数
3.  生命周期函数的名字不可更改，但函数的具体内容式程序员根据需求编写的
4.  生命周期函数中的 this 指向的是 vm 或 组件实例对象 

Vue 生命周期 👇

  

beforeCreate

在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问 data 中的数据、methods 中的方法 

created 

实例已经创建完成之后被调用，在这一步，实例已完成以下配置：数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化，el没有。 所以，当这个函数执行的时候，我们已经可以拿到 data 下的数据以及 methods 下的方法了，所以在这里，我们可以开始调用方法进行数据请求了

beforeMount

这个阶段最主要的工作就是将模板或者 el 转换为 render 函数，实例已完成以下的配置： 编译模板，把 data 里面的数据和模板生成 html ，完成了 el 和 data 初始化，注意此时还没有挂在html 到页面上

mounted

挂在完成，也就是模板中的 HTML 渲染到 HTML 页面中，所以 mounted 函数内，我们是可以操作 dom 的，因为这个时候 dom 已经渲染完成了。注意 mounted 只会执行一次

beforeUpdate

我们又会重新生成一个新的虚拟 dom(Vnode)，然后会拿这个最新的 Vnode 和原来的 Vnode 去做一个 diff 算，更新 render 函数中的最新数据，再将更新后的 render 函数渲染成真实 dom 。也就完成了我们的数据更新。可以在该钩子中进一步地更改状态，不会触发附加地重渲染过程

updated

在 updated 里面也可以操作 dom，并拿到最新更新后的 dom，在大多是情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环，该钩子在服务器端渲染期间不被调用

beforeDestroy

在实例销毁之前调用，实例仍然完全可用，但不介意在这里再做数据的修改，一般在这一步做一些重置的操作

destroyed

在实例销毁之后调用，调用后，所有的事件监听器会被移除，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用

如果你要开一个定时器并且在另一个 Vue 函数中停止，那你可以用 this.timer 作为定时器名字，即创建 Vue.timer 对象，用于存放定时器，另一处使用也同理

注意事项： 

不要在 beforeCreate 中修改或定义任何东西，因为在 Created 阶段会把原先修改的覆盖了

也不要在 beforeDestory 中修改或定义任何东西，因为这是在 Vue 销毁之前，做任何修改都没用，所以在这里只需要交代一些后事即可

总结：

  常用的生命周期钩子：

1.      mounted: 发送 ajax 请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】
2.      beforeDestory: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】

  关于销毁 Vue 实例：

1.      销毁后借助 Vue 开发者工具看不到任何信息
2.      销毁后自定义事件会失效，但原生 Dom 事件依然有效
3.      一般不会在 beforeDestory 操作数据，因为即便操作数据，也不会再触发更新流程