Vue 生命周期 (Day18)

59 阅读1分钟

生命周期

  1. 又名:生命周期函数、生命周期钩子、生命周期回调函数

  2. 实质:Vue在其特殊时刻调用的一些特殊名称的函数

  3. 生命周期函数名不可更改,其具体操作内容由程序员根据需求编写

  4. 生命周期中的this指向Vue实例或组件实例对象

挂载流程

beforeCreate:实例被创建前调用的函数

created:实例创建完成调用的钩子,此时可对data数据做初步处理,计算、转换等

beforeMount:即将挂载编译后的HTML到对应位置时触发的函数

mounted :Vue完成模板解析并把真实的DOM元素挂载完毕后调用,此时可发送http请求页面初始化所需数据(重要)

更新流程

beforeUpdate:监听页面data更新,data变化进行调用,此时data已完成变化,页面尚未更新

updated:此时页面与数据实现同步,均为更新后的数据

销毁流程

beforeDestroy :实例被销毁前调用,对该实例绑定的操作进行收尾工作(重要)

destroyed:实例被彻底销毁后执行的函数

关于销毁Vue实例:

  1. 销毁后借助开发者工具获取不到任何信息

  2. 销毁后自定义事件会失效,原生DOM事件依然有效

  3. 一般不会调用beforeDestroy操作数据,此时操作数据不会触发更新流程

总结

lifecycle.png