VUE生命周期钩子

生命周期钩子

  • 定义

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。

  • 钩子方法

beforeCreate:在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

created:在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。

beforeMount:在挂载开始之前被调用:相关的 render 函数首次被调用。

mounted:el被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子。

beforeUpdate:数据更新时调用,发生在虚拟 DOM 打补丁之前。

updated:数据更新时调用,发生在虚拟 DOM 打补丁之前。

activated:keep-alive 组件激活时调用。

deactivated:keep-alive 组件停用时调用。

beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。

destroyed:Vue实例销毁后调用。调用后,Vue实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

errorCaptured:2.5.0+ 新增,当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

  • 重点钩子

created:实例完全创建完毕(属性与方法都准备就绪)。可以进行数据操作(请求后台数据,重新渲染最新数据)

mounted:虚拟DOM构建完毕,并完成实例的el挂载。可以重新操作页面DOM

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容