Vue--生命周期钩子函数的使用场景

简介

        本文介绍Vue生命周期钩子函数的常用的应用场景。

        Vue生命周期的流程​

beforeCreate

使用场景

1. 加loading效果，在created时进行移除

created

说明

此时可以获取data和methods。

使用场景

1. 1. 
      
2. 异步请求（向后端请求数据）
3. 结束loading事件
4. 初始化某些属性值
   1. 
      

beforeMounted

基本用不到此钩子函数。

mounted

说明

DOM 加载完成，页面渲染完毕。

使用场景

1. 1. 
      
2. 异步请求（向后端请求数据）
3. 操作DOM
4. 配合$nextTick 使用。

1. 单一事件对数据的更新后更新DOM

beforeUpdate

使用场景

1. 在该钩子中进一步地更改状态，不会触发附加的重渲染过程。

updated

使用场景

1. 数据更新时需要做统一业务处理时

1. 如果需要区分不同的数据更新操作可以使用$nextTick

beforeDestroy

使用场景

1. 解绑一些使用addEventListener监听的事件

destroyed

使用场景

1. 加点儿提示toast之类的东西

其他网址

​​VUE生命周期函数面试题 - 知乎​​