vue的生命周期以及钩子函数

什么是vue的生命周期？

所谓的vue的生命周期就是vue的实列从创建到销毁的整个过程，每个过程都有不同的钩子函数，利用这些不同的钩子函数来做不同的事情，可以理解成生命的开始到结束。

vue生命周期示意图

vue钩子函数

beforeCreate（在实例创建之前）

beforeCreate在组件创建、实例初始化之后被调用

在该阶段组件未创建，不能访问数据，组件中的 data，ref 均为 undefined

created（在实例创建之后）

created在组件创建完成后被立即调用

可以对data进行操作了，即可以访问数据，发请求，ref依旧是undefined

beforeMount（在组件挂载之前）

beforeMount在组件挂载之前调用

在该阶段页面上还没渲染出 HTML 元素，data 初始化完成，ref 依旧不可以操作

mounted（在组件挂载之后）

mounted在页面完成挂载之后执行，可以拿到数据和节点，实例被挂载后调用。

这个时候可以操作ref，如果在这个阶段没有货渠道ref通常用$nextTick方法来解决

beforeUpdate（数据更新前）

beforeUpdate在数据更新时调用

这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件

updated（数据更新之后）

由于数据更改导致的虚拟 DOM 重新渲染，这之后会调用update，在数据更新之后做些处理，监听数据的变化

beforeDestory(组件销毁前）

beforeDestory在组件销毁之前调用， ref 仍然可以操作。通常在这里做清除定时器等操作

destroyed（组件销毁后）

destroyed在组件销毁的时候执行，即实例销毁后调用

父子组建的生命周期顺序

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted。

使用钩子函数的注意事项

钩子函数不可头函数的方式，因为箭头函数没有this，this会作为变量，向上级词法作用域查找，直至找到为止，经常会导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。