vue 生命周期钩子函数
可以理解为 vue 实例从创建到销毁的一个个阶段,每个阶段的内部构造都是不一样的,可以在不同的阶段做相应的处理(vue 生命周期钩子会自动绑定 this 上下文到实例中,因此可以访问数据,对属性和方法进行操作)
生命周期钩子 | 详情 |
---|---|
beforeCreate | 实例初始化之后,数据观测(data observer) 之前调用该钩子,此时实例还未创建,无法获取 data,不能使用 watch 监听,可以加入 loading 事件 |
created | 实例已经创建完成之后调用该钩子,此时实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调 data 被初始化,可以获取 data和调用 watch 监听,但是页面还是空白,结束 loading 事件,可以进行一些数据,资源的请求 |
beforeMount | 在挂载开始之前调用该钩子,页面未渲染,dom 未创建,相关的 render 函数首次被调用,完成 el 初始化,但并未被挂载,页面依然是空白 |
mounted | el 被新创建的 vm.$el 替换,并挂载到实例之后调用该钩子,实例挂载完成,此时 dom 已经创建,页面已经有内容,可以访问到 dom 和进行 dom 操作,如果返回的数据操作依赖 dom 完成,推荐这个时候发送数据请求 |
beforeUpdate | 数据更新时调用该钩子,发生在虚拟 dom 重新渲染和打补丁之前,可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程 |
updated | 数据更改导致的虚拟 dom 重新渲染和打补丁之后调用该钩子,此时数据更新完毕,可以执行依赖于 dom 的操作,应该避免在此期间更改状态,可能会导致更新无限循环 |
beforeDestroy | 实例销毁之前调用该钩子,此时实例仍然完全可用,可以清除定时器或者子组件以及事件监听器,解除事件绑定 destroyed | 实例销毁后调用该钩子,此时实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁 errorCaptured | 当捕获一个来自子孙组件的错误时调用该钩子,该钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串,该钩子可以返回 false 以阻止该错误继续向上传播 注: 除了 beforeCreate 和 created 钩子之外,其他钩子在服务器端渲染期间都不会被调用 除了 errorCaptured 钩子之外,其他钩子按照以上顺序 建议: 页面数据请求在 created 钩子中完成(mounted 钩子中页面 dom 已经生成,请求页面数据渲染页面可能会导致页面闪动)
Vue组件嵌套时生命周期钩子函数
加载渲染过程:
父组件beforeCreate =>
父组件created =>
父组件beforeMount =>
子组件beforeCreate =>
子组件created =>
子组件beforeMount =>
子组件mounted =>
父组件mounted
子组件更新过程:
父组件beforeUpdate =>
子组件beforeUpdate =>
子组件updated =>
父组件updated
父组件更新过程:
父组件beforeUpdate =>
父组件updated
组件销毁过程:
父组件beforeDestroy =>
子组件beforeDestroy =>
子组件destroyed =>
父组件destroyed