Press "Enter" to skip to content

Vue2 生命周期

Vue生命周期总共可以分为8个阶段:创建前后,载入前后,更新前后,销毁前后;

以及一些特殊场景的生命周期;

生命周期钩子描述
beforeCreate在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用
created在实例创建完成后立即同步调用。在这一步中,实例已完成对选项的处理,意味着以下内容已被配置完毕:数据侦听、计算属性、方法、事件/侦听器的回调函数。然而,挂载阶段还没开始,且 $el property 目前尚不可用
beforeMount在挂载开始之前被调用:相关的render函数首次被调用
mounted实例被挂载后调用,这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上,当 mounted 被调用时 vm.$el 也在文档内。
mounted 不会保证所有的子组件也都被挂载完成。如果希望等到整个视图都渲染完毕再执行某些操作,可以在 mounted 内部使用 vm.$nextTick
beforeUpdate在数据发生改变后,DOM被更新之前被调用。
这里适合在现有 DOM 将要被更新之前访问它,比如移除手动添加的事件监听器。
updated在数据更改导致的虚拟DOM重新渲染和更新完毕之后被调用
activated被keep-alive缓存的组件激活时调用
deactivated被keep-alive缓存的组件失活时调用
beforeDestroy实例销毁之前调用
destroyed实例销毁后调用
errorCaptured在捕获一个来自后代组件的错误时被调用
斜体的钩子在服务器端渲染期间不被调用;
加粗的钩子在特殊场景下使用;
de31b72816c6ef1108bb66172129c5db
    发表回复

    您的电子邮箱地址不会被公开。 必填项已用 * 标注